diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png deleted file mode 100644 index 9861079..0000000 Binary files a/public/android-chrome-192x192.png and /dev/null differ diff --git a/public/assets/dark/HeroSignalsClean.png b/public/assets/dark/HeroSignalsClean.png new file mode 100644 index 0000000..41379fa Binary files /dev/null and b/public/assets/dark/HeroSignalsClean.png differ diff --git a/public/assets/dark/favicon.ico b/public/assets/dark/favicon.ico new file mode 100644 index 0000000..2c5512e Binary files /dev/null and b/public/assets/dark/favicon.ico differ diff --git a/public/assets/light/HeroSignalsClean.png b/public/assets/light/HeroSignalsClean.png new file mode 100644 index 0000000..6b1c405 Binary files /dev/null and b/public/assets/light/HeroSignalsClean.png differ diff --git a/public/assets/light/favicon.ico b/public/assets/light/favicon.ico new file mode 100644 index 0000000..b1bda7a Binary files /dev/null and b/public/assets/light/favicon.ico differ diff --git a/public/logo_black_hr_nbg.svg b/public/logo_black_hr_nbg.svg deleted file mode 100644 index be4355d..0000000 --- a/public/logo_black_hr_nbg.svg +++ /dev/null @@ -1,81 +0,0 @@ - - - - diff --git a/public/logo_white_hr_nbg.svg b/public/logo_white_hr_nbg.svg deleted file mode 100644 index 9900d6f..0000000 --- a/public/logo_white_hr_nbg.svg +++ /dev/null @@ -1,82 +0,0 @@ - - - - diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/steps/UploadCode.jpg b/public/steps/UploadCode.jpg new file mode 100644 index 0000000..1ee67ba Binary files /dev/null and b/public/steps/UploadCode.jpg differ diff --git a/public/steps/connections.png b/public/steps/connections.png new file mode 100644 index 0000000..105f14e Binary files /dev/null and b/public/steps/connections.png differ diff --git a/public/steps/plotIt.jpg b/public/steps/plotIt.jpg new file mode 100644 index 0000000..ed5e1f1 Binary files /dev/null and b/public/steps/plotIt.jpg differ diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/favicon.ico b/src/app/favicon.ico index 718d6fe..b1bda7a 100644 Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b9d2464..eed7736 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,7 +1,12 @@ import React from "react"; import type { Metadata } from "next"; import { ThemeProvider } from "../components/Theming/theme-provider"; -import { Inter, Lobster_Two, Yanone_Kaffeesatz } from "next/font/google"; +import { + Inter, + Lobster_Two, + Yanone_Kaffeesatz, + Poppins, +} from "next/font/google"; import { cn } from "../lib/utils"; import { Toaster } from "../components/ui/sonner"; import "./globals.css"; @@ -19,6 +24,12 @@ const lobsterTwo = Lobster_Two({ weight: "400", }); +const poppins = Poppins({ + subsets: ["latin"], + variable: "--font-poppins", + weight: "400", +}); + const yanoneKaffeesatz = Yanone_Kaffeesatz({ subsets: ["latin"], variable: "--font-yanone_kaffeesatz", @@ -36,7 +47,8 @@ export default function RootLayout({ className={cn( lobsterTwo.variable, inter.className, - yanoneKaffeesatz.variable + yanoneKaffeesatz.variable, + poppins.variable )} > { +const HeadSection = dynamic( + () => import("../components/LandingComp/HeadSection"), + { + loading: () => , + ssr: false, + } +); + +const SkeletonUI = () => ( +
+
+ + +
+
+ + +
+ + +
+); + +const page = () => { return ( -
+ <> - -
+
+ + + +
+ ); }; -export default Page; +export default page; diff --git a/src/app/stream/page.tsx b/src/app/stream/page.tsx new file mode 100644 index 0000000..a8dc188 --- /dev/null +++ b/src/app/stream/page.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import Navbar from "../../components/Navbar"; +import SerialCheck from "../../components/SerialCheck"; + +const Page = () => { + return ( +
+ + +
+ ); +}; + +export default Page; diff --git a/src/components/InCompatibleBrowser.tsx b/src/components/InCompatibleBrowser.tsx index 567925d..0f4884c 100644 --- a/src/components/InCompatibleBrowser.tsx +++ b/src/components/InCompatibleBrowser.tsx @@ -25,46 +25,35 @@ const InCompatibleBrowser = () => { image: "https://img.icons8.com/?size=100&id=63646&format=png&color=000000", }, - { - name: "Brave", - image: - "https://img.icons8.com/?size=100&id=63785&format=png&color=000000", - }, ]; return ( -
+
- Browser -

- ! Browser Not Supported +

+ ! Browser Not Supported

- -
- Only the browser listed below are supported by this application. + +
+ Supported Browsers
-
+
{browsers.map((browser) => ( Google Chrome

{browser.name}

 ))}
- +

Frequently Asked Questions

@@ -83,8 +72,8 @@ const InCompatibleBrowser = () => { How can I access the application? To access the application, please use a Chromium-based browser such - as Google Chrome, Microsoft Edge, Opera, or Brave. These browsers - support the Web Serial API required for this application to function + as Google Chrome, Microsoft Edge or Opera. These browsers support + the Web Serial API required for this application to function properly. You can download one of these browsers from their official websites. diff --git a/src/components/LandingComp/HeadSection.tsx b/src/components/LandingComp/HeadSection.tsx new file mode 100644 index 0000000..8eaf3c0 --- /dev/null +++ b/src/components/LandingComp/HeadSection.tsx @@ -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 ( + <> +
+
+
+
+

+ BioAmp Signals Plotter for the web. +
+ Smooth & Reliable +

+
+
+

+ + plot it + {" "} + is a free and open-source plotter for BioAmp signals. It is + designed to be simple, fast, and reliable. +

+
+ + + + + + +
+
+
+
+ {theme === "dark" ? ( + Plotter + ) : ( + Plotter + )} +
+ + ); +}; + +export default HeadSection; diff --git a/src/components/LandingComp/Steps.tsx b/src/components/LandingComp/Steps.tsx new file mode 100644 index 0000000..f4b914c --- /dev/null +++ b/src/components/LandingComp/Steps.tsx @@ -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 ( +
+
+
+

+ Get Started in 3 Simple Steps +

+
+
+
+
    +
  1. + + 1 + + Step 1 +
    2. +
  2. + + 2 + + Step 2 +
    3. +
  3. + + 3 + + Step 3 +
    4. +
+
+
+
+ {[ + { + 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) => ( +
+ + + + + {`Step +

{step.title}

+

+ {step.description} +

+ + + Hover to preview image + + + + + {`Step + + +
+ ))} +
+
+ + + +
+
+
+ ); +}; + +export default Steps; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 9af6f77..571cc6d 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -12,12 +12,11 @@ const Navbar = () => {
-
window.location.reload()} - > - plot it -
+ +
+ plot it +
+