Welcome update

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": {}
+}

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 (
-    <Link href={endpoint}>
-      <a>{endpoint}</a>
-    </Link>
+    <a
+      href={endpoint}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-primary hover:underline font-semibold text-lg"
+    >
+      {endpoint}
+    </a>
   );
 }

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 (
+    <div className="w-full pt-8">
+      <div className="flex flex-col md:flex-row justify-between items-start gap-8">
+        {allSteps.map((step, index) => (
+          <div key={index} className="flex-1 w-full">
+            {/* Step indicator with connector line */}
+            <div className="flex items-center mb-4">
+              <div
+                className={cn(
+                  "flex h-10 w-10 items-center justify-center rounded-full border-2 font-semibold shrink-0",
+                  "bg-secondary text-secondary-foreground border-secondary",
+                )}
+              >
+                {index + 1}
+              </div>
+
+              {/* Connector line */}
+              {index < allSteps.length - 1 && (
+                <div className="hidden md:block flex-1 h-0.5 mx-4 bg-border" />
+              )}
+            </div>
+
+            {/* Step content */}
+            <div className="text-center">
+              <h3 className="font-semibold text-lg mb-4">{step.title}</h3>
+
+              {step.image && (
+                <div className="mb-4 flex justify-center">
+                  <img
+                    src={params.basePath + step.image}
+                    alt={step.title}
+                    className="max-w-full h-auto rounded-lg max-h-48 object-contain"
+                  />
+                </div>
+              )}
+
+              {step.component && (
+                <div className="mt-4">
+                  <step.component />
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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 (
-    <>
-      <a href="https://discord.gg/c28an8dA5k">Discord</a>
-      <a href="https://discourse.dappnode.io/">Forum</a>
-      <a href="https://docs.dappnode.io/">Documentation</a>
-    </>
+    <footer className="h-full border-t bg-muted/30">
+      <div className="h-full flex items-center justify-center gap-8 px-6">
+        {footerLinks.map((link) => (
+          <a
+            key={link.name}
+            target="_blank"
+            rel="noopener noreferrer"
+            href={link.url}
+            className="text-sm font-medium text-foreground/70 hover:text-(--dappnode-purple) transition-colors inline-flex items-center gap-1.5"
+          >
+            {link.name}
+            <svg
+              className="w-3 h-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+              />
+            </svg>
+          </a>
+        ))}
+      </div>
+    </footer>
   );
 }

welcome_website/components/Layout.tsx

@@ -4,12 +4,12 @@ import Navbar from "./Navbar";
 
 export default function Layout({ children }) {
   return (
-    <div className="wrapper">
-      <header className="header">
+    <div className="min-h-screen flex flex-col">
+      <header className="h-28 w-full">
         <Navbar />
       </header>
-      <main className="content">{children}</main>
-      <footer className="footer">
+      <main className="flex-1 w-full">{children}</main>
+      <footer className="h-22 w-full">
         <Footer />
       </footer>
     </div>

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 (
-    <nav>
-      <div className="navbar-logo">
-        <img src={params.basePath + "/dappnode-logo.png"} />
-      </div>
-      <div className="navbar-title-links">
-        <div className="navbar-title">
-          <h1>
-            Connect to<span className="navbar-title-dappnode">DAppNode</span>
-          </h1>
-        </div>
-        <div className="navbar-links">
-          <Link href="/">
-            <a>Home</a>
-          </Link>
-          <Link href="/wifi">
-            <a>Wi-Fi</a>
-          </Link>
-          <Link href="/local">
-            <a>Local</a>
-          </Link>
-          <Link href="/vpn">
-            <a>Vpn</a>
-          </Link>
+    <nav className="h-full border-b bg-muted/30 backdrop-blur ">
+      <div className="h-full flex flex-col items-center justify-evenly px-6 max-w-7xl mx-auto gap-2 mt-3">
+        {/* Logo and Brand */}
+        <Link
+          href="/"
+          className="flex items-center gap-3 hover:opacity-80 transition-opacity"
+        >
+          <img
+            className="w-12 h-12"
+            src={params.basePath + "/dappnode-logo.png"}
+            alt="Dappnode Logo"
+          />
+          <div className="flex flex-col">
+            <span className="font-bold text-3xl leading-none text-(--dappnode-purple)">
+              Dappnode
+            </span>
+            <span className="text-sm text-muted-foreground">Setup Guide</span>
+          </div>
+        </Link>
+
+        {/* Navigation Links */}
+        <div className="flex items-center gap-14">
+          {navLinks.map((link) => (
+            <Link
+              key={link.name}
+              href={link.href}
+              className="text-sm font-medium text-foreground/80 hover:text-(--dappnode-purple) transition-colors relative group"
+            >
+              {link.name}
+              <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-(--dappnode-purple) group-hover:w-full transition-all duration-300"></span>
+            </Link>
+          ))}
         </div>
       </div>
     </nav>