Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve UI in footer and homepage, mention klang #311

Merged
merged 1 commit into from
Aug 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 28 additions & 9 deletions frontend/src/components/footer/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -10,6 +11,7 @@ import {
import SocialLink from "./SocialLink";

const Footer = () => {
const navigate = useNavigate();
const location = useLocation();
const { pathname } = location;

Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -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>
Expand Down
13 changes: 7 additions & 6 deletions frontend/src/components/home/Features.tsx
Original file line number Diff line number Diff line change
@@ -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 = [
Expand All @@ -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 (
Expand Down
32 changes: 18 additions & 14 deletions frontend/src/pages/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand All @@ -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>
Expand Down
Loading