forked from upsidedownlabs/Chords-Web
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Modified landing page, created steps component to use the app
- Loading branch information
1 parent
46b8d68
commit 76df770
Showing
20 changed files
with
285 additions
and
201 deletions.
There are no files selected for viewing
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
Binary file not shown.
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 |
|---|---|---|
| @@ -1,14 +1,44 @@ | ||
| import React from "react"; | ||
| import Navbar from "../components/Navbar"; | ||
| import SerialCheck from "../components/SerialCheck"; | ||
| import { Skeleton } from "../components/ui/skeleton"; | ||
| import dynamic from "next/dynamic"; | ||
| import Steps from "../components//LandingComp/Steps"; | ||
| import { Separator } from "@/components/ui/separator"; | ||
|
|
||
| const Page = () => { | ||
| const HeadSection = dynamic( | ||
| () => import("../components/LandingComp/HeadSection"), | ||
| { | ||
| loading: () => <SkeletonUI />, | ||
| ssr: false, | ||
| } | ||
| ); | ||
|
|
||
| const SkeletonUI = () => ( | ||
| <div className="container max-w-6xl mx-auto p-4 space-y-16"> | ||
| <div className="flex flex-col gap-4"> | ||
| <Skeleton className="h-24 w-3/4 mx-auto" /> | ||
| <Skeleton className="h-12 w-2/3 mx-auto" /> | ||
| </div> | ||
| <div className="flex space-x-4 justify-center"> | ||
| <Skeleton className="h-10 w-32" /> | ||
| <Skeleton className="h-10 w-32" /> | ||
| </div> | ||
|
|
||
| <Skeleton className="h-[1000px] w-full" /> | ||
| </div> | ||
| ); | ||
|
|
||
| const page = () => { | ||
| return ( | ||
| <div className="h-screen"> | ||
| <> | ||
| <Navbar /> | ||
| <SerialCheck /> | ||
| </div> | ||
| <div className="flex flex-col"> | ||
| <HeadSection /> | ||
| <Separator className="mt-20" /> | ||
| <Steps /> | ||
| </div> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default Page; | ||
| export default page; |
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,14 @@ | ||
| import React from "react"; | ||
| import Navbar from "../../components/Navbar"; | ||
| import SerialCheck from "../../components/SerialCheck"; | ||
|
|
||
| const Page = () => { | ||
| return ( | ||
| <div className="h-screen"> | ||
| <Navbar /> | ||
| <SerialCheck /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Page; |
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,92 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import Link from "next/link"; | ||
| import { Button } from "../../components/ui/button"; | ||
| import { GitHubLogoIcon } from "@radix-ui/react-icons"; | ||
| import Image from "next/image"; | ||
| import { useTheme } from "next-themes"; | ||
|
|
||
| const HeadSection = () => { | ||
| const { theme } = useTheme(); | ||
| return ( | ||
| <> | ||
| <section className="w-full pt-12"> | ||
| <div className="px-4 md:px-6 space-y-10 xl:space-y-16"> | ||
| <div className="flex flex-col justify-center items-center"> | ||
| <div> | ||
| <h1 className="lg:leading-tighter text-[1.90rem] font-bold tracking-tighter sm:text-5xl md:text-6xl xl:text-[3.5rem] 2xl:text-[4rem] text-center"> | ||
| BioAmp Signals Plotter for the web. | ||
| <br /> | ||
| Smooth & Reliable | ||
| </h1> | ||
| </div> | ||
| <div className="flex flex-col items-center space-y-4 text-center mt-4"> | ||
| <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl"> | ||
| <span className="text-plot font-lobster cursor-default tracking-wide hover:tracking-widest duration-300 transition-all"> | ||
| plot it | ||
| </span>{" "} | ||
| is a free and open-source plotter for BioAmp signals. It is | ||
| designed to be simple, fast, and reliable. | ||
| </p> | ||
| <div className="space-x-4 flex"> | ||
| <Link href="/stream"> | ||
| <Button> | ||
| {theme === "dark" ? ( | ||
| <Image | ||
| src="/assets/dark/favicon.ico" | ||
| width={16} | ||
| height={16} | ||
| alt="logo" | ||
| className="mr-2" | ||
| /> | ||
| ) : ( | ||
| <Image | ||
| src="/assets/light/favicon.ico" | ||
| width={16} | ||
| height={16} | ||
| alt="logo" | ||
| className="mr-2" | ||
| /> | ||
| )} | ||
| Visualize Now | ||
| </Button> | ||
| </Link> | ||
| <Link | ||
| href="https://github.com/upsidedownlabs/BioSignal-Recorder-Web" | ||
| target="_blank" | ||
| > | ||
| <Button | ||
| variant={"outline"} | ||
| className="flex justify-center items-center" | ||
| > | ||
| <GitHubLogoIcon className="mr-2 h-4 w-4" /> | ||
| <span>Source Code</span> | ||
| </Button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {theme === "dark" ? ( | ||
| <Image | ||
| src="/assets/dark/HeroSignalsClean.png" | ||
| alt="Plotter" | ||
| width={1000} | ||
| height={1000} | ||
| className="mx-auto mt-20 rounded" | ||
| /> | ||
| ) : ( | ||
| <Image | ||
| src="/assets/light/HeroSignalsClean.png" | ||
| alt="Plotter" | ||
| width={1000} | ||
| height={1000} | ||
| className="mx-auto mt-20 rounded" | ||
| /> | ||
| )} | ||
| </section> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default HeadSection; |
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,113 @@ | ||
| "use client"; | ||
| import React from "react"; | ||
| import { Card, CardContent, CardFooter } from "../ui/card"; | ||
| import Image from "next/image"; | ||
| import Link from "next/link"; | ||
| import { Button } from "../ui/button"; | ||
| import { CircleAlert } from "lucide-react"; | ||
| import { | ||
| HoverCard, | ||
| HoverCardContent, | ||
| HoverCardTrigger, | ||
| } from "../ui/hover-card"; | ||
|
|
||
| const Steps = () => { | ||
| return ( | ||
| <section className="w-full py-6 md:py-12 lg:py-16"> | ||
| <div className="container grid items-center justify-center px-4 text-center md:px-6 lg:gap-6"> | ||
| <div className="space-y-4"> | ||
| <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl pb-8"> | ||
| Get Started in 3 Simple Steps | ||
| </h2> | ||
| </div> | ||
| <div> | ||
| <div className="relative after:absolute after:inset-x-0 after:top-1/2 after:block after:h-0.5 after:-translate-y-1/2 after:rounded-lg after:bg-primary"> | ||
| <ol className="relative z-10 flex justify-between text-sm font-medium text-primary"> | ||
| <li className="flex items-center gap-2 bg-background p-2"> | ||
| <span className="size-6 rounded-full bg-primary text-center text-[10px]/6 font-bold text-background"> | ||
| 1 | ||
| </span> | ||
| <span className="hidden sm:block">Step 1</span> | ||
| </li> | ||
| <li className="flex items-center gap-2 bg-background p-2"> | ||
| <span className="size-6 rounded-full bg-primary text-center text-[10px]/6 font-bold text-background"> | ||
| 2 | ||
| </span> | ||
| <span className="hidden sm:block">Step 2</span> | ||
| </li> | ||
| <li className="flex items-center gap-2 bg-background p-2"> | ||
| <span className="size-6 rounded-full bg-primary text-center text-[10px]/6 font-bold text-background"> | ||
| 3 | ||
| </span> | ||
| <span className="hidden sm:block">Step 3</span> | ||
| </li> | ||
| </ol> | ||
| </div> | ||
| </div> | ||
| <div className="grid w-full max-w-6xl gap-6 sm:grid-cols-3 lg:grid-cols-3"> | ||
| {[ | ||
| { | ||
| title: "Gather Hardware", | ||
| description: | ||
| "Take a compatible board, BioAmp cable, jumper and electrodes. Make connections.", | ||
| image: "/steps/connections.png", | ||
| }, | ||
| { | ||
| title: "Flash Code to Board", | ||
| description: | ||
| "Upload the provided code to your board using Arduino IDE.", | ||
| image: "/steps/UploadCode.jpg", | ||
| }, | ||
| { | ||
| title: "Start Visualizing", | ||
| description: | ||
| "Open plot it, click connect, choose port and start visualizing the signals.", | ||
| image: "/steps/plotIt.jpg", | ||
| }, | ||
| ].map((step, index) => ( | ||
| <div key={index} className="flex flex-col items-center gap-4"> | ||
| <HoverCard> | ||
| <HoverCardTrigger> | ||
| <Card className="min-h-44"> | ||
| <CardContent className="space-y-2 flex flex-col h-full justify-center"> | ||
| <Image | ||
| src={step.image} | ||
| alt={`Step ${index + 1}`} | ||
| width={64} | ||
| height={64} | ||
| className="w-full rounded-md my-5" | ||
| /> | ||
| <h3 className="text-lg font-semibold">{step.title}</h3> | ||
| <p className="text-sm text-muted-foreground"> | ||
| {step.description} | ||
| </p> | ||
| </CardContent> | ||
| <CardFooter className="text-xs text-muted-foreground gap-1 md:flex-row items-center text-plot hidden md:flex"> | ||
| <CircleAlert size={18} /> Hover to preview image | ||
| </CardFooter> | ||
| </Card> | ||
| </HoverCardTrigger> | ||
| <HoverCardContent className="max-w-3xl w-full"> | ||
| <Image | ||
| src={step.image} | ||
| alt={`Step ${index + 1}`} | ||
| width={320} | ||
| height={320} | ||
| className="w-full h-auto rounded-md" | ||
| /> | ||
| </HoverCardContent> | ||
| </HoverCard> | ||
| </div> | ||
| ))} | ||
| </div> | ||
| <div className="flex justify-center pt-8"> | ||
| <Link href="/stream"> | ||
| <Button>Start Visualizing →</Button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default Steps; |
Oops, something went wrong.