-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ IMPROVEMENT ] Landing page redesign (#231)
* base for landing page redesign * landing page image based on darkmode state * refactor/style improvements * footer, landing page refined, refactor code * react device detect for mobile specific layout * social link component for footer * initial landing page done * fix build error * resolve PR comments
- Loading branch information
1 parent
e3c0384
commit d2a2f81
Showing
14 changed files
with
383 additions
and
44 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { ReactNode } from "react"; | ||
| import { useLocation } from "react-router-dom"; | ||
|
|
||
| interface ContainerProps { | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| const Container = (props: ContainerProps) => { | ||
| const { children } = props; | ||
| const location = useLocation(); | ||
| const { pathname } = location; | ||
|
|
||
| // Landing page/home path | ||
| if (pathname === "/") { | ||
| return <div className="pt-16">{children}</div>; | ||
| } | ||
|
|
||
| return <div className="container mx-auto pt-24 px-8">{children}</div>; | ||
| }; | ||
|
|
||
| export default Container; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { FaDiscord, FaGithub, FaLinkedinIn } from "react-icons/fa"; | ||
| import { Link, useLocation } from "react-router-dom"; | ||
| import { | ||
| DiscordPrimaryColor, | ||
| GithubPrimaryColor, | ||
| LinkedinPrimaryColor, | ||
| } from "types/colors"; | ||
| import SocialLink from "./SocialLink"; | ||
|
|
||
| const Footer = () => { | ||
| const location = useLocation(); | ||
| const { pathname } = location; | ||
|
|
||
| // Show/hide footer based on pathname | ||
| // - to hide footer on a page add path to this | ||
| const showFooter = | ||
| pathname?.startsWith("/browse") === false && | ||
| pathname?.startsWith("/some-other-path-to-hide-footer") === false; | ||
|
|
||
| if (!showFooter) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <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"> | ||
| <div className="flex flex-row justify-between items-center"> | ||
| <span className="text-2xl">K-Scale Labs</span> | ||
| <div className="flex flex-row gap-4 rounded-full"> | ||
| <SocialLink | ||
| href="https://www.linkedin.com/company/kscale" | ||
| ariaLabel="Visit K-Scale's LinkedIn Page" | ||
| bgColor={LinkedinPrimaryColor} | ||
| ringColor="focus:ring-sky-500" | ||
| > | ||
| <FaLinkedinIn /> | ||
| </SocialLink> | ||
| <SocialLink | ||
| href="https://github.com/kscalelabs/store" | ||
| ariaLabel="Visit K-Scale's Github Page" | ||
| bgColor={GithubPrimaryColor} | ||
| ringColor="focus:ring-black" | ||
| > | ||
| <FaGithub /> | ||
| </SocialLink> | ||
| <SocialLink | ||
| href="https://discord.gg/rhCy6UdBRD" | ||
| ariaLabel="Join K-Scale's Discord" | ||
| bgColor={DiscordPrimaryColor} | ||
| ringColor="focus:ring-black" | ||
| > | ||
| <FaDiscord /> | ||
| </SocialLink> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-row gap-32 sm:gap-56 md:gap-64"> | ||
| <div className="flex flex-col items-start gap-2 sm:gap-3"> | ||
| <h2 className="text-lg font-semibold mb-1">Company</h2> | ||
| <a | ||
| href="https://kscale.dev/about/" | ||
| className="hover:text-gray-500" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| About us | ||
| </a> | ||
| <a href="" className="hover:text-gray-500"> | ||
| News | ||
| </a> | ||
| <a href="" className="hover:text-gray-500"> | ||
| Blog | ||
| </a> | ||
| </div> | ||
| <div className="flex flex-col items-start gap-2 sm:gap-3"> | ||
| <h2 className="text-lg font-semibold mb-1">Buy and Sell</h2> | ||
| <Link to={"/browse"} className="hover:text-gray-500"> | ||
| Robots | ||
| </Link> | ||
| <Link to={"/browse"} className="hover:text-gray-500"> | ||
| Parts | ||
| </Link> | ||
| <Link to={"/browse"} className="hover:text-gray-500"> | ||
| Designs | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| <div className="mt-10 text-xs"> | ||
| <p> | ||
| <span>©</span> {new Date().getFullYear()} K-Scale Labs | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ); | ||
| }; | ||
|
|
||
| export default Footer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { FC, ReactNode } from "react"; | ||
|
|
||
| interface SocialLinkProps { | ||
| href: string; | ||
| ariaLabel: string; | ||
| bgColor: string; | ||
| ringColor: string; | ||
| children: ReactNode; // social link icon | ||
| className?: string; | ||
| } | ||
|
|
||
| const SocialLink: FC<SocialLinkProps> = ({ | ||
| href, | ||
| ariaLabel, | ||
| bgColor, | ||
| ringColor, | ||
| children, | ||
| className, | ||
| }) => { | ||
| return ( | ||
| <a | ||
| href={href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className={` | ||
| hover:bg-opacity-80 | ||
| rounded-full | ||
| text-white | ||
| cursor-pointer | ||
| focus:outline-none | ||
| focus:ring-2 focus:ring-offset-2 ${ringColor} | ||
| ${className} | ||
| `} | ||
| style={{ backgroundColor: bgColor }} | ||
| > | ||
| <button className="text-xl p-2 rounded-full" aria-label={ariaLabel}> | ||
| {children} | ||
| </button> | ||
| </a> | ||
| ); | ||
| }; | ||
|
|
||
| export default SocialLink; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { FaGear, FaMessage, FaRobot } from "react-icons/fa6"; | ||
|
|
||
| const Features = () => { | ||
| const features = [ | ||
| { | ||
| name: "Buy and sell robots", | ||
| description: "Buy and sell completed robots, parts, and designs.", | ||
| icon: <FaRobot />, | ||
| }, | ||
| { | ||
| name: "Find parts", | ||
| description: | ||
| "Actuators, motors, and more! Buy, sell, and read about any part. Get recommendations and suggestions to help you with your project.", | ||
| icon: <FaGear />, | ||
| }, | ||
| { | ||
| name: "Join the converstation", | ||
| description: | ||
| "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 | ||
| // }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="my-20 mx-auto max-w-7xl px-6 lg:px-8"> | ||
| <div className="mx-auto max-w-2xl lg:text-center"> | ||
| <h2 className="text-lg font-semibold leading-6 text-blue-700 dark:text-blue-300"> | ||
| Robots made here. | ||
| </h2> | ||
| <p className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl"> | ||
| Everything you need to build your next robot | ||
| </p> | ||
| <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300"> | ||
| Talk with professionals, researchers, and hobbyists. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl"> | ||
| <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16"> | ||
| {features.map((feature) => ( | ||
| <div key={feature.name} className="relative pl-16"> | ||
| <dt className="text-base font-semibold leading-7"> | ||
| <div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-700"> | ||
| <div aria-hidden="true" className="text-xl text-white"> | ||
| {feature.icon} | ||
| </div> | ||
| </div> | ||
| {feature.name} | ||
| </dt> | ||
| <dd className="mt-2 text-base leading-7 text-gray-600 dark:text-gray-300"> | ||
| {feature.description} | ||
| </dd> | ||
| </div> | ||
| ))} | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Features; |
Oops, something went wrong.