├── website
    ├── .eslintrc.json
    ├── public
    │   ├── icons
    │   │   ├── favicon.ico
    │   │   └── apple-touch-icon.png
    │   ├── images
    │   │   ├── logo.png
    │   │   ├── tejal.png
    │   │   ├── veljko.jpg
    │   │   ├── will.jpg
    │   │   ├── landing-page.png
    │   │   └── mac-bar.svg
    │   ├── videos
    │   │   ├── center.mp4
    │   │   ├── resize.mp4
    │   │   ├── total.mp4
    │   │   ├── total.webm
    │   │   ├── center.webm
    │   │   ├── palette.mp4
    │   │   ├── palette.webm
    │   │   └── resize.webm
    │   └── scripts
    │   │   └── darkModeScript.js
    ├── src
    │   ├── images
    │   │   └── render-solo.png
    │   ├── svg
    │   │   ├── RightArrow.tsx
    │   │   ├── ScatteredSpheres.tsx
    │   │   ├── Quote.tsx
    │   │   ├── DarkModeIcons.tsx
    │   │   ├── NewsletterSpheres.tsx
    │   │   └── FeatureIcons.tsx
    │   ├── components
    │   │   ├── GradientText.tsx
    │   │   ├── Details.tsx
    │   │   ├── Button.tsx
    │   │   ├── Input.tsx
    │   │   ├── Card.tsx
    │   │   ├── Title.tsx
    │   │   ├── Demo.tsx
    │   │   ├── LinkButton.tsx
    │   │   ├── Section.tsx
    │   │   └── WaitlistForm.tsx
    │   └── sections
    │   │   ├── Footer.tsx
    │   │   ├── Newsletter.tsx
    │   │   ├── Hero.tsx
    │   │   ├── Header.tsx
    │   │   ├── FeatureBlocks.tsx
    │   │   ├── Testimonials.tsx
    │   │   └── Features.tsx
    ├── postcss.config.js
    ├── next.config.js
    ├── pages
    │   ├── api
    │   │   └── waitlist.ts
    │   ├── _document.tsx
    │   ├── index.tsx
    │   └── _app.tsx
    ├── .gitignore
    ├── tsconfig.json
    ├── package.json
    ├── LICENSE
    ├── tailwind.config.js
    ├── README.md
    └── styles
    │   └── globals.css
├── Meshtastic-ESP-RA-BOM.csv
├── Meshtastic-ESP-RA-CPL.csv
├── Meshtastic-ESP-RA-Gerber.zip
├── ProPrj_Icarus-v2_2025-04-28.epro.zip
├── LICENSE
└── README.md


/website/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/Meshtastic-ESP-RA-BOM.csv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/Meshtastic-ESP-RA-BOM.csv


--------------------------------------------------------------------------------
/Meshtastic-ESP-RA-CPL.csv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/Meshtastic-ESP-RA-CPL.csv


--------------------------------------------------------------------------------
/Meshtastic-ESP-RA-Gerber.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/Meshtastic-ESP-RA-Gerber.zip


--------------------------------------------------------------------------------
/website/public/icons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/icons/favicon.ico


--------------------------------------------------------------------------------
/website/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/images/logo.png


--------------------------------------------------------------------------------
/website/public/images/tejal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/images/tejal.png


--------------------------------------------------------------------------------
/website/public/images/veljko.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/images/veljko.jpg


--------------------------------------------------------------------------------
/website/public/images/will.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/images/will.jpg


--------------------------------------------------------------------------------
/website/public/videos/center.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/videos/center.mp4


--------------------------------------------------------------------------------
/website/public/videos/resize.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/videos/resize.mp4


--------------------------------------------------------------------------------
/website/public/videos/total.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/videos/total.mp4


--------------------------------------------------------------------------------
/website/public/videos/total.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/videos/total.webm


--------------------------------------------------------------------------------
/website/public/videos/center.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/videos/center.webm


--------------------------------------------------------------------------------
/website/public/videos/palette.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/videos/palette.mp4


--------------------------------------------------------------------------------
/website/public/videos/palette.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/videos/palette.webm


--------------------------------------------------------------------------------
/website/public/videos/resize.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/videos/resize.webm


--------------------------------------------------------------------------------
/website/src/images/render-solo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/src/images/render-solo.png


--------------------------------------------------------------------------------
/ProPrj_Icarus-v2_2025-04-28.epro.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/ProPrj_Icarus-v2_2025-04-28.epro.zip


--------------------------------------------------------------------------------
/website/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/website/public/images/landing-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/images/landing-page.png


--------------------------------------------------------------------------------
/website/public/icons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azlan-works/Icarus/HEAD/website/public/icons/apple-touch-icon.png


--------------------------------------------------------------------------------
/website/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   swcMinify: true,
 5 |   i18n: {
 6 |     locales: ["en"],
 7 |     defaultLocale: "en",
 8 |   },
 9 | };
10 | 
11 | module.exports = nextConfig;
12 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. 
2 | To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/ or send a 
3 | letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
4 | 


--------------------------------------------------------------------------------
/website/pages/api/waitlist.ts:
--------------------------------------------------------------------------------
 1 | import { NextApiRequest, NextApiResponse } from "next";
 2 | 
 3 | const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 4 |   const { email } = req.body;
 5 | 
 6 |   res.status(200).json({ email });
 7 | };
 8 | 
 9 | export default handler;
10 | 


--------------------------------------------------------------------------------
/website/src/svg/RightArrow.tsx:
--------------------------------------------------------------------------------
 1 | export const RightArrow = () => (
 2 |   <svg
 3 |     className="flex-shrink-0 w-3 h-3 ml-2 -mr-1 fill-current"
 4 |     viewBox="0 0 12 12"
 5 |     xmlns="http://www.w3.org/2000/svg"
 6 |   >
 7 |     <path
 8 |       d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z"
 9 |       fillRule="nonzero"
10 |     />
11 |   </svg>
12 | );
13 | 


--------------------------------------------------------------------------------
/website/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import { Head, Html, Main, NextScript } from "next/document";
 2 | import Script from "next/script";
 3 | 
 4 | const Document = () => {
 5 |   return (
 6 |     <Html>
 7 |       <Head />
 8 |       <body>
 9 |         <Script strategy="beforeInteractive" src="/scripts/darkModeScript.js" />
10 |         <Main />
11 |         <NextScript />
12 |       </body>
13 |     </Html>
14 |   );
15 | };
16 | 
17 | export default Document;
18 | 


--------------------------------------------------------------------------------
/website/src/components/GradientText.tsx:
--------------------------------------------------------------------------------
 1 | import { DetailedHTMLProps, HTMLAttributes } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | export const GradientText = (
 7 |   props: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
 8 | ) => {
 9 |   return (
10 |     <span
11 |       {...props}
12 |       className={twMerge("bg-text bg-gradient-to-r", props.className)}
13 |     />
14 |   );
15 | };
16 | 


--------------------------------------------------------------------------------
/website/src/components/Details.tsx:
--------------------------------------------------------------------------------
 1 | import { DetailedHTMLProps, HTMLAttributes } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | export const Details = (
 7 |   props: DetailedHTMLProps<
 8 |     HTMLAttributes<HTMLParagraphElement>,
 9 |     HTMLParagraphElement
10 |   >
11 | ) => {
12 |   return (
13 |     <p
14 |       {...props}
15 |       data-aos="zoom-y-out"
16 |       data-aos-delay="150"
17 |       className={twMerge("body-lg text-light", props.className)}
18 |     />
19 |   );
20 | };
21 | 


--------------------------------------------------------------------------------
/website/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/website/src/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import { ButtonHTMLAttributes, DetailedHTMLProps } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | export const Button = (
 7 |   props: DetailedHTMLProps<
 8 |     ButtonHTMLAttributes<HTMLButtonElement>,
 9 |     HTMLButtonElement
10 |   >
11 | ) => (
12 |   <button
13 |     type="button"
14 |     {...props}
15 |     className={twMerge(
16 |       "text-gray-50 font-bold bg-primary-600 rounded-lg hover:bg-primary-700 w-fit px-4 py-2",
17 |       props.className
18 |     )}
19 |   />
20 | );
21 | 


--------------------------------------------------------------------------------
/website/src/svg/ScatteredSpheres.tsx:
--------------------------------------------------------------------------------
 1 | export const ScatteredSpheres = () => (
 2 |   <svg viewBox="0 0 1360 578" xmlns="http://www.w3.org/2000/svg">
 3 |     <defs>
 4 |       <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="illustration-01">
 5 |         <stop stopColor="#FFF" offset="0%" />
 6 |         <stop stopColor="#EAEAEA" offset="77.402%" />
 7 |         <stop stopColor="#DFDFDF" offset="100%" />
 8 |       </linearGradient>
 9 |     </defs>
10 |     <g fill="url(#illustration-01)" fillRule="evenodd">
11 |       <circle cx="1232" cy="128" r="128" />
12 |       <circle cx="155" cy="443" r="64" />
13 |     </g>
14 |   </svg>
15 | );
16 | 


--------------------------------------------------------------------------------
/website/src/components/Input.tsx:
--------------------------------------------------------------------------------
 1 | import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | export const Input = (
 7 |   props: DetailedHTMLProps<
 8 |     InputHTMLAttributes<HTMLInputElement>,
 9 |     HTMLInputElement
10 |   >
11 | ) => {
12 |   return (
13 |     <input
14 |       {...props}
15 |       className={twMerge(
16 |         "px-4 py-3 border rounded-lg placeholder-gray-400 dark:placeholder-gray-600 bg-strong first-line:border-gray-200 dark:border-gray-600 text-strong",
17 |         props.className
18 |       )}
19 |     />
20 |   );
21 | };
22 | 


--------------------------------------------------------------------------------
/website/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true
17 |   },
18 |   "include": [
19 |     "next-env.d.ts",
20 |     "**/*.ts",
21 |     "**/*.tsx",
22 |     "public/scripts/darkModeScript.js"
23 |   ],
24 |   "exclude": ["node_modules"]
25 | }
26 | 


--------------------------------------------------------------------------------
/website/src/svg/Quote.tsx:
--------------------------------------------------------------------------------
 1 | export const Quote = () => {
 2 |   return (
 3 |     <svg
 4 |       className="absolute top-0 right-0 w-16 h-16 -mt-3 -mr-8 text-primary-500 fill-current"
 5 |       viewBox="0 0 64 64"
 6 |       aria-hidden="true"
 7 |       xmlns="http://www.w3.org/2000/svg"
 8 |     >
 9 |       <path d="M37.89 58.338c-2.648-5.63-3.572-10.045-2.774-13.249.8-3.203 8.711-13.383 23.737-30.538l2.135.532c-6.552 10.033-10.532 17.87-11.939 23.515-.583 2.34.22 6.158 2.41 11.457l-13.57 8.283zm-26.963-6.56c-2.648-5.63-3.572-10.046-2.773-13.25.799-3.203 8.71-13.382 23.736-30.538l2.136.533c-6.552 10.032-10.532 17.87-11.94 23.515-.583 2.339.22 6.158 2.41 11.456l-13.57 8.283z" />
10 |     </svg>
11 |   );
12 | };
13 | 


--------------------------------------------------------------------------------
/website/src/components/Card.tsx:
--------------------------------------------------------------------------------
 1 | import { DetailedHTMLProps, HTMLAttributes } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | export const Card = (
 7 |   props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
 8 |     grayer?: boolean;
 9 |   }
10 | ) => {
11 |   const { grayer = false, ...divProps } = props;
12 | 
13 |   return (
14 |     <div
15 |       {...divProps}
16 |       className={twMerge(
17 |         `relative shadow-xl flex-1 border border-gray-300 rounded-lg dark:border-gray-600 ${
18 |           grayer ? "bg-strong" : "bg-extra-strong"
19 |         }`,
20 |         props.className
21 |       )}
22 |     />
23 |   );
24 | };
25 | 


--------------------------------------------------------------------------------
/website/src/sections/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import { LinkButton } from "../components/LinkButton";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | export const Footer = () => {
 7 |   return (
 8 |     <footer className="bg-extra-strong">
 9 |       <div className="items-center justify-between px-10 py-4 mx-auto sm:px-6 row max-w-7xl">
10 |         <div className="items-center gap-4 row">
11 |           <div className="text-sm text-light">&copy; Muhammad Shah 2024</div>
12 |         </div>
13 |         <LinkButton
14 |           href="https://github.com/babyyoda777/Icarus"
15 |           aria-label="GitHuB"
16 |         >
17 |           Check out GitHub!
18 |         </LinkButton>
19 |       </div>
20 |     </footer>
21 |   );
22 | };
23 | 


--------------------------------------------------------------------------------
/website/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Features } from "../src/sections/Features";
 2 | import { FeatureBlocks } from "../src/sections/FeatureBlocks";
 3 | import { Footer } from "../src/sections/Footer";
 4 | import { Header } from "../src/sections/Header";
 5 | import { Hero } from "../src/sections/Hero";
 6 | import { Newsletter } from "../src/sections/Newsletter";
 7 | import { Testimonials } from "../src/sections/Testimonials";
 8 | 
 9 | const Home = ({
10 |   isDarkMode,
11 |   toggleDarkMode,
12 | }: {
13 |   isDarkMode: boolean;
14 |   toggleDarkMode: () => void;
15 | }) => {
16 |   return (
17 |     <div className="overflow-hidden col text-strong">
18 |       <Header isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
19 |       <main>
20 |         <Hero />
21 |         <Features />
22 |       </main>
23 |       <Footer />
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default Home;
29 | 


--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vivid-landing-template",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^1.1.3",
13 |     "next": "13.0.0",
14 |     "react": "18.2.0",
15 |     "react-dom": "18.2.0",
16 |     "tailwind-merge": "^1.8.0"
17 |   },
18 |   "devDependencies": {
19 |     "@types/aos": "^3.0.4",
20 |     "@types/node": "18.11.7",
21 |     "@types/react": "18.0.24",
22 |     "@types/react-dom": "18.0.8",
23 |     "aos": "^2.3.4",
24 |     "autoprefixer": "^10.4.13",
25 |     "eslint": "8.26.0",
26 |     "eslint-config-next": "13.0.0",
27 |     "next-seo": "^5.11.1",
28 |     "postcss": "^8.4.18",
29 |     "tailwindcss": "^3.2.1",
30 |     "typescript": "4.8.4",
31 |     "usehooks-ts": "^2.9.1",
32 |     "vivid-studio": "^0.14.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/website/src/components/Title.tsx:
--------------------------------------------------------------------------------
 1 | import { DetailedHTMLProps, HTMLAttributes } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | export const Title = (
 7 |   props: DetailedHTMLProps<
 8 |     HTMLAttributes<HTMLHeadingElement>,
 9 |     HTMLHeadingElement
10 |   > & { size: "lg" | "md" }
11 | ) => {
12 |   const { size, className = "", ...htmlProps } = props;
13 | 
14 |   const headingProps = {
15 |     ...htmlProps,
16 |     "data-aos": "zoom-y-out",
17 |   };
18 | 
19 |   return size === "lg" ? (
20 |     <h1
21 |       {...headingProps}
22 |       className={twMerge(
23 |         "font-bold leading-tight tracking-tighter title-lg",
24 |         className
25 |       )}
26 |     />
27 |   ) : (
28 |     <h2
29 |       {...headingProps}
30 |       className={twMerge(
31 |         "font-bold leading-tight tracking-tighter title-md",
32 |         className
33 |       )}
34 |     />
35 |   );
36 | };
37 | 


--------------------------------------------------------------------------------
/website/src/components/Demo.tsx:
--------------------------------------------------------------------------------
 1 | import { DetailedHTMLProps, HTMLAttributes } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | type DemoProps = DetailedHTMLProps<
 7 |   HTMLAttributes<HTMLDivElement>,
 8 |   HTMLDivElement
 9 | > & {
10 |   webmSrc: string;
11 |   mp4Src: string;
12 |   alt: string;
13 | };
14 | 
15 | export const Demo = (props: DemoProps) => {
16 |   const { webmSrc, mp4Src, alt, ...divProps } = props;
17 | 
18 |   return (
19 |     <div
20 |       {...divProps}
21 |       className={twMerge(
22 |         "relative col w-full justify-center max-w-2xl overflow-hidden shadow-lg round-rect",
23 |         divProps.className
24 |       )}
25 |     >
26 |       <video autoPlay loop muted playsInline aria-label={alt} tabIndex={-1}>
27 |         {/* Need both for Safari compatibility */}
28 |         <source src={webmSrc} type="video/webm" />
29 |         <source src={mp4Src} type="video/mp4" />
30 |       </video>
31 |     </div>
32 |   );
33 | };
34 | 


--------------------------------------------------------------------------------
/website/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Vivid Labs
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/website/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const colors = require("tailwindcss/colors");
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   // Control dark pseudo-selector by ancestor's "dark" class
 6 |   darkMode: "class",
 7 |   // Scan these files for Tailwind classes
 8 |   content: ["./pages/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
 9 |   theme: {
10 |     colors: {
11 |       // Necessary color utilities
12 |       transparent: colors.transparent,
13 |       current: colors.current,
14 |       // Primary accent color
15 |       primary: colors.blue,
16 |       // Grayscale
17 |       gray: colors.zinc,
18 |       // Gradient colors
19 |       neon: {
20 |         blue: colors.blue[500],
21 |         pink: colors.pink[500],
22 |         purple: colors.purple[500],
23 |         teal: colors.teal[400],
24 |         green: colors.green[500],
25 |         sky: colors.sky[500],
26 |         amber: colors.amber[500],
27 |         red: colors.red[500],
28 |       },
29 |     },
30 |     extend: {
31 |       fontFamily: {
32 |         sans: ["Avenir Next", "Helvetica Neue", "sans-serif"],
33 |       },
34 |     },
35 |   },
36 |   plugins: [],
37 | };
38 | 


--------------------------------------------------------------------------------
/website/src/svg/DarkModeIcons.tsx:
--------------------------------------------------------------------------------
 1 | export const Moon = () => (
 2 |   <svg
 3 |     id="theme-toggle-dark-icon"
 4 |     className={`w-5 h-5`}
 5 |     fill="currentColor"
 6 |     viewBox="0 0 20 20"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <title>Moon icon</title>
10 |     <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
11 |   </svg>
12 | );
13 | 
14 | export const Sun = () => (
15 |   <svg
16 |     className={`w-5 h-5`}
17 |     fill="currentColor"
18 |     viewBox="0 0 20 20"
19 |     xmlns="http://www.w3.org/2000/svg"
20 |   >
21 |     <title>Sun icon</title>
22 |     <path
23 |       d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
24 |       fillRule="evenodd"
25 |       clipRule="evenodd"
26 |     />
27 |   </svg>
28 | );
29 | 


--------------------------------------------------------------------------------
/website/src/sections/Newsletter.tsx:
--------------------------------------------------------------------------------
 1 | import { NewsletterSpheres } from "../svg/NewsletterSpheres";
 2 | import { Card } from "../components/Card";
 3 | import { Section } from "../components/Section";
 4 | import { WaitlistForm } from "../components/WaitlistForm";
 5 | 
 6 | // Built with Vivid (https://vivid.lol) ⚡️
 7 | 
 8 | const Background = () => (
 9 |   <div
10 |     className="absolute bottom-0 right-0 hidden pointer-events-none md:block"
11 |     aria-hidden="true"
12 |   >
13 |     <NewsletterSpheres />
14 |   </div>
15 | );
16 | 
17 | export const Newsletter = () => {
18 |   return (
19 |     <Section className="px-4 dark sm:px-12">
20 |       <Card className="w-full px-4 py-16 overflow-hidden sm:px-16">
21 |         <Background />
22 |         <div className="gap-6 text-center md:text-left col md:w-1/2 ">
23 |           <h2 className="text-3xl font-bold text-gray-100">
24 |             Save your spot today
25 |           </h2>
26 |           <p className="text-lg text-light">
27 |             By joining our waitlist, you&apos;ll be the first to see our
28 |             product. We&apos;d love to learn from you along the way!
29 |           </p>
30 |           <WaitlistForm id="newsletter-waitlist" />
31 |         </div>
32 |       </Card>
33 |     </Section>
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/website/src/components/LinkButton.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AnchorHTMLAttributes,
 3 |   ButtonHTMLAttributes,
 4 |   DetailedHTMLProps,
 5 | } from "react";
 6 | import { twMerge } from "tailwind-merge";
 7 | 
 8 | // Built with Vivid (https://vivid.lol) ⚡️
 9 | 
10 | type LinkProps = DetailedHTMLProps<
11 |   AnchorHTMLAttributes<HTMLAnchorElement>,
12 |   HTMLAnchorElement
13 | >;
14 | 
15 | type ButtonProps = DetailedHTMLProps<
16 |   ButtonHTMLAttributes<HTMLButtonElement>,
17 |   HTMLButtonElement
18 | >;
19 | 
20 | /**
21 |  * A link that subtly looks like a button
22 |  * @param props HTML props along with `button` if the tag should be a button instead of anchor tag
23 |  */
24 | export const LinkButton = (
25 |   props: (LinkProps & { button?: undefined }) | (ButtonProps & { button: true })
26 | ) => {
27 |   const { button, className = "", ...htmlProps } = props;
28 | 
29 |   return button ? (
30 |     <button
31 |       type="button"
32 |       {...(htmlProps as ButtonProps)}
33 |       className={twMerge(
34 |         "text-light hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm p-2.5",
35 |         className
36 |       )}
37 |     />
38 |   ) : (
39 |     <a
40 |       {...(htmlProps as LinkProps)}
41 |       className={twMerge(
42 |         "text-light hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg text-sm p-2.5",
43 |         className
44 |       )}
45 |     />
46 |   );
47 | };
48 | 


--------------------------------------------------------------------------------
/website/src/svg/NewsletterSpheres.tsx:
--------------------------------------------------------------------------------
 1 | export const NewsletterSpheres = () => {
 2 |   return (
 3 |     <svg width="428" height="328" xmlns="http://www.w3.org/2000/svg">
 4 |       <defs>
 5 |         <radialGradient
 6 |           cx="35.542%"
 7 |           cy="34.553%"
 8 |           fx="35.542%"
 9 |           fy="34.553%"
10 |           r="96.031%"
11 |           id="ni-a"
12 |         >
13 |           <stop stopColor="#DFDFDF" offset="0%" />
14 |           <stop stopColor="#4C4C4C" offset="44.317%" />
15 |           <stop stopColor="#333" offset="100%" />
16 |         </radialGradient>
17 |       </defs>
18 |       <g fill="none" fillRule="evenodd">
19 |         <g fill="#FFF">
20 |           <ellipse fillOpacity=".04" cx="185" cy="15.576" rx="16" ry="15.576" />
21 |           <ellipse fillOpacity=".24" cx="100" cy="68.402" rx="24" ry="23.364" />
22 |           <ellipse fillOpacity=".12" cx="29" cy="251.231" rx="29" ry="28.231" />
23 |           <ellipse fillOpacity=".64" cx="29" cy="251.231" rx="8" ry="7.788" />
24 |           <ellipse fillOpacity=".12" cx="342" cy="31.303" rx="8" ry="7.788" />
25 |           <ellipse fillOpacity=".48" cx="62" cy="126.811" rx="2" ry="1.947" />
26 |           <ellipse fillOpacity=".12" cx="78" cy="7.072" rx="2" ry="1.947" />
27 |           <ellipse fillOpacity=".64" cx="185" cy="15.576" rx="6" ry="5.841" />
28 |         </g>
29 |         <circle fill="url(#ni-a)" cx="276" cy="237" r="200" />
30 |       </g>
31 |     </svg>
32 |   );
33 | };
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Icarus
 2 | 
 3 | ![render](https://github.com/user-attachments/assets/22b80967-06a8-44ba-bc94-71e3a311b39f)
 4 | 
 5 | A custom meshtastic PCB based on ESP32-S3 N8R8 and LoRa RA-01SH, designed to be fully assembled by JLCPCB.
 6 | 
 7 | # Documentation:
 8 | 
 9 | Checkout the documentation here: https://docs.azlan.works
10 | 
11 | ![image](https://github.com/user-attachments/assets/ab190b74-ce92-4457-b06f-cd63349a635c)
12 | 
13 | 
14 | # OSHWLab:
15 | 
16 | Link: https://oshwlab.com/azlan777/icarus-v1
17 | 
18 | Note: v1 Works however do not place order as significantly improved v2 is on the way!
19 | 
20 | v2 is now available with added LK67 GPS and improved BMS:
21 | 
22 | Link: https://oshwlab.com/azlan777/icarus-v2
23 | 
24 | ![Schematic_Icarus-v2](https://github.com/user-attachments/assets/30aad3a4-ab30-474f-953d-0d5ad56b27d5)
25 | ![topv2](https://github.com/user-attachments/assets/a9bbfc85-0bca-482d-b4f1-695d17bf5748)
26 | ![bottomv2](https://github.com/user-attachments/assets/0175eab9-ba31-42b6-a954-5a3a78578f4a)
27 | 
28 | # Sponsored by OSHWLab Stars
29 | 
30 | ![image](https://github.com/user-attachments/assets/16d1e47d-2fb1-46dd-94f9-946d2b1e0203)
31 | ![image](https://github.com/user-attachments/assets/8ce64a1d-b027-4764-8049-84d04f10fd1b)
32 | 
33 | Thanks so much to Bob from EasyEDA for his help along the way!
34 | 
35 | # Credits
36 | 
37 | Thanks so much to [@NomDeTom](https://github.com/NomDeTom) (as well as all the other great people in the Discord) for the help and feedback!
38 | 


--------------------------------------------------------------------------------
/website/public/images/mac-bar.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 432 25.6" style="enable-background:new 0 0 432 25.6;" xml:space="preserve" preserveAspectRatio="none">
 5 | <style type="text/css">
 6 | 	.st0{fill:#323436;}
 7 | 	.st1{fill:#FF5551;}
 8 | 	.st2{fill:#FFB33B;}
 9 | 	.st3{fill:#00C142;}
10 | 	.st4{fill:#191B1E;stroke:#4B4E4F;stroke-width:0.5;stroke-miterlimit:10;}
11 | 	.st5{fill:#CDCDCD;}
12 | 	.st6{font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
13 | 	.st7{font-size:12px;}
14 | 	.st8{fill:#858687;}
15 | </style>
16 | <g>
17 | 	<rect class="st0" width="432" height="25.6"/>
18 | </g>
19 | <circle class="st1" cx="14.5" cy="12.8" r="4.8"/>
20 | <circle class="st2" cx="33.6" cy="12.8" r="4.8"/>
21 | <circle class="st3" cx="52.6" cy="12.8" r="4.8"/>
22 | <g>
23 | 	<path class="st4" d="M316.2,11.5c0-4.2-4-7.7-9-7.7H124.8c-4.9,0-9,3.4-9,7.7v2.6c0,4.2,4.1,7.7,9,7.7h182.5c5,0,9-3.4,9-7.7
24 | 		L316.2,11.5L316.2,11.5z"/>
25 | </g>
26 | <text transform="matrix(1 0 0 1 179.6969 17.6645)" class="st5 st6 st7">localhost</text>
27 | <text transform="matrix(1 0 0 1 228.1969 17.6645)" class="st8 st6 st7">:3000</text>
28 | </svg>
29 | 


--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
 1 | # Vivid Landing Page Template
 2 | 
 3 | This is a ready to use template for any landing page you need, built with React, NextJS, and Tailwind CSS. 
 4 | 
 5 | Modelled after the [Vivid landing page](https://vivid.lol).
 6 | 
 7 | > NOTE: If you are looking for a simpler alternative that is flatter and uses JS instead of TS, check out our [simple template](https://github.com/vivid-labs/vivid-landing-template-simple)!
 8 | 
 9 | ## Preview
10 | 
11 | ![vivid-template-pic](https://user-images.githubusercontent.com/62365335/202585708-82c27ea9-85fc-491f-b991-d4005651b0c2.png)
12 | 
13 | 
14 | ## Features
15 | 
16 | - Fully modular and easy to extend
17 | 
18 | - Perfect lighthouse scores for great SEO
19 | 
20 | - Very accessible, passing checks for screen-readers and other browsing aids
21 | 
22 | - Easily customizable via Vivid, Tailwind configuration, global style presets, and component props
23 | 
24 | - Built-in light and dark modes
25 | 
26 | ## Getting Started
27 | 
28 | 1. Install dependencies with `yarn install` (or the equivalent for other package managers)
29 | 
30 | 2. Run the test app with `yarn dev`
31 | 
32 | ## Customizing
33 | 
34 | This template is made to be easily customizable! Using Vivid, you can command-click on any part of the page and immediately edit its code. Check out the [Vivid docs](https://docs.vivid.lol) for more information on how to style in-browser!
35 | 
36 | The components in the `src/components` directory provide an easy way to extend the page.
37 | 
38 | If you want to edit colors or fonts, simply edit `styles/globals.css` or `tailwind.config.js`.
39 | 


--------------------------------------------------------------------------------
/website/src/components/Section.tsx:
--------------------------------------------------------------------------------
 1 | import { DetailedHTMLProps, HTMLAttributes } from "react";
 2 | import { twMerge } from "tailwind-merge";
 3 | 
 4 | // Built with Vivid (https://vivid.lol) ⚡️
 5 | 
 6 | export const Section = (
 7 |   props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
 8 |     grayer?: boolean;
 9 |     fullWidth?: boolean;
10 |     gradients?: boolean;
11 |   }
12 | ) => {
13 |   const { grayer, fullWidth, gradients, ...divProps } = props;
14 | 
15 |   const NeonCircle = ({ className }: { className: string }) => (
16 |     <div
17 |       className={twMerge(
18 |         "absolute opacity-60 dark:opacity-30 rounded-full w-96 h-96 md:w-[48rem] md:h-[48rem]",
19 |         className
20 |       )}
21 |     />
22 |   );
23 | 
24 |   const Gradients = () => (
25 |     <>
26 |       <div className="absolute inset-0 z-10 backdrop-blur-[200px]" />
27 |       <NeonCircle className="md:-left-[28rem] -left-40 -top-40 md:-top-[28rem] bg-neon-pink" />
28 |       <NeonCircle className="md:-right-[28rem] -right-40 -bottom-40 md:-bottom-[28rem] bg-neon-blue" />
29 |     </>
30 |   );
31 | 
32 |   return (
33 |     <section
34 |       className={`relative overflow-hidden ${
35 |         grayer ? "bg-strong" : "bg-extra-strong"
36 |       }`}
37 |     >
38 |       <div
39 |         {...divProps}
40 |         className={twMerge(
41 |           `relative z-20 py-24 mx-auto col max-w-7xl ${
42 |             fullWidth ? "px-0" : "px-12"
43 |           }`,
44 |           props.className
45 |         )}
46 |       />
47 |       {gradients ? <Gradients /> : null}
48 |     </section>
49 |   );
50 | };
51 | 


--------------------------------------------------------------------------------
/website/src/sections/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import { ScatteredSpheres } from "../svg/ScatteredSpheres";
 2 | import { Title } from "../components/Title";
 3 | import { Details } from "../components/Details";
 4 | import { Demo } from "../components/Demo";
 5 | import { Section } from "../components/Section";
 6 | import { GradientText } from "../components/GradientText";
 7 | import Image from 'next/image'
 8 | import profilePic from '../images/render-solo.png'
 9 | // Built with Vivid (https://vivid.lol) ⚡️
10 | 
11 | const Background = () => (
12 |   <div
13 |     className="absolute inset-0 translate-y-32 pointer-events-none dark:invert dark:brightness-90"
14 |     aria-hidden="true"
15 |   >
16 |   </div>
17 | );
18 | 
19 | export const Hero = () => {
20 |   return (
21 |     <Section
22 |       gradients
23 |       className="items-center justify-center min-h-screen 2xl:min-h-[1000px] h-fit gap-16 col md:flex-row"
24 |     >
25 |       <Background />
26 |       {/* Text */}
27 |       <div className="z-10 gap-4 text-center col md:text-left">
28 |         <Title size="lg">
29 |           <GradientText className="pink-blue">Introducing</GradientText>
30 |           <br />
31 |           Icarus
32 |         </Title>
33 |         <Details>
34 |           A custom Meshtastic supported PCB based on the ESP32-S3.
35 |         </Details>
36 |       </div>
37 |       <Image
38 |       src={profilePic}
39 |       alt="Picture of the author"
40 |       // width={500} automatically provided
41 |       // height={500} automatically provided
42 |       // blurDataURL="data:..." automatically provided
43 |       // placeholder="blur" // Optional blur-up while loading
44 |     />
45 |     </Section>
46 |   );
47 | };
48 | 


--------------------------------------------------------------------------------
/website/public/scripts/darkModeScript.js:
--------------------------------------------------------------------------------
 1 | // Insert this script in your index.html right after the <body> tag.
 2 | // This will help to prevent a flash if dark mode is the default.
 3 | 
 4 | (function () {
 5 |   // Change these if you use something different in your hook.
 6 |   let storageKey = "usehooks-ts-dark-mode";
 7 |   let classNameDark = "dark";
 8 | 
 9 |   const setClassOnDocumentBody = (darkMode) => {
10 |     if (darkMode) {
11 |       document.documentElement.classList.add(classNameDark);
12 |       document.documentElement.style.setProperty("color-scheme", "dark");
13 |     } else {
14 |       document.documentElement.style.setProperty("color-scheme", "light");
15 |     }
16 |   };
17 | 
18 |   let preferDarkQuery = "(prefers-color-scheme: dark)";
19 |   let mql = window.matchMedia(preferDarkQuery);
20 |   let supportsColorSchemeQuery = mql.media === preferDarkQuery;
21 |   let localStorageTheme = null;
22 |   try {
23 |     localStorageTheme = localStorage.getItem(storageKey);
24 |   } catch (err) {}
25 |   let localStorageExists = localStorageTheme !== null;
26 |   if (localStorageExists) {
27 |     localStorageTheme = JSON.parse(localStorageTheme);
28 |   }
29 | 
30 |   // Determine the source of truth
31 |   if (localStorageExists) {
32 |     // source of truth from localStorage
33 |     setClassOnDocumentBody(localStorageTheme);
34 |   } else if (supportsColorSchemeQuery) {
35 |     // source of truth from system
36 |     setClassOnDocumentBody(mql.matches);
37 |     localStorage.setItem(storageKey, mql.matches);
38 |   } else {
39 |     // source of truth from document.body
40 |     let isDarkMode = document.documentElement.classList.contains(classNameDark);
41 |     localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
42 |   }
43 | })();
44 | 


--------------------------------------------------------------------------------
/website/src/components/WaitlistForm.tsx:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | import { DetailedHTMLProps, FormEvent, HTMLAttributes, useState } from "react";
 3 | import { twMerge } from "tailwind-merge";
 4 | 
 5 | import { Button } from "./Button";
 6 | import { Input } from "./Input";
 7 | 
 8 | // Built with Vivid (https://vivid.lol) ⚡️
 9 | 
10 | export const WaitlistForm = (
11 |   props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
12 |     id: string;
13 |   }
14 | ) => {
15 |   const { id, ...divProps } = props;
16 | 
17 |   const [email, setEmail] = useState("");
18 |   const [emailSubmitted, setEmailSubmitted] = useState(false);
19 | 
20 |   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
21 |     e.preventDefault();
22 |     setEmailSubmitted(true);
23 |     const res = await axios.post("/api/waitlist", { email });
24 |     setEmail("");
25 |     window.alert(`Email "${res.data.email}" submitted!`);
26 |   };
27 | 
28 |   const EmailMessage = () => (
29 |     <p className="mt-3 text-sm text-light">
30 |       {emailSubmitted
31 |         ? "We'll keep you posted!"
32 |         : "Be the first to experience Vivid."}
33 |     </p>
34 |   );
35 | 
36 |   return (
37 |     <div {...divProps} className={twMerge("col", divProps.className)}>
38 |       <form className="relative gap-2 md:gap-4 row" onSubmit={handleSubmit}>
39 |         <Input
40 |           type="email"
41 |           className="w-full"
42 |           placeholder="richard.hendricks@piedpiper.com"
43 |           aria-label="Your email"
44 |           name="email"
45 |           id={id}
46 |           onChange={(event) => setEmail(event.target.value)}
47 |           value={email}
48 |           required
49 |         />
50 |         <label
51 |           htmlFor={id}
52 |           className="absolute z-10 text-xs -top-2 left-4 text-light"
53 |         >
54 |           Your Email
55 |         </label>
56 |         {/* Line beneath label to hide outline */}
57 |         <div className="absolute top-0 w-[4.3rem] h-[2px] bg-strong left-3" />
58 |         <Button type="submit">Waitlist</Button>
59 |       </form>
60 |       <EmailMessage />
61 |     </div>
62 |   );
63 | };
64 | 


--------------------------------------------------------------------------------
/website/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import "aos/dist/aos.css";
 2 | import "../styles/globals.css";
 3 | 
 4 | import AOS from "aos";
 5 | import type { AppProps } from "next/app";
 6 | import Head from "next/head";
 7 | import { NextSeo } from "next-seo";
 8 | import { useEffect } from "react";
 9 | import { useDarkMode, useEffectOnce } from "usehooks-ts";
10 | 
11 | // Initialize Vivid (https://vivid.lol)
12 | if (typeof window !== "undefined" && process.env.NODE_ENV === "development") {
13 |   import("vivid-studio").then((v) => v.run());
14 |   import("vivid-studio/style.css");
15 | }
16 | 
17 | const siteTitle = "Icarus";
18 | const siteDescription =
19 |   "Custom Meshtastic PCB based on the ESP32-S3.";
20 | 
21 | const App = ({ Component, pageProps }: AppProps) => {
22 |   const { isDarkMode, toggle: toggleDarkMode } = useDarkMode();
23 | 
24 |   useEffect(() => {
25 |     if (isDarkMode) {
26 |       document.documentElement.classList.add("dark");
27 |       document.documentElement.style.setProperty("color-scheme", "dark");
28 |     } else {
29 |       document.documentElement.classList.add("dark");
30 |       document.documentElement.style.setProperty("color-scheme", "dark");
31 |     }
32 |   }, [isDarkMode]);
33 | 
34 |   // Initialize animations
35 |   useEffectOnce(() => {
36 |     AOS.init({
37 |       once: true,
38 |       // Animations always disabled in dev mode; disabled on phones in prod
39 |       disable: process.env.NODE_ENV === "development" ? true : "phone",
40 |       duration: 700,
41 |       easing: "ease-out-cubic",
42 |     });
43 |   });
44 | 
45 |   return (
46 |     <>
47 |       <Head>
48 |         <link
49 |           rel="apple-touch-icon"
50 |           sizes="180x180"
51 |           href="/apple-touch-icon.png"
52 |         />
53 |         <link rel="icon" href="/icons/favicon.ico" />
54 |         <meta
55 |           property="og:image"
56 |           content="https://vivid.lol/images/landing-page.png"
57 |         />
58 |       </Head>
59 |       <NextSeo
60 |         title={siteTitle}
61 |         description={siteDescription}
62 |         themeColor={isDarkMode ? "#18181b" : "#fafafa"}
63 |         openGraph={{
64 |           title: siteTitle,
65 |           description: siteDescription,
66 |         }}
67 |       />
68 |       <Component
69 |         {...pageProps}
70 |         isDarkMode={isDarkMode}
71 |         toggleDarkMode={toggleDarkMode}
72 |       />
73 |     </>
74 |   );
75 | };
76 | 
77 | export default App;
78 | 


--------------------------------------------------------------------------------
/website/styles/globals.css:
--------------------------------------------------------------------------------
  1 | /* Download Avenir */
  2 | @import url('http://fonts.cdnfonts.com/css/avenir-next-cyr');
  3 | 
  4 | /* Import Tailwind classes */
  5 | @tailwind base;
  6 | @tailwind components;
  7 | @tailwind utilities;  
  8 | 
  9 | /* Make focus ring prettier */
 10 | *:focus {
 11 |   outline: auto;
 12 | }
 13 | 
 14 | /* Custom utility classes */
 15 | @layer utilities {
 16 |   /* Use the background as the text fill */
 17 |   .bg-text {
 18 |     @apply text-transparent;
 19 |     @apply bg-clip-text;
 20 |   }
 21 | 
 22 |   /* Gradients */
 23 |   .pink-blue {
 24 |     @apply from-neon-pink;
 25 |     @apply to-neon-blue;
 26 |   }
 27 |   .amber-red {
 28 |     @apply from-neon-amber;
 29 |     @apply to-neon-red;
 30 |   }
 31 |   .green-sky {
 32 |     @apply from-neon-green;
 33 |     @apply to-neon-sky;
 34 |   }
 35 |   .purple-teal {
 36 |     @apply from-neon-purple;
 37 |     @apply to-neon-teal;
 38 |   }
 39 | 
 40 |   /* Responsive colors */
 41 |   .bg-extra-strong {
 42 |     @apply bg-gray-50;
 43 |     @apply dark:bg-gray-900;
 44 |   }
 45 |   .bg-strong {
 46 |     @apply bg-gray-100;
 47 |     @apply dark:bg-gray-800;
 48 |   }
 49 |   .bg-medium {
 50 |     @apply bg-gray-300;
 51 |     @apply dark:bg-gray-600;
 52 |   }
 53 |   .bg-light {
 54 |     @apply bg-gray-400;
 55 |     @apply dark:bg-gray-500;
 56 |   }
 57 |   .bg-extra-light {
 58 |     @apply bg-gray-500;
 59 |     @apply dark:bg-gray-400;
 60 |   }
 61 |   .text-extra-strong {
 62 |     @apply text-gray-900;
 63 |     @apply dark:text-gray-50;
 64 |   }
 65 |   .text-strong {
 66 |     @apply text-gray-800;
 67 |     @apply dark:text-gray-100;
 68 |   }
 69 |   .text-medium {
 70 |     @apply text-gray-700;
 71 |     @apply dark:text-gray-300;
 72 |   }
 73 |   .text-light {
 74 |     @apply text-gray-600;
 75 |     @apply dark:text-gray-400;
 76 |   }
 77 |   .text-extra-light {
 78 |     @apply text-gray-500;
 79 |     @apply dark:text-gray-500;
 80 |   }
 81 | 
 82 |   /* Text sizing */
 83 |   .title-lg {
 84 |     @apply text-5xl;
 85 |     @apply md:text-7xl;
 86 |     @apply text-strong;
 87 |   }
 88 |   .title-md {
 89 |     @apply text-4xl;
 90 |     @apply md:text-6xl;
 91 |     @apply text-strong;
 92 |   }
 93 |   .body-lg {
 94 |     @apply text-lg;
 95 |     @apply md:text-xl;
 96 |   }
 97 | 
 98 |   /* Rounding */
 99 |   .round-rect {
100 |     @apply rounded-lg;
101 |     @apply md:rounded-xl;
102 |   }
103 |   .round-rect-top {
104 |     @apply rounded-t-lg;
105 |     @apply md:rounded-t-xl;
106 |   }
107 | 
108 |   /* Flex */
109 |   .row {
110 |     @apply flex;
111 |     @apply flex-row;
112 |   }
113 |   .col {
114 |     @apply flex;
115 |     @apply flex-col;
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/website/src/sections/Header.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | import { useState } from "react";
 4 | import { useEffectOnce, useEventListener } from "usehooks-ts";
 5 | 
 6 | import { Button } from "../components/Button";
 7 | import { GradientText } from "../components/GradientText";
 8 | import { LinkButton } from "../components/LinkButton";
 9 | import { Moon, Sun } from "../svg/DarkModeIcons";
10 | 
11 | // Built with Vivid (https://vivid.lol) ⚡️
12 | 
13 | export const Header = ({
14 |   isDarkMode,
15 |   toggleDarkMode,
16 | }: {
17 |   isDarkMode: boolean;
18 |   toggleDarkMode: () => void;
19 | }) => {
20 |   const [top, setTop] = useState(true);
21 |   const [nextSection, setNextSection] = useState(false);
22 |   const [reloaded, setReloaded] = useState(false);
23 | 
24 |   // Handle scrolling logic
25 |   const handleScroll = () => {
26 |     setTop(window.pageYOffset <= 10);
27 |     setNextSection(window.pageYOffset > window.innerHeight);
28 |   };
29 |   useEventListener("scroll", handleScroll);
30 | 
31 |   // Clean up stale dark mode
32 |   useEffectOnce(() => setReloaded(true));
33 | 
34 |   const goToEmail = () => {
35 |     window.scrollTo({
36 |       top: 0,
37 |       behavior: "smooth",
38 |     });
39 |   };
40 | 
41 |   const Logo = () => (
42 |     <Link href="/">
43 |       <div className="items-center block gap-1 row">
44 |         <div className="text-3xl font-bold">
45 |           <GradientText className="">Icarus</GradientText>
46 |         </div>
47 |       </div>
48 |     </Link>
49 |   );
50 | 
51 |   const Navigation = () => (
52 |     <nav>
53 |       <ul className="items-center gap-2 row">
54 |         {reloaded ? ( // Only show after first reload
55 |           <li>
56 |             <LinkButton
57 |               button
58 |               onClick={toggleDarkMode}
59 |               title="Toggle dark mode"
60 |               aria-label="Toggle dark mode"
61 |             >
62 |               {isDarkMode ? <Moon /> : <Sun />}
63 |             </LinkButton>
64 |           </li>
65 |         ) : null}
66 |         <li>
67 |           <LinkButton href="https://docs.azlan.works">Docs</LinkButton>
68 |         </li>
69 |       </ul>
70 |     </nav>
71 |   );
72 | 
73 |   return (
74 |     // Colors must be set explicitly since opacity and blur don't work together
75 |     <header
76 |       className={`fixed w-full z-30 transition duration-300 ${
77 |         !top && "bg-gray-50/90 dark:bg-gray-900/90 backdrop-blur-sm shadow-lg"
78 |       }`}
79 |     >
80 |       {/* Header Content */}
81 |       <div className="items-center justify-between h-16 px-5 mx-auto row md:h-20 max-w-7xl sm:px-6">
82 |         <Logo />
83 |         <Navigation />
84 |       </div>
85 |     </header>
86 |   );
87 | };
88 | 


--------------------------------------------------------------------------------
/website/src/sections/FeatureBlocks.tsx:
--------------------------------------------------------------------------------
  1 | import { ReactNode } from "react";
  2 | 
  3 | import {
  4 |   CardsIcon,
  5 |   MagicIcon,
  6 |   DoorIcon,
  7 |   ShuffleIcon,
  8 |   SignalIcon,
  9 |   TalkingIcon,
 10 | } from "../svg/FeatureIcons";
 11 | import { Card } from "../components/Card";
 12 | import { Details } from "../components/Details";
 13 | import { GradientText } from "../components/GradientText";
 14 | import { Section } from "../components/Section";
 15 | import { Title } from "../components/Title";
 16 | 
 17 | // Built with Vivid (https://vivid.lol) ⚡️
 18 | 
 19 | const BlockTitle = ({ children }: { children: ReactNode }) => {
 20 |   return <h3 className="text-xl font-bold text-strong">{children}</h3>;
 21 | };
 22 | 
 23 | const BlockText = ({ children }: { children: ReactNode }) => {
 24 |   return <p className="text-light">{children}</p>;
 25 | };
 26 | 
 27 | const Block = ({ children }: { children: ReactNode }) => {
 28 |   return (
 29 |     <Card grayer className="items-center gap-1 p-6 col">
 30 |       {children}
 31 |     </Card>
 32 |   );
 33 | };
 34 | 
 35 | export const FeatureBlocks = () => {
 36 |   return (
 37 |     <Section className="gap-16 text-center">
 38 |       {/* Header */}
 39 |       <div className="gap-4 col">
 40 |         <Title size="md">
 41 |           Make styling a{" "}
 42 |           <GradientText className="purple-teal">breeze</GradientText>
 43 |         </Title>
 44 |         <Details>
 45 |           Stop wasting your time. Vivid makes CSS easier than recursive
 46 |           depth-first search.
 47 |         </Details>
 48 |       </div>
 49 |       {/* Blocks */}
 50 |       <div className="grid items-start gap-6 lg:grid-cols-3">
 51 |         {/* Block 1 */}
 52 |         <Block>
 53 |           <ShuffleIcon />
 54 |           <BlockTitle>In-browser</BlockTitle>
 55 |           <BlockText>
 56 |             Edit your styling from the most natural place — where it renders
 57 |           </BlockText>
 58 |         </Block>
 59 |         {/* Block 2 */}
 60 |         <Block>
 61 |           <SignalIcon />
 62 |           <BlockTitle>Code first</BlockTitle>
 63 |           <BlockText>
 64 |             Use Vivid&apos;s command palette and code pane to edit styling using
 65 |             code
 66 |           </BlockText>
 67 |         </Block>
 68 |         {/* Block 3 */}
 69 |         <Block>
 70 |           <TalkingIcon />
 71 |           <BlockTitle>Modern frameworks</BlockTitle>
 72 |           <BlockText>
 73 |             Build components using Vivid in React styled with Tailwind CSS
 74 |           </BlockText>
 75 |         </Block>
 76 |         {/* Block 4 */}
 77 |         <Block>
 78 |           <DoorIcon />
 79 |           <BlockTitle>Production-ready code</BlockTitle>
 80 |           <BlockText>
 81 |             Modify your styling in-browser and update your IDE with code that
 82 |             looks like your own
 83 |           </BlockText>
 84 |         </Block>
 85 |         {/* Block 5 */}
 86 |         <Block>
 87 |           <CardsIcon />
 88 |           <BlockTitle>Your workflow</BlockTitle>
 89 |           <BlockText>
 90 |             Keep using your browser and IDE without needing an extra window
 91 |           </BlockText>
 92 |         </Block>
 93 |         {/* Block 6 */}
 94 |         <Block>
 95 |           <MagicIcon />
 96 |           <BlockTitle>Smarter inspect element</BlockTitle>
 97 |           <BlockText>
 98 |             Understand and modify the components making up your design with just
 99 |             one click
100 |           </BlockText>
101 |         </Block>
102 |       </div>
103 |     </Section>
104 |   );
105 | };
106 | 


--------------------------------------------------------------------------------
/website/src/sections/Testimonials.tsx:
--------------------------------------------------------------------------------
  1 | import Image from "next/image";
  2 | import { ReactNode } from "react";
  3 | 
  4 | import { Quote } from "../svg/Quote";
  5 | import { Card } from "../components/Card";
  6 | import { Details } from "../components/Details";
  7 | import { GradientText } from "../components/GradientText";
  8 | import { Section } from "../components/Section";
  9 | import { Title } from "../components/Title";
 10 | 
 11 | // Built with Vivid (https://vivid.lol) ⚡️
 12 | 
 13 | const TestimonialImage = ({ src, alt }: { src: string; alt: string }) => {
 14 |   return (
 15 |     <div className="absolute mx-auto -top-10">
 16 |       <Quote />
 17 |       <Image
 18 |         className="rounded-full"
 19 |         src={src}
 20 |         width="96"
 21 |         height="96"
 22 |         alt={alt}
 23 |       />
 24 |     </div>
 25 |   );
 26 | };
 27 | 
 28 | const TestimonialText = ({
 29 |   quote,
 30 |   name,
 31 |   title,
 32 |   handle,
 33 |   link,
 34 | }: {
 35 |   quote: string;
 36 |   name: string;
 37 |   title: string;
 38 |   handle: string;
 39 |   link: string;
 40 | }) => {
 41 |   return (
 42 |     <>
 43 |       <blockquote className="font-medium">&quot;{quote}&quot;</blockquote>
 44 |       <div className="">
 45 |         <cite className="not-italic font-bold">— {name}</cite>
 46 |         <div className="text-base text-light">
 47 |           <span>{title}</span>{" "}
 48 |           <a
 49 |             className="text-primary-600 dark:text-primary-400 hover:underline"
 50 |             href={link}
 51 |           >
 52 |             @{handle}
 53 |           </a>
 54 |         </div>
 55 |       </div>
 56 |     </>
 57 |   );
 58 | };
 59 | 
 60 | const Testimonial = ({ children }: { children: ReactNode }) => {
 61 |   return (
 62 |     <Card className="items-center gap-6 p-12 pt-20 body-lg col text-medium">
 63 |       {children}
 64 |     </Card>
 65 |   );
 66 | };
 67 | 
 68 | export const Testimonials = () => {
 69 |   return (
 70 |     <Section grayer className="gap-24 text-center">
 71 |       {/* Header */}
 72 |       <div className="gap-4 col">
 73 |         <Title size="md">
 74 |           <GradientText className="amber-red">Loved</GradientText> by developers
 75 |         </Title>
 76 |         <Details>Styling your web app has never been easier.</Details>
 77 |       </div>
 78 |       {/* Testimonials */}
 79 |       <div className="gap-20 md:gap-6 col md:row">
 80 |         {/* Testimonial 1 */}
 81 |         <Testimonial>
 82 |           <TestimonialImage src="/images/will.jpg" alt="Will Gao" />
 83 |           <TestimonialText
 84 |             quote="When I first clicked on a component and its code popped up — magical"
 85 |             name="Will Gao"
 86 |             title="Technical PM"
 87 |             handle="Meta"
 88 |             link="https://www.linkedin.com/in/willgao99/"
 89 |           />
 90 |         </Testimonial>
 91 |         {/* Testimonial 2 */}
 92 |         <Testimonial>
 93 |           <TestimonialImage src="/images/veljko.jpg" alt="Veljko Muratovic" />
 94 |           <TestimonialText
 95 |             quote="I'm going to have to make the switch to Chrome. Just to keep using Vivid."
 96 |             name="Veljko Muratovic"
 97 |             title="Front End Dev"
 98 |             handle="Freelance"
 99 |             link="https://www.linkedin.com/in/veljko-muratovic/"
100 |           />
101 |         </Testimonial>
102 |         {/* Testimonial 3 */}
103 |         <Testimonial>
104 |           <TestimonialImage src="/images/tejal.png" alt="Tejal Patwardhan" />
105 |           <TestimonialText
106 |             quote="Vivid has changed the game! It's already saved me hours of development time"
107 |             name="Tejal Patwardhan"
108 |             title="Founder"
109 |             handle="Martingale"
110 |             link="https://martingalelabs.com/"
111 |           />
112 |         </Testimonial>
113 |       </div>
114 |     </Section>
115 |   );
116 | };
117 | 


--------------------------------------------------------------------------------
/website/src/sections/Features.tsx:
--------------------------------------------------------------------------------
  1 | import { DetailedHTMLProps, HTMLAttributes, ReactNode } from "react";
  2 | import { twMerge } from "tailwind-merge";
  3 | 
  4 | import { Demo } from "../components/Demo";
  5 | import { Details } from "../components/Details";
  6 | import { GradientText } from "../components/GradientText";
  7 | import { Section } from "../components/Section";
  8 | import { Title } from "../components/Title";
  9 | 
 10 | // Built with Vivid (https://vivid.lol) ⚡️
 11 | 
 12 | const FeatureSection = ({
 13 |   children,
 14 |   grayer,
 15 |   right,
 16 |   center,
 17 | }: {
 18 |   children: ReactNode;
 19 |   grayer?: boolean;
 20 |   right?: boolean;
 21 |   center?: boolean;
 22 | }) => (
 23 |   <Section
 24 |     grayer={grayer}
 25 |     fullWidth
 26 |     className={`col items-center ${
 27 |       center ? "" : right ? "md:flex-row-reverse" : "md:flex-row"
 28 |     }`}
 29 |   >
 30 |     {children}
 31 |   </Section>
 32 | );
 33 | 
 34 | const FeatureDemo = (
 35 |   props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
 36 |     webmSrc: string;
 37 |     mp4Src: string;
 38 |     bumpLeft?: boolean;
 39 |     center?: boolean;
 40 |     className: string;
 41 |     alt: string;
 42 |   }
 43 | ) => {
 44 |   const { webmSrc, mp4Src, bumpLeft, center, alt, className, ...divProps } =
 45 |     props;
 46 |   return (
 47 |     <div
 48 |       {...divProps}
 49 |       className={twMerge(
 50 |         `w-5/6 md:w-1/2 p-4 md:p-12 bg-gradient-to-br rounded-xl ${
 51 |           center ? "" : bumpLeft ? "md:-translate-x-14" : "md:translate-x-14"
 52 |         }`,
 53 |         className
 54 |       )}
 55 |     >
 56 |       <Demo
 57 |         data-aos={`${
 58 |           center ? "zoom-y-out" : bumpLeft ? "fade-right" : "fade-left"
 59 |         }`}
 60 |         data-aos-delay="300"
 61 |         webmSrc={webmSrc}
 62 |         mp4Src={mp4Src}
 63 |         alt={alt}
 64 |       />
 65 |     </div>
 66 |   );
 67 | };
 68 | 
 69 | const Text = ({
 70 |   children,
 71 |   center,
 72 | }: {
 73 |   children: ReactNode;
 74 |   center?: boolean;
 75 | }) => (
 76 |   <div
 77 |     className={`w-5/6 col gap-4 text-center mb-8 mx-auto ${
 78 |       center ? "md:w-2/3" : "md:w-2/5 md:text-left md:my-auto"
 79 |     }`}
 80 |   >
 81 |     {children}
 82 |   </div>
 83 | );
 84 | 
 85 | export const Features = () => {
 86 |   return (
 87 |     <>
 88 |       {/* Feature 1 */}
 89 |       <FeatureSection grayer center>
 90 |         <Text center>
 91 |           <Title size="md">
 92 |             1.3&quot;&nbsp;
 93 |             <GradientText className="amber-red">
 94 |                OLED
 95 |             </GradientText>{" "}
 96 |             display
 97 |           </Title>
 98 |           <Details>Information and messaging at a glance.</Details>
 99 |         </Text>
100 |         <FeatureDemo
101 |           webmSrc="/videos/palette.webm"
102 |           mp4Src="/videos/palette.mp4"
103 |           center
104 |           className="amber-red"
105 |           alt="A video showing Vivid's command palette functionality. The user iterates through previewed styles and applies one."
106 |         />
107 |       </FeatureSection>
108 |       {/* Feature 2 */}
109 |       <FeatureSection right>
110 |         <Text>
111 |           <Title size="md">
112 |             <GradientText className="amber-red">Solar</GradientText>
113 |             <br /> made easy.
114 |           </Title>
115 |           <Details>Just attach solar panels to exposed input.</Details>
116 |         </Text>
117 |         <FeatureDemo
118 |           webmSrc="/videos/resize.webm"
119 |           mp4Src="/videos/resize.mp4"
120 |           bumpLeft
121 |           className="pink-blue"
122 |           alt="A video showing Vivid's mouse resizing functionality. By dragging with a mouse, the user resizes a component."
123 |         />
124 |       </FeatureSection>
125 |       {/* Feature 3 */}
126 |       <FeatureSection grayer>
127 |         <Text>
128 |           <Title size="md">
129 |             <GradientText className="green-sky">868 - 915 MHz</GradientText>
130 |             <br /> support.
131 |           </Title>
132 |           <Details>
133 |             For worldwide communication, no matter where you are.
134 |           </Details>
135 |         </Text>
136 |         <FeatureDemo
137 |           webmSrc="/videos/center.webm"
138 |           mp4Src="/videos/center.mp4"
139 |           className="green-sky"
140 |           alt="A video showing Vivid's smart command functionality. By typing smart-center, the user centers all content on screen."
141 |         />
142 |       </FeatureSection>
143 |     </>
144 |   );
145 | };
146 | 


--------------------------------------------------------------------------------
/website/src/svg/FeatureIcons.tsx:
--------------------------------------------------------------------------------
  1 | export const CardsIcon = () => {
  2 |   return (
  3 |     <svg
  4 |       className="w-16 h-16 p-1 mb-2 -mt-1"
  5 |       viewBox="0 0 64 64"
  6 |       xmlns="http://www.w3.org/2000/svg"
  7 |     >
  8 |       <title>Cards Icon</title>
  9 |       <g fill="none" fillRule="evenodd">
 10 |         <rect
 11 |           className="fill-current text-primary-600"
 12 |           width="64"
 13 |           height="64"
 14 |           rx="32"
 15 |         />
 16 |         <g strokeLinecap="square" strokeWidth="2">
 17 |           <path
 18 |             className="stroke-current text-gray-50"
 19 |             d="M20.571 20.571h13.714v17.143H20.571z"
 20 |           />
 21 |           <path
 22 |             className="stroke-current text-primary-300"
 23 |             d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
 24 |           />
 25 |         </g>
 26 |       </g>
 27 |     </svg>
 28 |   );
 29 | };
 30 | 
 31 | export const DoorIcon = () => {
 32 |   return (
 33 |     <svg
 34 |       className="w-16 h-16 p-1 mb-2 -mt-1"
 35 |       viewBox="0 0 64 64"
 36 |       xmlns="http://www.w3.org/2000/svg"
 37 |     >
 38 |       <title>Door Icon</title>
 39 |       <g fill="none" fillRule="evenodd">
 40 |         <rect
 41 |           className="fill-current text-primary-600"
 42 |           width="64"
 43 |           height="64"
 44 |           rx="32"
 45 |         />
 46 |         <g transform="translate(22.857 19.429)" strokeWidth="2">
 47 |           <path
 48 |             className="stroke-current text-gray-50"
 49 |             strokeLinecap="square"
 50 |             d="M12.571 4.571V0H0v25.143h12.571V20.57"
 51 |           />
 52 |           <path className="stroke-current text-gray-50" d="M16 12.571h8" />
 53 |           <path
 54 |             className="stroke-current text-gray-50"
 55 |             strokeLinecap="square"
 56 |             d="M19.429 8L24 12.571l-4.571 4.572"
 57 |           />
 58 |           <circle
 59 |             className="stroke-current text-primary-300"
 60 |             strokeLinecap="square"
 61 |             cx="12.571"
 62 |             cy="12.571"
 63 |             r="3.429"
 64 |           />
 65 |         </g>
 66 |       </g>
 67 |     </svg>
 68 |   );
 69 | };
 70 | 
 71 | export const MagicIcon = () => {
 72 |   return (
 73 |     <svg
 74 |       className="w-16 h-16 p-1 mb-2 -mt-1"
 75 |       viewBox="0 0 64 64"
 76 |       xmlns="http://www.w3.org/2000/svg"
 77 |     >
 78 |       <title>Magic Icon</title>
 79 |       <g fill="none" fillRule="evenodd">
 80 |         <rect
 81 |           className="fill-current text-primary-600"
 82 |           width="64"
 83 |           height="64"
 84 |           rx="32"
 85 |         />
 86 |         <g strokeWidth="2">
 87 |           <path
 88 |             className="stroke-current text-gray-50"
 89 |             d="M32 37.714A5.714 5.714 0 0037.714 32a5.714 5.714 0 005.715 5.714"
 90 |           />
 91 |           <path
 92 |             className="stroke-current text-gray-50"
 93 |             d="M32 37.714a5.714 5.714 0 015.714 5.715 5.714 5.714 0 015.715-5.715M20.571 26.286a5.714 5.714 0 005.715-5.715A5.714 5.714 0 0032 26.286"
 94 |           />
 95 |           <path
 96 |             className="stroke-current text-gray-50"
 97 |             d="M20.571 26.286A5.714 5.714 0 0126.286 32 5.714 5.714 0 0132 26.286"
 98 |           />
 99 |           <path
100 |             className="stroke-current text-primary-300"
101 |             d="M21.714 40h4.572M24 37.714v4.572M37.714 24h4.572M40 21.714v4.572"
102 |             strokeLinecap="square"
103 |           />
104 |         </g>
105 |       </g>
106 |     </svg>
107 |   );
108 | };
109 | 
110 | export const ShuffleIcon = () => {
111 |   return (
112 |     <svg
113 |       className="w-16 h-16 p-1 mb-2 -mt-1"
114 |       viewBox="0 0 64 64"
115 |       xmlns="http://www.w3.org/2000/svg"
116 |     >
117 |       <title>Shuffle Icon</title>
118 |       <g fill="none" fillRule="evenodd">
119 |         <rect
120 |           className="fill-current text-primary-600"
121 |           width="64"
122 |           height="64"
123 |           rx="32"
124 |         />
125 |         <g strokeLinecap="square" strokeWidth="2">
126 |           <path
127 |             className="stroke-current text-gray-50"
128 |             d="M20.571 20.571h13.714v17.143H20.571z"
129 |           />
130 |           <path
131 |             className="stroke-current text-primary-300"
132 |             d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
133 |           />
134 |         </g>
135 |       </g>
136 |     </svg>
137 |   );
138 | };
139 | 
140 | export const SignalIcon = () => {
141 |   return (
142 |     <svg
143 |       className="w-16 h-16 p-1 mb-2 -mt-1"
144 |       viewBox="0 0 64 64"
145 |       xmlns="http://www.w3.org/2000/svg"
146 |     >
147 |       <title>Signal Icon</title>
148 |       <g fill="none" fillRule="evenodd">
149 |         <rect
150 |           className="fill-current text-primary-600"
151 |           width="64"
152 |           height="64"
153 |           rx="32"
154 |         />
155 |         <g strokeWidth="2" transform="translate(19.429 20.571)">
156 |           <circle
157 |             className="stroke-current text-gray-50"
158 |             strokeLinecap="square"
159 |             cx="12.571"
160 |             cy="12.571"
161 |             r="1.143"
162 |           />
163 |           <path
164 |             className="stroke-current text-gray-50"
165 |             d="M19.153 23.267c3.59-2.213 5.99-6.169 5.99-10.696C25.143 5.63 19.514 0 12.57 0 5.63 0 0 5.629 0 12.571c0 4.527 2.4 8.483 5.99 10.696"
166 |           />
167 |           <path
168 |             className="stroke-current text-primary-300"
169 |             d="M16.161 18.406a6.848 6.848 0 003.268-5.835 6.857 6.857 0 00-6.858-6.857 6.857 6.857 0 00-6.857 6.857 6.848 6.848 0 003.268 5.835"
170 |           />
171 |         </g>
172 |       </g>
173 |     </svg>
174 |   );
175 | };
176 | 
177 | export const TalkingIcon = () => {
178 |   return (
179 |     <svg
180 |       className="w-16 h-16 p-1 mb-2 -mt-1"
181 |       viewBox="0 0 64 64"
182 |       xmlns="http://www.w3.org/2000/svg"
183 |     >
184 |       <title>Talking Icon</title>
185 |       <g fill="none" fillRule="evenodd">
186 |         <rect
187 |           className="fill-current text-primary-600"
188 |           width="64"
189 |           height="64"
190 |           rx="32"
191 |         />
192 |         <g strokeLinecap="square" strokeWidth="2">
193 |           <path
194 |             className="stroke-current text-primary-300"
195 |             d="M38.826 22.504a9.128 9.128 0 00-13.291-.398M35.403 25.546a4.543 4.543 0 00-6.635-.207"
196 |           />
197 |           <path
198 |             className="stroke-current text-gray-50"
199 |             d="M19.429 25.143A6.857 6.857 0 0126.286 32v1.189L28 37.143l-1.714.571V40A2.286 2.286 0 0124 42.286h-2.286v2.285M44.571 25.143A6.857 6.857 0 0037.714 32v1.189L36 37.143l1.714.571V40A2.286 2.286 0 0040 42.286h2.286v2.285"
200 |           />
201 |         </g>
202 |       </g>
203 |     </svg>
204 |   );
205 | };
206 | 


--------------------------------------------------------------------------------