diff --git a/welcome_website/components.json b/welcome_website/components.json new file mode 100644 index 0000000..5b5eaeb --- /dev/null +++ b/welcome_website/components.json @@ -0,0 +1,23 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": false, + "tsx": true, + "tailwind": { + "config": "", + "css": "styles/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "rtl": false, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "registries": {} +} diff --git a/welcome_website/components/CommonSteps.tsx b/welcome_website/components/CommonSteps.tsx index 036f6ee..83f7962 100644 --- a/welcome_website/components/CommonSteps.tsx +++ b/welcome_website/components/CommonSteps.tsx @@ -1,9 +1,8 @@ -import Link from "next/link"; import { params } from "../utils/params"; import { ActionStep } from "../utils/types"; export const firstStep: ActionStep = { - title: "Plug DAppNode to the router", + title: "Plug your Dappnode to the router", image: "/connect-to-router.png", }; export const lastStep = ({ avahi = false }: { avahi: boolean }): ActionStep => { @@ -15,10 +14,17 @@ export const lastStep = ({ avahi = false }: { avahi: boolean }): ActionStep => { }; function LastStepComponent({ avahi = false }: { avahi: boolean }) { - const endpoint = avahi ? params.DAPPNODE_AVAHI_ENDPOINT : params.DAPPNODE_ENDPOINT; + const endpoint = avahi + ? params.DAPPNODE_AVAHI_ENDPOINT + : params.DAPPNODE_ENDPOINT; return ( - - {endpoint} - + + {endpoint} + ); } diff --git a/welcome_website/components/ConnectionStepper.tsx b/welcome_website/components/ConnectionStepper.tsx new file mode 100644 index 0000000..5c0b4f8 --- /dev/null +++ b/welcome_website/components/ConnectionStepper.tsx @@ -0,0 +1,65 @@ +import React from "react"; +import { cn } from "@/lib/utils"; +import { ActionStep } from "../utils/types"; +import { firstStep, lastStep } from "./CommonSteps"; +import { params } from "../utils/params"; + +interface ConnectionStepperProps { + steps: ActionStep[]; + avahi?: boolean; +} + +export default function ConnectionStepper({ + steps, + avahi = false, +}: ConnectionStepperProps) { + const allSteps = [firstStep, ...steps, lastStep({ avahi })]; + + return ( +
+
+ {allSteps.map((step, index) => ( +
+ {/* Step indicator with connector line */} +
+
+ {index + 1} +
+ + {/* Connector line */} + {index < allSteps.length - 1 && ( +
+ )} +
+ + {/* Step content */} +
+

{step.title}

+ + {step.image && ( +
+ {step.title} +
+ )} + + {step.component && ( +
+ +
+ )} +
+
+ ))} +
+
+ ); +} diff --git a/welcome_website/components/Footer.tsx b/welcome_website/components/Footer.tsx index fec3e48..6bf273b 100644 --- a/welcome_website/components/Footer.tsx +++ b/welcome_website/components/Footer.tsx @@ -1,11 +1,49 @@ -import React from "react"; +import { params } from "@/utils/params"; + +const footerLinks = [ + { + name: "Discord", + url: params.DISCORD_SERVER_URL, + }, + { + name: "Forum", + url: "https://discourse.dappnode.io/", + }, + { + name: "Documentation", + url: "https://docs.dappnode.io/", + }, +]; export default function Footer() { return ( - <> - Discord - Forum - Documentation - + ); } diff --git a/welcome_website/components/Layout.tsx b/welcome_website/components/Layout.tsx index b949daa..388d406 100644 --- a/welcome_website/components/Layout.tsx +++ b/welcome_website/components/Layout.tsx @@ -4,12 +4,12 @@ import Navbar from "./Navbar"; export default function Layout({ children }) { return ( -
-
+
+
-
{children}
-
+
{children}
+
diff --git a/welcome_website/components/Navbar.tsx b/welcome_website/components/Navbar.tsx index 93df3dd..7eac10a 100644 --- a/welcome_website/components/Navbar.tsx +++ b/welcome_website/components/Navbar.tsx @@ -2,31 +2,46 @@ import React from "react"; import Link from "next/link"; import { params } from "../utils/params"; +const navLinks = [ + { name: "Wi-Fi", href: "/wifi" }, + { name: "VPN", href: "/vpn" }, + { name: "Local", href: "/local" }, +]; + export default function Navbar() { return ( -