From 6f2c75b58e5e3c551cfe6736022f2cb71e6244b6 Mon Sep 17 00:00:00 2001
From: Winston Hsiao <hsiaowinston@gmail.com>
Date: Wed, 21 Aug 2024 15:14:41 -0700
Subject: [PATCH] improve UI in footer and homepage, mention klang

---
 frontend/src/components/footer/Footer.tsx | 37 +++++++++++++++++------
 frontend/src/components/home/Features.tsx | 13 ++++----
 frontend/src/pages/Home.tsx               | 32 +++++++++++---------
 3 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/footer/Footer.tsx b/frontend/src/components/footer/Footer.tsx
index 1a0fb04a..81b8852c 100644
--- a/frontend/src/components/footer/Footer.tsx
+++ b/frontend/src/components/footer/Footer.tsx
@@ -1,6 +1,7 @@
 import { FaDiscord, FaGithub, FaLinkedinIn } from "react-icons/fa";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 
+import smallLogo from "assets/small-logo.png";
 import {
   DiscordPrimaryColor,
   GithubPrimaryColor,
@@ -10,6 +11,7 @@ import {
 import SocialLink from "./SocialLink";
 
 const Footer = () => {
+  const navigate = useNavigate();
   const location = useLocation();
   const { pathname } = location;
 
@@ -28,8 +30,20 @@ const Footer = () => {
     <footer className="bg-gray-50 dark:bg-gray-800 text-sm py-20">
       <div className="flex flex-col gap-4 mx-12 sm:mx-36">
         {/* Logo and Social Links */}
-        <div className="flex flex-row justify-between items-center">
-          <span className="text-xl sm:text-2xl">K-Scale Store</span>
+        <div className="flex flex-row justify-between items-center mb-8">
+          <a
+            className="flex items-center active cursor-pointer"
+            onClick={() => navigate("/")}
+          >
+            <img
+              src={smallLogo}
+              alt="kscale logo"
+              className="h-8 dark:invert"
+            />
+            <span className="ml-2 text-xl font-bold text-gray-800 dark:text-gray-200">
+              store
+            </span>
+          </a>
           <div className="flex flex-row gap-4 rounded-full">
             <SocialLink
               href="https://www.linkedin.com/company/kscale"
@@ -61,7 +75,7 @@ const Footer = () => {
         {/* Footer Links */}
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
           <div className="flex flex-col items-start gap-2 sm:gap-3">
-            <h2 className="text-base sm:text-lg font-semibold mb-1">Company</h2>
+            <h2 className="text-base sm:text-lg font-bold mb-1">Company</h2>
             <a
               href="https://kscalelabs.com"
               className="hover:text-gray-500"
@@ -70,12 +84,17 @@ const Footer = () => {
             >
               Homepage
             </a>
-            <a href="https://blog.kscale.dev" className="hover:text-gray-500">
+            <a
+              href="https://blog.kscale.dev"
+              className="hover:text-gray-500"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               Blog
             </a>
           </div>
           <div className="flex flex-col items-start gap-2 sm:gap-3">
-            <h2 className="text-base sm:text-lg font-semibold mb-1">Legal</h2>
+            <h2 className="text-base sm:text-lg font-bold mb-1">Legal</h2>
             <Link to={"/privacy"} className="hover:text-gray-500">
               Privacy Policy
             </Link>
@@ -87,7 +106,7 @@ const Footer = () => {
             </Link>
           </div>
           <div className="flex flex-col items-start gap-2 sm:gap-3">
-            <h2 className="text-base sm:text-lg font-semibold mb-1">Links</h2>
+            <h2 className="text-base sm:text-lg font-bold mb-1">Links</h2>
             <a
               href="https://github.com/kscalelabs/store"
               className="hover:text-gray-500"
@@ -97,8 +116,8 @@ const Footer = () => {
           </div>
         </div>
 
-        {/* Copy Right */}
-        <div className="mt-10 text-xs">
+        {/* Copyright */}
+        <div className="mt-10 text-xs text-center">
           <p>
             <span>©</span> {new Date().getFullYear()} K-Scale Labs
           </p>
diff --git a/frontend/src/components/home/Features.tsx b/frontend/src/components/home/Features.tsx
index afd34865..430fe550 100644
--- a/frontend/src/components/home/Features.tsx
+++ b/frontend/src/components/home/Features.tsx
@@ -1,4 +1,4 @@
-import { FaGear, FaMessage, FaRobot } from "react-icons/fa6";
+import { FaGear, FaLaptop, FaMessage, FaRobot } from "react-icons/fa6";
 
 const Features = () => {
   const features = [
@@ -19,11 +19,12 @@ const Features = () => {
         "Join the K-Scale discord for Q&A and to see what other people are building.",
       icon: <FaMessage />,
     },
-    // {
-    //   name: "Another feature item",
-    //   description: "Description tbd",
-    //   // icon: <Icon />, // tbd
-    // },
+    {
+      name: "Use the best robotics devtools",
+      description:
+        "Use our programming lanuage Klang along with our other AI models and tools.",
+      icon: <FaLaptop />,
+    },
   ];
 
   return (
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index b0c7dc06..51cd6d55 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -28,12 +28,11 @@ const Home = () => {
   const renderDesktopHero = () => (
     <div className="relative isolate overflow-hidden h-[660px]">
       {renderImage}
-      <div className="absolute inset-0 backdrop-blur-sm bg-white/40 dark:bg-black/40 px-20 py-12 lg:w-1/2 shadow-sm">
-        <div className="relative mx-auto max-w-2xl mt-10 px-6 lg:px-16">
+      <div className="absolute inset-0 flex justify-end items-end backdrop-blur-sm bg-white/40 dark:bg-black/40 p-8 lg:w-1/2 shadow-sm">
+        <div className="relative mx-auto max-w-2xl mb-16 lg:mb-24">
           <h1 className="max-w-2xl mb-4 text-4xl font-extrabold leading-none tracking-tight md:text-5xl xl:text-6xl text-white">
-            Buy, Sell,
-            <br /> Build, and
-            <br /> Share
+            Buy, Sell, Build,
+            <br /> and Share
             <br /> Droids
           </h1>
           <div className="flex gap-4 mx-auto mt-8 max-w-2xl lg:mx-0 lg:max-w-none">
@@ -72,18 +71,12 @@ const Home = () => {
   const renderMobileHero = () => (
     <div className="relative isolate overflow-hidden h-[70vh]">
       {renderImage}
-      <div className="absolute inset-x-0 bottom-0 h-1/2 backdrop-blur-sm bg-white/40 dark:bg-black/40 px-6 py-8 shadow-sm">
+      <div className="absolute inset-x-0 bottom-0 h-1/2 flex backdrop-blur-sm bg-white/40 dark:bg-black/40 px-6 py-8 shadow-sm">
         <div className="relative mx-auto max-w-sm px-4">
           <h1 className="text-3xl font-bold tracking-tight text-white">
-            K-Scale Store
+            Buy, Sell, Build, and Share Droids
           </h1>
-          <p className="mt-2 text-sm text-white">
-            Buy and sell robots and robot parts,
-            <br /> share hardware and software,
-            <br /> and connect with other robot enthusiasts,
-            <br /> all in one place.
-          </p>
-          <div className="flex flex-row gap-2 mt-6 max-w-xs">
+          <div className="flex flex-row gap-2 mt-4 max-w-xs">
             <Button
               onClick={() => navigate(`/browse`)}
               variant="primary"
@@ -100,6 +93,17 @@ const Home = () => {
               Create
             </Button>
           </div>
+          <p className="mt-4 text-white text-sm italic">
+            Built with ❤️ by{" "}
+            <a
+              href="https://kscalelabs.com"
+              target="_blank"
+              className="underline"
+              rel="noreferrer"
+            >
+              K-Scale Labs
+            </a>
+          </p>
         </div>
       </div>
     </div>