add favico

ok
2025-09-09 16:04:02 +02:00 · 2025-09-08 17:48:06 +02:00 · 2025-09-08 17:42:19 +02:00 · 2025-09-08 17:22:33 +02:00 · 2025-09-08 17:19:59 +02:00 · 2025-09-08 17:18:54 +02:00
46 changed files with 6234 additions and 465 deletions
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-# EngageOS
+# ThreeFold

-EngageOS is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
+ThreeFold is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).

 ## Getting started

--- a/build.sh
+++ b/build.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+cd "$(dirname "$0")"
+
+# Ensure all shell scripts are executable
+chmod +x *.sh
+
+PREFIX="threefold"
+
+echo "building for folder: /$PREFIX/"
+export NEXT_PUBLIC_BASE_PATH="/$PREFIX"
+
+# mkdir -p "out"
+
+# pnpm install --frozen-lockfile
+pnpm run build
+
+# local mirror (optional)
+# rsync -rav --delete dist/ "${HOME}/hero/var/www/$PREFIX/"
+
--- a/install.sh
+++ b/install.sh
@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# HERO Personal Agent Website - Installation Script
+# This script installs all dependencies using pnpm
+
+# Check if Node.js is installed
+if ! command -v node &> /dev/null; then
+    echo "❌ Node.js is not installed. Please install Node.js first."
+    exit 1
+fi
+
+# Check if pnpm is installed
+if ! command -v pnpm &> /dev/null; then
+    echo "📦 Installing pnpm..."
+    npm install -g pnpm
+fi
+
+echo "📋 Node.js version: $(node --version)"
+echo "📋 pnpm version: $(pnpm --version)"
+
+# Install dependencies
+echo "📦 Installing project dependencies..."
+pnpm install
+
--- a/next.config.js
+++ b/next.config.js
@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
+  output: 'export',
+  images: {
+    unoptimized: true,
+  },
+}

 module.exports = nextConfig
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/images/3nodes_big.png
+++ b/public/images/3nodes_big.png
--- a/public/images/3phone.png
+++ b/public/images/3phone.png
--- a/public/images/3router.png
+++ b/public/images/3router.png
--- a/public/images/aibox.png
+++ b/public/images/aibox.png
--- a/public/images/hgu-04.png
+++ b/public/images/hgu-04.png
--- a/public/images/mycelium.svg
+++ b/public/images/mycelium.svg
--- a/public/images/tfdash.png
+++ b/public/images/tfdash.png
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -1,5 +1,4 @@
 import { CallToAction } from '@/components/CallToAction'
-import { Faqs } from '@/components/Faqs'
 import { Hero } from '@/components/Hero'
 import { Pricing } from '@/components/Pricing'
 import { PrimaryFeatures } from '@/components/PrimaryFeatures'
@@ -14,6 +13,10 @@ import GlobeDemo from '@/components/GlobeDemo'
 import { Dashboard } from '@/components/Dashboard'
 import { AppsPreview } from '@/components/Apps'
 import { FarmerPreview } from '@/components/Farmer'
+import { TfDashboard } from '@/components/TfDashboard'
+import { ProductsPreview } from '@/components/Products'
+import { CallTo } from '@/components/CallTo'
+import { Faqss } from '@/components/Faqs'


 export default function Home() {
@@ -23,8 +26,11 @@ export default function Home() {
      <StackSectionPreview />
      <Dashboard />
      <FarmerPreview />
+      <TfDashboard />
      <AppsPreview />
-
+      <ProductsPreview />
+      <CallTo />
+      <Faqss />
    </>
  )
 }
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -12,11 +12,11 @@ const inter = Inter({

 export const metadata: Metadata = {
  title: {
-    template: '%s - EngageOS',
-    default: 'EngageOS - Invest at the perfect time.',
+    template: '%s - ThreeFold',
+    default: 'ThreeFold - Decentralized internet  by everyone, for everyone.',
  },
  description:
-    'By leveraging insights from our network of industry insiders, you’ll know exactly when to buy to maximize profit, and exactly when to sell to avoid painful losses.',
+    'ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.',
 }

 export default function RootLayout({
@@ -25,8 +25,10 @@ export default function RootLayout({
  children: React.ReactNode
 }) {
  return (
-    <html lang="en" className={clsx('antialiased', inter.variable)} style={{ backgroundColor: '#121212' }}>
-      <body style={{ backgroundColor: '#121212', color: '#ffffff' }}>{children}</body>
+    <html lang="en" className={clsx('antialiased', inter.variable)} suppressHydrationWarning>
+      <body className="bg-[#121212] text-white" suppressHydrationWarning>
+        {children}
+      </body>
    </html>
  )
 }
--- a/src/components/Apps.tsx
+++ b/src/components/Apps.tsx
@@ -22,7 +22,7 @@ const logos = [
 export function AppsPreview() {
  return (
    <div className="relative flex h-[40rem] w-full overflow-hidden rounded-md bg-transparent antialiased md:items-center md:justify-center">
-      <div className="relative z-10 mx-auto w-full max-w-4xl p-4 pt-24">
+      <div className="relative z-10 mx-auto w-full max-w-3xl p-4 pt-16">

        {/* Heading */}
        <motion.div
@@ -31,7 +31,7 @@ export function AppsPreview() {
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
-          <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl">
+          <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-5xl">
            Anything That Runs on Linux Can Run on ThreeFold
          </h1>
        </motion.div>
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -0,0 +1,28 @@
+import { XMarkIcon } from '@heroicons/react/20/solid'
+
+export function Banner() {
+  return (
+    <div className="relative flex items-center gap-x-6 bg-gray-200 px-6 py-2.5 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10 sm:px-3.5 sm:before:flex-1">
+      <p className="text-sm/6 text-white">
+        <strong className="font-semibold">ThreeFold is going commercial!</strong>
+        <svg viewBox="0 0 2 2" aria-hidden="true" className="mx-2 inline size-0.5 fill-current">
+          <circle r={1} cx={1} cy={1} />
+        </svg>
+        Read our <a
+          href="https://www.threefold.io/newsroom/summer-2025-roundup/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline hover:text-white hover:font-semibold"
+        >
+          2025 Summer Round Up →
+        </a>
+      </p>
+      <div className="flex flex-1 justify-end">
+        <button type="button" className="-m-3 p-3 focus-visible:-outline-offset-4">
+          <span className="sr-only">Dismiss</span>
+          <XMarkIcon aria-hidden="true" className="size-5 text-white" />
+        </button>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Benefits.tsx
+++ b/src/components/Benefits.tsx
@@ -16,7 +16,7 @@ export default function Benefits() {
                Built Different. For a Change.
                </h2>   
                <p className="mt-6 lg:text-lg text-base text-gray-300">
-                    EngageOS isn't just another tech platform — it's a digital infrastructure built from the ground up for purpose-driven organizations. From white-label sovereignty to field-ready resilience, every element of EngageOS is designed to meet the real-world challenges of civil society.
+                    ThreeFold isn't just another tech platform — it's a digital infrastructure built from the ground up for purpose-driven organizations. From white-label sovereignty to field-ready resilience, every element of ThreeFold is designed to meet the real-world challenges of civil society.
                </p>
            </div>
        </Container>
@@ -32,7 +32,7 @@ export default function Benefits() {
                <h3 className="text-sm/4 font-semibold text-white"> Built for Civil Society</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-white">Purpose-First, Not Profit-First</p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  Unlike traditional SaaS built for commercial scale, EngageOS was born from the realities of NGOs, grassroots coalitions, and purpose-led institutions. Every module, flow, and metric is optimized to serve impact — not ad revenue or venture capital.
+                  Unlike traditional SaaS built for commercial scale, ThreeFold was born from the realities of NGOs, grassroots coalitions, and purpose-led institutions. Every module, flow, and metric is optimized to serve impact — not ad revenue or venture capital.
                </p>
              </div>
            </div>
@@ -48,7 +48,7 @@ export default function Benefits() {
                <h3 className="text-sm/4 font-semibold text-white">White-Label, Zero-Code</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-white">Your Brand, Your Movements</p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  EngageOS empowers organizations to fully own their digital identity. From Red Cross OS to Montessori OS, each instance is custom-branded — no tech team required. You launch a platform that looks and feels like you, not us.
+                  ThreeFold empowers organizations to fully own their digital identity. From Red Cross OS to Montessori OS, each instance is custom-branded — no tech team required. You launch a platform that looks and feels like you, not us.
                </p>
              </div>
            </div>
@@ -64,7 +64,7 @@ export default function Benefits() {
                <h3 className="text-sm/4 font-semibold text-white">Sovereign & Ethical Infrastructure</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-white">Own Your Data. Always.</p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  We don't mine or monetize user data. EngageOS runs on decentralized, privacy-respecting infrastructure — built for trust, compliance, and sovereignty. You control where your data lives and who sees it.
+                  We don't mine or monetize user data. ThreeFold runs on decentralized, privacy-respecting infrastructure — built for trust, compliance, and sovereignty. You control where your data lives and who sees it.
                </p>
              </div>
            </div>
@@ -80,7 +80,7 @@ export default function Benefits() {
                <h3 className="text-sm/4 font-semibold text-white">Mutualized Model</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-white">Share Infrastructure. Multiply Impact.</p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-300">
-                  By pooling tech costs across aligned organizations, EngageOS offers enterprise-grade functionality at a fraction of the price. When one partner grows, the entire ecosystem benefits — through shared modules, updates, and insights.
+                  By pooling tech costs across aligned organizations, ThreeFold offers enterprise-grade functionality at a fraction of the price. When one partner grows, the entire ecosystem benefits — through shared modules, updates, and insights.
                </p>
              </div>
            </div>
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -4,6 +4,8 @@ import clsx from 'clsx'
 const baseStyles = {
  solid:
    'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
+  glass:
+    'rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15',
  outline:
    'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
 }
@@ -11,14 +13,14 @@ const baseStyles = {
 const variantStyles = {
  solid: {
    gradient:
-      'bg-gradient-to-r from-[#caa5f0] via-[#8f79f9] to-[#3c82f5] text-white hover:brightness-110 active:brightness-95',
+      'btn-new-gradient',
    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
    white:
-      'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
+      'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400',
    gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
  },
  outline: {
-    gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+    gray: 'border-gray-300 text-gray-700 hover:border-gray-600 hover:text-white active:bg-gray-100 active:text-gray-600/80',
  },
 }

@@ -27,6 +29,9 @@ type ButtonProps = (
      variant?: 'solid'
      color?: keyof typeof variantStyles.solid
    }
+  | {
+      variant: 'glass'
+    }
  | {
      variant: 'outline'
      color?: keyof typeof variantStyles.outline
@@ -41,15 +46,22 @@ type ButtonProps = (

 export function Button({ className, ...props }: ButtonProps) {
  props.variant ??= 'solid'
-  props.color ??= 'gray'
+
+  if (props.variant !== 'glass') {
+    props.color ??= 'gray'
+  }
+
+  let variantClass: string | undefined = undefined
+
+  if (props.variant === 'outline' && props.color) {
+    variantClass = variantStyles.outline[props.color]
+  } else if (props.variant === 'solid' && props.color) {
+    variantClass = variantStyles.solid[props.color]
+  }

  className = clsx(
    baseStyles[props.variant],
-    props.variant === 'outline'
-      ? variantStyles.outline[props.color]
-      : props.variant === 'solid'
-        ? variantStyles.solid[props.color]
-        : undefined,
+    variantClass,
    className,
  )

--- a/src/components/CallTo.tsx
+++ b/src/components/CallTo.tsx
@@ -0,0 +1,47 @@
+export  function CallTo() {
+  return (
+    <div className="bg-transparent">
+      <div className="mx-auto max-w-7xl py-24 px-6 lg:px-4">
+        <div className="relative isolate overflow-hidden bg-stat-gradient  py-16 text-center after:pointer-events-none after:absolute after:inset-0 sm:rounded-3xl sm:px-16">
+          <div className="mx-auto max-w-2xl lg:max-w-2xl">
+          <h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+            More Resilient, More Powerful, More Diverse With You
+          </h2>
+          <p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
+            Unlike the corporate internet, where users are the product, in the new internet, participants are the owners and beneficiaries.
+          </p>
+          <p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
+          By participating, you're not just using the technology, you're also helping to build a digital world that protects privacy, promotes fairness, and returns control to the people.
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-x-6">
+            <a
+              href="#"
+              className="rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15"
+            >
+              {' '}
+              Get started{' '}
+            </a>
+            <a href="#" className="text-sm/6 font-semibold text-white">
+              Learn more
+              <span aria-hidden="true">→</span>
+            </a>
+          </div>
+          <svg
+            viewBox="0 0 1024 1024"
+            aria-hidden="true"
+            className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
+          >
+            <circle r={512} cx={512} cy={512} fill="url(#827591b1-ce8c-4110-b064-7cb85a0b1217)" fillOpacity="0.7" />
+            <defs>
+              <radialGradient id="827591b1-ce8c-4110-b064-7cb85a0b1217">
+                <stop stopColor="#fff4f8" />
+                <stop offset={1} stopColor="#97979d" />
+              </radialGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Cta.tsx
+++ b/src/components/Cta.tsx
@@ -7,7 +7,7 @@ export default function Cta() {
            Scale Your Impact, Not Your Costs
          </h2>
          <p className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-300">
-            EngageOS gives purpose-driven teams the power to mobilize communities, grow movements, and fundraise faster—
+            ThreeFold gives purpose-driven teams the power to mobilize communities, grow movements, and fundraise faster—
            all from one unified platform.
          </p>
          <div className="mt-10 flex items-center justify-center gap-x-6">
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -2,10 +2,11 @@

 import CountUp from "react-countup";
 import React from "react";
+import { Button } from "./Button";

 export function Dashboard() {
  return (
-    <div className="py-24 bg-transparent">
+    <div className="py-24 bg-transparent relative">
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
          {/* Column 1: Title & NODES */}
@@ -18,7 +19,7 @@ export function Dashboard() {
              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
                ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
              </p>
-              <button className="mt-6" variant="primary" color="transparent" href="https://threefold.io/build" >Explore TFGrid →</button>
+              <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
            </div>


@@ -86,23 +87,23 @@ function StatCard({
 }) {
  return (
    <div
-      className={`relative flex flex-col overflow-hidden rounded-2xl bg-stat-gradient p-8 shadow-sm backdrop-blur transition-all duration-300 ease-out hover:scale-105 ${className}`}
+      className={`relative flex flex-col overflow-hidden rounded-2xl bg-stat-gradient p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
      style={{
        filter: 'brightness(1)',
      }}
      onMouseEnter={(e) => {
-        e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))';
+        e.currentTarget.style.filter = 'brightness(0.8)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.filter = 'brightness(1)';
      }}
    >
-      <h3 className="text-lg font-semibold text-cyan-400">{label}</h3>
+      <h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
      <p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
        {description}
      </p>
      <div className="mt-8 flex items-center space-x-3">
-        <span className="text-cyan-400 text-3xl">•</span>
+        <span className="text-gradient-neutral-vertical text-3xl">•</span>
        <div className="text-5xl font-semibold tracking-tight text-white tabular-nums">
          {value}
          {unit && (
--- a/src/components/Faq.tsx
+++ b/src/components/Faq.tsx
@@ -0,0 +1,63 @@
+const faqs = [
+  {
+    question: 'Is this a separate new Internet?',
+    answer: 'ThreeFold creates a decentralized internet infrastructure that can operate independently, offering alternatives to traditional centralized systems while maintaining compatibility with existing internet protocols.',
+  },
+  {
+    question: 'Why do we need a new Internet?',
+    answer: 'The current internet is increasingly centralized and controlled by few entities. ThreeFold provides a more democratic, private, and secure alternative where users and developers have full control over their data and applications.',
+  },
+  {
+    question: 'How can I participate?',
+    answer: 'You can participate by becoming a farmer, a user, a partner or by developing apps. Provide capacity to the ThreeFold Grid, Use capacity, build solutions, develop applications, and many more.',
+  },
+  {
+    question: 'How can I get V4 nodes?',
+    answer: 'Our partners are selling V4 nodes with a new reward scheme and ready to grow to millions of nodes. Click here to get V4 nodes.',
+  },
+  {
+    question: 'What can I do with the ThreeFold Grid?',
+    answer: 'ThreeFold grid can be used to host any web2, web3 and future workload. For more details see our docs.',
+  },
+  {
+    question: 'How secure and private is my data?',
+    answer: 'ThreeFold is designed to be secure and private by default. We use end-to-end encryption to protect your data and ensure that only you have access to your data.',
+  },
+  {
+    question: 'Who should use the ThreeFold Grid?',
+    answer: 'Individuals, businesses, and organizations who want to be autonomous and have full control over their data and applications. Security is a very big problem today, Technology as used by ThreeFold has the potential to resolve this if used properly. We are building a channel of solution providers and integrators who want to build on top of ThreeFold.',
+  },
+]
+
+export function Faq () {
+  return (
+    <div className="bg-transparent">
+      <div className="mx-auto max-w-7xl px-6 py-24 sm:pt-32 lg:px-8 lg:py-40">
+        <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+          <div className="lg:col-span-5">
+            <h2 className="text-3xl font-semibold tracking-tight text-pretty text-white sm:text-4xl">
+              Frequently asked questions
+            </h2>
+            <p className="mt-4 text-base/7 text-pretty text-gray-400">
+              Can’t find the answer you’re looking for? Reach out to our{' '}
+              <a href="#" className="font-semibold text-indigo-400 hover:text-indigo-300">
+                customer support
+              </a>{' '}
+              team.
+            </p>
+          </div>
+          <div className="mt-10 lg:col-span-7 lg:mt-0">
+            <dl className="space-y-10">
+              {faqs.map((faq) => (
+                <div key={faq.question}>
+                  <dt className="text-base/7 font-semibold text-white">{faq.question}</dt>
+                  <dd className="mt-2 text-base/7 text-gray-400">{faq.answer}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Faqs.tsx
+++ b/src/components/Faqs.tsx
@@ -3,48 +3,48 @@ import { Container } from '@/components/Container'
 const faqs = [
  [
    {
-      question: 'What is EngageOS?',
+      question: 'What is ThreeFold?',
      answer:
-        'EngageOS is a white-label engagement platform built specifically for purpose-driven organizations. It allows NGOs, foundations, and impact coalitions to launch their own branded platforms to engage communities, deliver training, and mobilize support.',
+        'ThreeFold is a white-label engagement platform built specifically for purpose-driven organizations. It allows NGOs, foundations, and impact coalitions to launch their own branded platforms to engage communities, deliver training, and mobilize support.',
    },
    {
-      question: 'Do I need a tech team to use EngageOS?',
+      question: 'Do I need a tech team to use ThreeFold?',
      answer:
-        'No. EngageOS is fully plug-and-play. It’s designed so any organization—regardless of technical capacity—can deploy and customize their own platform without writing a line of code.',
+        'No. ThreeFold is fully plug-and-play. It’s designed so any organization—regardless of technical capacity—can deploy and customize their own platform without writing a line of code.',
    },
    {
      question: 'Can we fully customize the platform’s look and feel?',
      answer:
-        'Absolutely. From logos and colors to navigation and community features, EngageOS supports full white-label customization so the platform feels like your own digital headquarters.',
+        'Absolutely. From logos and colors to navigation and community features, ThreeFold supports full white-label customization so the platform feels like your own digital headquarters.',
    },
  ],
  [
    {
-      question: 'What kinds of organizations use EngageOS?',
+      question: 'What kinds of organizations use ThreeFold?',
      answer:
        'We work with NGOs, educational networks, development agencies, faith-based groups, and mission-aligned coalitions that want to better engage, train, and mobilize their communities at scale.',
    },
    {
-      question: 'Is EngageOS multilingual and accessible offline?',
+      question: 'Is ThreeFold multilingual and accessible offline?',
      answer:
        'Yes. The platform supports multilingual content and offline-friendly delivery—ideal for reaching underserved communities with limited connectivity.',
    },
    {
-      question: 'Can we use EngageOS for fundraising?',
+      question: 'Can we use ThreeFold for fundraising?',
      answer:
-        'Yes. EngageOS includes built-in fundraising tools, including peer-to-peer, micro-donation, and pay-it-forward models—plus full donor engagement capabilities.',
+        'Yes. ThreeFold includes built-in fundraising tools, including peer-to-peer, micro-donation, and pay-it-forward models—plus full donor engagement capabilities.',
    },
  ],
  [
    {
-      question: 'How is EngageOS different from other platforms?',
+      question: 'How is ThreeFold different from other platforms?',
      answer:
-        'Unlike general-purpose platforms, EngageOS is mission-built for civil society. It integrates engagement, learning, and fundraising in one secure, ethical platform—hosted on sovereign infrastructure.',
+        'Unlike general-purpose platforms, ThreeFold is mission-built for civil society. It integrates engagement, learning, and fundraising in one secure, ethical platform—hosted on sovereign infrastructure.',
    },
    {
      question: 'What is the pricing model?',
      answer:
-        'EngageOS operates on a flexible SaaS model, with plans ranging from €30K to €300K annually depending on features and user scale. For grassroots initiatives, pay-it-forward and sponsorship models are also available.',
+        'ThreeFold operates on a flexible SaaS model, with plans ranging from €30K to €300K annually depending on features and user scale. For grassroots initiatives, pay-it-forward and sponsorship models are also available.',
    },
    {
      question: 'How do we get started?',
@@ -55,7 +55,7 @@ const faqs = [
 ]


-export function Faqs() {
+export function Faqss () {
  return (
    <section
      id="faqs"
@@ -66,14 +66,14 @@ export function Faqs() {
        <div className="mx-auto max-w-2xl lg:mx-0">
          <h2
            id="faqs-title"
-            className="text-3xl font-medium tracking-tight text-gray-900"
+            className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl"
          >
            Frequently asked questions
          </h2>
          <p className="mt-2 lg:text-lg text-base text-gray-600">
            If you have anything else you want to ask,{' '}
            <a
-              href="mailto:info@example.com"
+              href="mailto:info@threefold.io"
              className="text-gray-900 underline"
            >
              reach out to us
@@ -83,7 +83,7 @@ export function Faqs() {
        </div>
        <ul
          role="list"
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
+          className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-8  lg:max-w-none lg:grid-cols-3"
        >
          {faqs.map((column, columnIndex) => (
            <li key={columnIndex}>
--- a/src/components/Farmer.tsx
+++ b/src/components/Farmer.tsx
@@ -47,7 +47,7 @@ export function FarmerPreview() {
  return (
    <section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-8 relative">
    {/* Gradient Blob Component */}
-      <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
+      <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#535353] to-[#7e7e7e] opacity-60 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
      <div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
      <div className="mx-auto max-w-7xl">
        <div className="lg:flex lg:items-center lg:justify-between lg:px-8">
@@ -61,7 +61,7 @@ export function FarmerPreview() {
            </div>
          {/* Right Column - Stacked Cubes (2/3 width) */}
          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
-            <Button variant="outline" className=" text-black px-4 py-2 rounded-md hover:bg-gray-700 transition-colors">
+            <Button variant="outline">
              Become A Farmer
            </Button>
          </div>
@@ -70,7 +70,7 @@ export function FarmerPreview() {
          {posts.map((post) => (
            <article
              key={post.id}
-              className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-state-gradient px-8 lg:pt-12"
+              className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-stat-gradient px-8 lg:pt-12"
            >
              <div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-200 via-gray-300/10" 
              style={{
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,7 +6,6 @@ import { Container } from '@/components/Container'
 import { TextField } from '@/components/Fields'
 import { Logomark } from '@/components/Logo'
 import { NavLinks } from '@/components/NavLinks'
-import qrCode from '@/images/qr-code.svg'

 function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
  return (
@@ -29,31 +28,14 @@ export function Footer() {
            <div className="flex items-center text-white">
              <Logomark className="h-10 w-10 flex-none fill-cyan-500" />
              <div className="ml-4">
-                <p className="text-base font-semibold">EngageOS</p>
-                <p className="mt-1 text-sm">Empowering Purpose-Driven Organizations.</p>
+                <p className="text-base font-semibold">ThreeFold</p>
+                <p className="mt-1 text-sm">Decentralized internet infrastructure by everyone, for everyone.</p>
              </div>
            </div>
-            <nav className="mt-11 flex gap-8">
+            <nav className="mt-8 flex gap-8">
              <NavLinks />
            </nav>
          </div>
-          <div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-800 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
-            <div className="relative flex h-24 w-24 flex-none items-center justify-center">
-              <QrCodeBorder className="absolute inset-0 h-full w-full stroke-gray-600 transition-colors group-hover:stroke-cyan-500" />
-              <Image src={qrCode} alt="" unoptimized />
-            </div>
-            <div className="ml-8 lg:w-64">
-              <p className="text-base font-semibold text-white">
-                <Link href="#">
-                  <span className="absolute inset-0 sm:rounded-2xl" />
-                  Download the app
-                </Link>
-              </p>
-              <p className="mt-1 text-sm text-gray-300">
-                Scan the QR code to download the app from the App Store.
-              </p>
-            </div>
-          </div>
        </div>
        <div className="flex flex-col items-center border-t border-gray-700 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
          <form className="flex w-full justify-center md:w-auto">
@@ -65,7 +47,7 @@ export function Footer() {
              required
              className="w-60 min-w-0 shrink"
            />
-            <Button type="submit" color="cyan" className="ml-4 flex-none">
+            <Button type="submit"  variant='glass' className="ml-4 flex-none">
              <span className="hidden lg:inline">Join our newsletter</span>
              <span className="lg:hidden">Join newsletter</span>
            </Button>
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -73,7 +73,7 @@ export function Header() {
              {({ open }) => (
                <>
                  <PopoverButton
-                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-800/50 hover:stroke-gray-300 focus:not-data-focus:outline-hidden active:stroke-white"
+                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-transparent hover:stroke-gray-200 focus:not-data-focus:outline-hidden active:stroke-white"
                    aria-label="Toggle site navigation"
                  >
                    {({ open }) =>
@@ -134,9 +134,11 @@ export function Header() {
            </Popover>
            <div className="flex items-center gap-6 max-lg:hidden">
              <Button href="/login" variant="outline">
-                Log in
+                Info
+              </Button>
+              <Button href="#" variant="glass">
+                Participate
              </Button>
-              <Button href="#">Download</Button>
            </div>
          </div>
        </Container>
--- a/src/components/HeroHome.tsx
+++ b/src/components/HeroHome.tsx
@@ -22,7 +22,7 @@ export default function HeroHome() {
                Empowering Purpose-Driven Organizations.
              </h1>
              <p className="mt-8 lg:lg:text-lg text-base text-base text-gray-300">
-                Welcome to <span className={`font-semibold ${gradientText}`}>EngageOS</span>: the first all-in-one, white-label engagement platform to mobilize communities, engage supporters, scale impact, and fundraise—at a fraction of the cost.
+                Welcome to <span className={`font-semibold ${gradientText}`}>ThreeFold</span>: the first all-in-one, white-label engagement platform to mobilize communities, engage supporters, scale impact, and fundraise—at a fraction of the cost.
              </p>
              <div className="mt-12 flex items-center justify-center gap-x-6 relative z-10">
                <Button color="gradient">Get in Touch</Button>
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,10 +1,12 @@
 import { Footer } from '@/components/Footer'
 import { Header } from '@/components/Header'
+import { Banner } from '@/components/Banner'

 export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Header />
+      <Banner />
      <main className="flex-auto">{children}</main>
      <Footer />
    </>
--- a/src/components/NavLinks.tsx
+++ b/src/components/NavLinks.tsx
@@ -9,15 +9,14 @@ export function NavLinks() {
  let timeoutRef = useRef<number | null>(null)

  return [
-    ['Features', '/#features'],
-    ['Reviews', '/#reviews'],
-    ['Pricing', '/#pricing'],
-    ['FAQs', '/#faqs'],
+    ['About', '/#features'],
+    ['Build', '/#reviews'],
+    ['Host', '/#pricing'],
  ].map(([label, href], index) => (
    <Link
      key={label}
      href={href}
-      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-300 transition-colors delay-150 hover:text-white hover:delay-0"
+      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-white hover:delay-0"
      onMouseEnter={() => {
        if (timeoutRef.current) {
          window.clearTimeout(timeoutRef.current)
@@ -33,7 +32,7 @@ export function NavLinks() {
      <AnimatePresence>
        {hoveredIndex === index && (
          <motion.span
-            className="absolute inset-0 rounded-lg bg-gray-800"
+            className="absolute inset-0 rounded-lg bg-transparent"
            layoutId="hoverBackground"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1, transition: { duration: 0.15 } }}
--- a/src/components/Pricing.tsx
+++ b/src/components/Pricing.tsx
@@ -25,7 +25,7 @@ const plans = [
      'Basic learning paths',
      'Donations & campaigns',
      'Your logo & colors',
-      'EngageOS subdomain (yourname.engageos.org)',
+      'ThreeFold subdomain (yourname.ThreeFold.org)',
      'Email support',
    ],
    logomarkClassName: 'fill-gray-300',
--- a/src/components/PrimaryFeatures.tsx
+++ b/src/components/PrimaryFeatures.tsx
@@ -39,7 +39,7 @@ const features = [
  {
    name: 'Invite friends for better returns',
    description:
-      'For every friend you invite to EngageOS, you get insider notifications 5 seconds sooner. And it’s 10 seconds if you invite an insider.',
+      'For every friend you invite to ThreeFold, you get insider notifications 5 seconds sooner. And it’s 10 seconds if you invite an insider.',
    icon: DeviceUserIcon,
    screen: InviteScreen,
  },
@@ -516,7 +516,11 @@ function FeaturesMobile() {
        {features.map((feature, featureIndex) => (
          <div
            key={featureIndex}
-            ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
+            ref={(ref) => {
+              if (ref) {
+                slideRefs.current[featureIndex] = ref
+              }
+            }}
            className="w-full flex-none snap-center px-4 sm:px-6"
          >
            <div className="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">
@@ -580,9 +584,9 @@ export function PrimaryFeatures() {
            Every feature you need to win. Try it for yourself.
          </h2>
          <p className="mt-2 lg:text-lg text-base text-gray-400">
-            EngageOS was built for investors like you who play by their own rules
+            ThreeFold was built for investors like you who play by their own rules
            and aren’t going to let SEC regulations get in the way of their
-            dreams. If other investing tools are afraid to build it, EngageOS has
+            dreams. If other investing tools are afraid to build it, ThreeFold has
            it.
          </p>
        </div>
--- a/src/components/Products.tsx
+++ b/src/components/Products.tsx
@@ -0,0 +1,119 @@
+"use client";
+import { Button } from "./Button";
+import Image from "next/image";
+
+const products = [
+  {
+    id: 1,
+    colSpan: "lg:col-span-3",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]",
+    img: "/images/3nodes.png",
+    title: "3Nodes",
+    desc: "The backbone of storage and infrastructure, providing compute and data resources.",
+    color: "indigo-400",
+    bgRounded: "max-lg:rounded-t-4xl lg:rounded-tl-4xl"
+  },
+  {
+    id: 2,
+    colSpan: "lg:col-span-3",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]",
+    img: "/images/mycelium.svg",
+    title: "Mycelium",
+    desc: "End-to-end encrypted overlay network, always looking for the shortest possible path between participants",
+    color: "indigo-400",
+    bgRounded: "lg:rounded-tr-4xl"
+  },
+  {
+    id: 3,
+    colSpan: "lg:col-span-2",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]",
+    img: "/images/aibox.png",
+    title: "AIBox",
+    desc: "A self-hosted AI compute solution powered by ThreeFold.",
+    color: "indigo-400",
+    bgRounded: "lg:rounded-bl-4xl"
+  },
+  {
+    id: 4,
+    colSpan: "lg:col-span-2",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)]",
+    img: "/images/3phone.png",
+    title: "3Phone",
+    desc: "OwnPhone is the first secure device in the 3Phone family designed to work seamlessly with the ThreeFold Grid.",
+    color: "indigo-400",
+    bgRounded: ""
+  },
+  {
+    id: 5,
+    colSpan: "lg:col-span-2",
+    rounded: "rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]",
+    img: "/images/3router.png",
+    title: "3Router",
+    desc: "Smart routers ensure shortest-path connections between nodes and phones with end-to-end encryption.",
+    color: "indigo-400",
+    bgRounded: "max-lg:rounded-b-4xl lg:rounded-br-4xl"
+  }
+];
+
+export function ProductsPreview() {
+
+  return (
+    <section className="w-full bg-transparent px-4 py-8 sm:px-6 mt-12 sm:pb-12 lg:px-6 relative">
+    
+      <div className="mx-auto max-w-7xl">
+        <div className="lg:flex lg:items-center lg:justify-between lg:px-8">
+          {/* Left Column - Text (1/3 width) */}
+          <div className="lg:col-span-1 flex max text-center lg:text-left order-1 lg:order-1">
+            <div className="max-w-4xl">
+            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+              Join the Movement to Build a New Internet
+            </h2>
+            <p className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base">
+              There are many ways to be part of our mission to create a more open, autonomous, and interconnected digital world. Farming is just one pillar of our ecosystem. Explore all the products that are driving this transformation.
+            </p>
+            </div>
+            </div>
+          {/* Right Column - Stacked Cubes (2/3 width) */}
+          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
+            <Button variant="outline">
+              Join the Ecosystem
+            </Button>
+          </div>
+        </div>
+        <div className="mt-10 grid grid-cols-1 gap-6 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+          {products.map(product => (
+            <div
+              key={product.id}
+              className={`rounded-2xl bg-stat-gradient p-8 shadow-sm backdrop-blur transition-all duration-300 ease-out hover:scale-105 ${product.colSpan}`}
+              style={{
+                filter: 'brightness(1)',
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.filter = 'brightness(0.8) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.filter = 'brightness(1)';
+              }}
+            >
+              <div className="flex h-full flex-col lg:flex-row items-center lg:items-start gap-6">
+                <div className="flex-shrink-0">
+                  <img
+                    alt={`${product.title} screenshot`}
+                    src={product.img}
+                    className="w-20 h-20 lg:w-24 lg:h-24 object-contain"
+                  />
+                </div>
+                <div className="flex-1 text-center lg:text-left">
+                  <h3 className="text-xl lg:text-2xl font-semibold text-white mb-3">{product.title}</h3>
+                  <p className="text-gray-700 text-sm font-light text-pretty lg:text-base">
+                    {product.desc}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/Reviews.tsx
+++ b/src/components/Reviews.tsx
@@ -16,37 +16,37 @@ interface Review {
 const reviews: Array<Review> = [
  {
    title: 'A true game-changer for nonprofits.',
-    body: 'EngageOS allowed us to centralize our volunteer hub, training, and crowdfunding into one platform. We have seen a 3x jump in community engagement.',
+    body: 'ThreeFold allowed us to centralize our volunteer hub, training, and crowdfunding into one platform. We have seen a 3x jump in community engagement.',
    author: 'Sarah D., Program Director at WomenRise',
    rating: 5,
  },
  {
    title: 'No tech team needed.',
-    body: 'Launching our own branded platform felt intimidating—until EngageOS. It is intuitive, scalable, and beautifully designed.',
+    body: 'Launching our own branded platform felt intimidating—until ThreeFold. It is intuitive, scalable, and beautifully designed.',
    author: 'Ahmed K., Director at The Green Schools Alliance',
    rating: 5,
  },
  {
    title: 'Empowered our youth programs.',
-    body: 'Thanks to EngageOS, we built a digital home for our learning initiatives with AI-powered content in three languages.',
+    body: 'Thanks to ThreeFold, we built a digital home for our learning initiatives with AI-powered content in three languages.',
    author: 'Maria T., Learning Lead at Global Youth Voices',
    rating: 5,
  },
  {
    title: 'Secure and sovereign.',
-    body: 'As a human rights coalition, data privacy is critical. EngageOS is the only platform that met our ethical tech standards.',
+    body: 'As a human rights coalition, data privacy is critical. ThreeFold is the only platform that met our ethical tech standards.',
    author: 'Lukas M., CTO at Liberty Commons',
    rating: 5,
  },
  {
    title: 'Decentralized. Local-first. Exactly what we needed.',
-    body: 'EngageOS helped us launch a regional platform for community-led health training across East Africa—with full offline access.',
+    body: 'ThreeFold helped us launch a regional platform for community-led health training across East Africa—with full offline access.',
    author: 'Grace N., Digital Programs at Umoja Health Network',
    rating: 5,
  },
  {
    title: 'The best decision we made this year.',
-    body: 'Instead of duct-taping tools together, EngageOS gave us one powerful stack to engage, fundraise, and scale impact.',
+    body: 'Instead of duct-taping tools together, ThreeFold gave us one powerful stack to engage, fundraise, and scale impact.',
    author: 'Jonas F., COO at Youth in Action Europe',
    rating: 5,
  },
@@ -58,19 +58,19 @@ const reviews: Array<Review> = [
  },
  {
    title: 'Our community feels seen and heard.',
-    body: 'With EngageOS, we integrated storytelling, campaigns, and microdonations into a single, smooth experience.',
+    body: 'With ThreeFold, we integrated storytelling, campaigns, and microdonations into a single, smooth experience.',
    author: 'Nicolas R., Communications Lead at OurStories Foundation',
    rating: 5,
  },
  {
-    title: 'EngageOS scales with us.',
+    title: 'ThreeFold scales with us.',
    body: 'We piloted in 2 cities and now run campaigns across 7 countries—all on the same platform. It grows with our ambition.',
    author: 'Delphine A., Global Lead at Future Farmers',
    rating: 5,
  },
  {
    title: 'This platform is our movement.',
-    body: 'Before EngageOS, our digital presence was scattered. Now we have a true home where our supporters connect and take action.',
+    body: 'Before ThreeFold, our digital presence was scattered. Now we have a true home where our supporters connect and take action.',
    author: 'Ravi P., Strategy Director at Clean Energy for All',
    rating: 5,
  },
@@ -259,7 +259,7 @@ export function Reviews() {
          id="reviews-title"
          className="text-3xl font-medium tracking-tight text-white sm:text-center"
        >
-          Everyone is changing their life with EngageOS.
+          Everyone is changing their life with ThreeFold.
        </h2>
        <p className="mt-2 lg:text-lg text-base text-gray-300 sm:text-center">
          Thousands of people have doubled their net-worth in the last 30 days.
--- a/src/components/SecondaryFeatures.tsx
+++ b/src/components/SecondaryFeatures.tsx
@@ -58,7 +58,7 @@ export function SecondaryFeatures() {
            The Platform Built for Purpose-driven Organizations
          </h2>
          <p className="mt-4 lg:text-lg text-base text-gray-600">
-            EngageOS is the first plug-and-play engagement infrastructure built for civil society. From Red Cross OS to Montessori OS, any org can launch their own digital headquarters—no tech team needed.
+            ThreeFold is the first plug-and-play engagement infrastructure built for civil society. From Red Cross OS to Montessori OS, any org can launch their own digital headquarters—no tech team needed.
          </p>
        </div>
        <div className="relative overflow-hidden pt-16">
--- a/src/components/Spotlight.tsx
+++ b/src/components/Spotlight.tsx
@@ -2,7 +2,7 @@

 import React from "react";
 import { cn } from "@/lib/utils";
-import { Spotlight } from "@/components/ui/spotlight";
+import { Spotlight } from "@/components/ui/Spotlight";
 import { Logomark } from "@/components/Logo";
 import { Button } from "@/components/Button";

@@ -22,23 +22,23 @@ export function SpotlightPreview() {
      />
      <div className="relative z-10 mx-auto w-full max-w-7xl p-4 pt-20 md:pt-0">
        <div className="flex justify-center mb-6">
-           <div className="mb-4 relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+           <div className="mb-4 relative rounded-full px-3 py-1 text-sm/6 text-gray-700 ring-1 ring-gray-900/10 hover:ring-gray-900/20 animate-fade-in-delay-1">
              Announcing The New TF Marketplace.{' '}
-              <a href="#" className="font-semibold text-white hover:text-gray-200">
+              <a href="#" className="font-semibold text-white hover:text-gray-800">
                <span aria-hidden="true" className="absolute inset-0" />
                Read more <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
        </div>

-        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl">
+        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text tracking-tighter text-center text-4xl font-semibold text-transparent lg:text-6xl animate-fade-in-delay-2">
          Built by Everyone <br /> for Everyone.
        </h1>
-        <p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-300">
+        <p className="mx-auto mt-8 max-w-lg text-center text-base lg:text-xl font-light text-neutral-200 animate-fade-in-delay-3">
          ThreeFold is a fully operational, decentralized internet infrastructure – deployed locally, scalable globally, and owned and powered by the people.
        </p>
-        <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4">
-          <Button href="/login" variant="outline" color="gray">
+        <div className="mt-8 flex flex-col sm:flex-row justify-center gap-4 animate-fade-in-delay-4">
+          <Button href="/login" variant="glass">
            Start Building
          </Button>
          <Button href="#" variant="outline" color="gray">
--- a/src/components/StackSection.tsx
+++ b/src/components/StackSection.tsx
@@ -1,11 +1,16 @@
 "use client";

 import { StackedCubes } from "@/components/ui/StackedCubes";
+import { Button } from "@/components/Button";
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";

 export function StackSectionPreview() {
+  const ref = useRef(null);
+  const isInView = useInView(ref);

  return (
-    <section className="w-full bg-transparent px-4 py-8 sm:px-6 sm:pb-12 lg:px-8 relative">
+    <section ref={ref} className="w-full bg-transparent px-4 py-8 sm:px-6 sm:pb-12 lg:px-8 relative">
    {/* Gradient Blob Component */}
      <div className="absolute w-[400px] h-[200px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-40 rounded-full blur-[150px] bottom-[200px] left-[-150px] z-0" />
      <div className="absolute w-[200px] h-[100px] bg-gradient-to-br from-[#505050] to-[#7e7e7e] opacity-50 rounded-full blur-[150px] top-[200px] right-[-150px] z-0" />
@@ -13,18 +18,40 @@ export function StackSectionPreview() {
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
          {/* Left Column - Text (1/3 width) */}
          <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
-            <h2 className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+            <motion.h2
+              className="text-xl sm:text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.2 }}
+            >
              A Decentralized Infrastructure Layer
-            </h2>
-            <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
+            </motion.h2>
+            <motion.p
+              className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base"
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.4 }}
+            >
              We have built a foundational platform that runs directly on bare metal, offering a scalable solution focused on the essential building blocks of the Internet and Cloud: compute, data, and network.
-            </p>
-            <button className="mt-4" variant="primary" color="transparent" href="https://threefold.io/build" >Discover How It Works →</button>
+            </motion.p>
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.6 }}
+            >
+              <Button className="mt-12" variant="outline"  href="https://threefold.io/build" >Discover How It Works →</Button>
+            </motion.div>
          </div>
          
          {/* Right Column - Stacked Cubes (2/3 width) */}
          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2">
-            <StackedCubes />
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+              transition={{ duration: 0.8, delay: 0.3 }}
+            >
+              <StackedCubes />
+            </motion.div>
          </div>
        </div>
      </div>
--- a/src/components/TfDashboard.tsx
+++ b/src/components/TfDashboard.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { CloudArrowUpIcon, LockClosedIcon, ServerIcon } from '@heroicons/react/20/solid'
+import { motion } from 'framer-motion'
+import { Button } from './Button'
+
+const features = [
+  {
+    name: 'Push to deploy.',
+    description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.',
+    icon: CloudArrowUpIcon,
+  },
+  {
+    name: 'SSL certificates.',
+    description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.',
+    icon: LockClosedIcon,
+  },
+  {
+    name: 'Database backups.',
+    description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus.',
+    icon: ServerIcon,
+  },
+]
+
+export function TfDashboard() {
+  return (
+    <div className="bg-transparent pt-24 pb-0">
+      <div className="mx-auto max-w-7xl px-4 lg:px-2">
+        <div className="relative isolate overflow-hidden bg-stat-gradient px-6 py-12 after:pointer-events-none after:absolute lg:rounded-3xl sm:px-10 sm:py-24 after:lg:rounded-3xl lg:py-24 xl:px-24">
+          <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-center lg:gap-y-0">
+            <div className="lg:row-start-2 lg:max-w-md">
+              <motion.h2
+                className="text-3xl font-semibold tracking-tight text-balance text-white sm:text-4xl"
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{delay: 0.5, duration: 0.5}}
+              >
+                Threefold Dashboard
+              </motion.h2>
+              <motion.p
+                className="mt-4 lg:mt-6 text-sm font-light text-pretty text-white lg:text-base"
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{delay: 1, duration: 0.5}}
+              >
+                ThreeFold is open for developers and system administrators. Deploy virtual machines, containers, Kubernetes clusters, web gateways, and more on top of a best-effort decentralized open source cloud.
+              </motion.p>
+              <motion.p
+                className="mt-6 text-sm font-light text-pretty text-white lg:text-base"
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{delay: 1.5, duration: 0.5}}
+              >
+                The ThreeFold Dashboard is your gateway to the new internet infrastructure. It can be used by any Web2, Web3, AI, or Edge IT workload – enabling a world of possibilities.
+              </motion.p>
+              <motion.div
+                initial={{opacity: 0}}
+                animate={{opacity: 1}}
+                transition={{delay: 2, duration: 1}}
+              >
+                <Button className="mt-8" variant="outline" href="https://dashboard.threefold.io" >Explore the Dashboard →</Button>
+              </motion.div>
+            </div>
+            <motion.img
+              alt="Product screenshot"
+              src="/images/tfdash.png"
+              width={2432}
+              height={1442}
+              className="relative z-0 max-w-xl min-w-full rounded-xl shadow-xl ring-1 ring-white/10 lg:row-span-4 lg:w-5xl lg:max-w-none"
+              whileHover={{scale: 1.05}}
+              transition={{duration: 0.5}}
+            />
+            
+          </div>
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute top-1/2 left-12 -z-10 -translate-y-1/2 transform-gpu blur-3xl lg:top-auto lg:-bottom-48 lg:translate-y-0"
+          >
+            <div
+              style={{
+                clipPath:
+                  'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+              }}
+              className="aspect-1155/678 w-288.75 bg-linear-to-tr from-[#fff4f8] to-[#97979d] opacity-20"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/Tractions.tsx
+++ b/src/components/Tractions.tsx
@@ -61,7 +61,7 @@ export default function Tractions() {
              Trusted by Changemakers worldwide
            </p>
            <p className="mt-6 lg:text-lg text-base text-gray-300">
-                EngageOS powers the digital headquarters for over 300,000 users across 50+ countries. From grassroots NGOs to global movements, our platform is built to scale impact, not just numbers.
+                ThreeFold powers the digital headquarters for over 300,000 users across 50+ countries. From grassroots NGOs to global movements, our platform is built to scale impact, not just numbers.
            </p>
            <dl className="mt-16 grid max-w-xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 xl:mt-16">
              {stats.map((stat) => (
--- a/src/images/Engage.svg
+++ b/src/images/Engage.svg
--- a/src/images/app_screenshot.png
+++ b/src/images/app_screenshot.png
--- a/src/images/phone-frame.svg
+++ b/src/images/phone-frame.svg
@@ -1,231 +0,0 @@
-<svg width="366" height="729" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g mask="url(#mask)">
-    <g filter="url(#a)">
-      <path
-        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
-        fill="url(#b)" />
-      <path
-        d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
-        fill="url(#c)" />
-    </g>
-    <g filter="url(#d)">
-      <path
-        d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
-        fill="url(#e)" />
-      <path
-        d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
-        fill="url(#f)" fill-opacity=".1" />
-    </g>
-    <g filter="url(#g)">
-      <path
-        d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
-        fill="url(#h)" />
-      <path
-        d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
-        fill="url(#i)" fill-opacity=".1" />
-    </g>
-    <g filter="url(#j)">
-      <path
-        d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
-        fill="url(#k)" />
-      <path
-        d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
-        fill="url(#l)" fill-opacity=".1" />
-    </g>
-    <g filter="url(#m)">
-      <path
-        d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
-        fill="url(#n)" />
-      <path
-        d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
-        fill="url(#o)" fill-opacity=".1" />
-    </g>
-    <path
-      d="M305 14.5H59c-24.577 0-44.5 19.923-44.5 44.5v615c0 23.472 19.028 42.5 42.5 42.5h250c23.472 0 42.5-19.028 42.5-42.5V59c0-24.577-19.923-44.5-44.5-44.5Z"
-      stroke="url(#p)" stroke-opacity=".5" />
-    <g filter="url(#q)" shape-rendering="crispEdges">
-      <path
-        d="M16 59c0-23.748 19.252-43 43-43h246c23.748 0 43 19.252 43 43v615c0 23.196-18.804 42-42 42H58c-23.196 0-42-18.804-42-42V59Z"
-        fill="url(#r)" fill-opacity=".3" />
-      <path
-        d="M305 15.5H59c-24.024 0-43.5 19.476-43.5 43.5v615c0 23.472 19.028 42.5 42.5 42.5h248c23.472 0 42.5-19.028 42.5-42.5V59c0-24.024-19.476-43.5-43.5-43.5Z"
-        stroke="#000" stroke-opacity=".07" />
-    </g>
-    <g filter="url(#s)">
-      <rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4" />
-    </g>
-  </g>
-  <defs>
-    <mask id="mask">
-      <rect width="366" height="729" fill="#fff" />
-      <path fill-rule="evenodd" clip-rule="evenodd"
-        d="M89.728 24a4.213 4.213 0 0 1 4.213 4.212v2.527c0 10.235 8.3 18.532 18.539 18.532h139.04c10.239 0 18.539-8.297 18.539-18.532v-2.527A4.212 4.212 0 0 1 274.272 24h32.864C325.286 24 340 38.71 340 56.853v618.295c0 18.144-14.714 32.853-32.864 32.853H56.864c-18.15 0-32.864-14.709-32.864-32.853V56.853C24 38.709 38.714 24 56.864 24h32.864Z"
-        fill="#000" />
-    </mask>
-    <linearGradient id="e" x1="1.004" y1="123.367" x2="5" y2="123.367" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D4D4D4" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </linearGradient>
-    <linearGradient id="f" x1="3.002" y1="108.991" x2="3.002" y2="116.75" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717" />
-      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="h" x1="1.004" y1="190.867" x2="5" y2="190.867" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D4D4D4" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </linearGradient>
-    <linearGradient id="i" x1="3.002" y1="163.991" x2="3.002" y2="178.497" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717" />
-      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="k" x1="1.004" y1="260.867" x2="5" y2="260.867" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#D4D4D4" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </linearGradient>
-    <linearGradient id="l" x1="3.002" y1="233.991" x2="3.002" y2="248.497" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717" />
-      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="n" x1="362.004" y1="226.25" x2="366" y2="226.25" gradientUnits="userSpaceOnUse">
-      <stop offset=".124" stop-color="#E6E6E6" />
-      <stop offset="1" stop-color="#D4D4D4" />
-    </linearGradient>
-    <linearGradient id="o" x1="364.002" y1="184.991" x2="364.002" y2="208.134" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#171717" />
-      <stop offset=".783" stop-color="#171717" stop-opacity="0" />
-    </linearGradient>
-    <linearGradient id="p" x1="182" y1="15" x2="182" y2="716" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#fff" />
-      <stop offset=".381" stop-color="#fff" stop-opacity="0" />
-    </linearGradient>
-    <filter id="a" x="-1" y="-1" width="367" height="730.314" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="-2" />
-      <feGaussianBlur stdDeviation="1.5" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-      <feBlend in2="shape" result="effect1_innerShadow_104_2007" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-2" />
-      <feGaussianBlur stdDeviation="2" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0.17 0" />
-      <feBlend in2="effect1_innerShadow_104_2007" result="effect2_innerShadow_104_2007" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="2" />
-      <feGaussianBlur stdDeviation=".5" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" />
-      <feBlend in2="effect2_innerShadow_104_2007" result="effect3_innerShadow_104_2007" />
-    </filter>
-    <filter id="d" x="1.004" y="108.991" width="4.996" height="28.751" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-1" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="g" x="1.004" y="163.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-1" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="j" x="1.004" y="233.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-1" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="m" x="361.004" y="184.991" width="4.996" height="85.751" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="-1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dx="1" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="q" x="15" y="15" width="334" height="703" filterUnits="userSpaceOnUse"
-      color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="1" />
-      <feGaussianBlur stdDeviation="2.5" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <filter id="s" x="154" y="29" width="56" height="6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-      <feFlood flood-opacity="0" result="BackgroundImageFix" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="1" />
-      <feComposite in2="hardAlpha" operator="out" />
-      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0" />
-      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
-      <feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
-      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
-      <feOffset dy="1" />
-      <feGaussianBlur stdDeviation=".5" />
-      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
-      <feBlend in2="shape" result="effect2_innerShadow_104_2007" />
-    </filter>
-    <radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="matrix(0 727 -642 0 184 1)">
-      <stop stop-color="#FAFAFA" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </radialGradient>
-    <radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="matrix(0 319 -295.5 0 183.5 1)">
-      <stop stop-color="#fff" />
-      <stop offset=".533" stop-color="#fff" stop-opacity="0" />
-    </radialGradient>
-    <radialGradient id="r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
-      gradientTransform="matrix(0 689 -326.783 0 182 27)">
-      <stop offset=".319" stop-color="#D4D4D4" />
-      <stop offset="1" stop-color="#E6E6E6" />
-    </radialGradient>
-  </defs>
-</svg>
--- a/src/images/qr-code.svg
+++ b/src/images/qr-code.svg
@@ -1,118 +0,0 @@
-<svg width="80" height="80" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M3.2 0H0v3.2h3.2V0ZM3.2 3.2H0v3.2h3.2V3.2ZM3.2 6.4H0v3.2h3.2V6.4Z" fill="#171717" />
-  <path
-    d="M3.2 9.6H0v3.2h3.2V9.6ZM3.2 12.8H0V16h3.2v-3.2ZM3.2 16H0v3.2h3.2V16ZM3.2 19.2H0v3.2h3.2v-3.2ZM3.2 25.6H0v3.2h3.2v-3.2ZM3.2 35.2H0v3.2h3.2v-3.2ZM3.2 57.6H0v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M3.2 60.8H0V64h3.2v-3.2ZM3.2 64H0v3.2h3.2V64ZM3.2 67.2H0v3.2h3.2v-3.2ZM3.2 70.4H0v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M3.2 73.6H0v3.2h3.2v-3.2ZM3.2 76.8H0V80h3.2v-3.2ZM6.4 0H3.2v3.2h3.2V0ZM6.4 19.2H3.2v3.2h3.2v-3.2ZM6.4 25.6H3.2v3.2h3.2v-3.2ZM6.4 28.8H3.2V32h3.2v-3.2ZM6.4 32H3.2v3.2h3.2V32ZM6.4 35.2H3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M6.4 38.4H3.2v3.2h3.2v-3.2ZM6.4 48H3.2v3.2h3.2V48ZM6.4 51.2H3.2v3.2h3.2v-3.2ZM6.4 57.6H3.2v3.2h3.2v-3.2ZM6.4 76.8H3.2V80h3.2v-3.2ZM9.6 0H6.4v3.2h3.2V0ZM9.6 6.4H6.4v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M9.6 9.6H6.4v3.2h3.2V9.6ZM9.6 12.8H6.4V16h3.2v-3.2ZM9.6 19.2H6.4v3.2h3.2v-3.2ZM9.6 28.8H6.4V32h3.2v-3.2ZM9.6 32H6.4v3.2h3.2V32ZM9.6 41.6H6.4v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M9.6 44.8H6.4V48h3.2v-3.2ZM9.6 57.6H6.4v3.2h3.2v-3.2ZM9.6 64H6.4v3.2h3.2V64ZM9.6 67.2H6.4v3.2h3.2v-3.2ZM9.6 70.4H6.4v3.2h3.2v-3.2ZM9.6 76.8H6.4V80h3.2v-3.2ZM12.8 0H9.6v3.2h3.2V0ZM12.8 6.4H9.6v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M12.8 9.6H9.6v3.2h3.2V9.6ZM12.8 12.8H9.6V16h3.2v-3.2ZM12.8 19.2H9.6v3.2h3.2v-3.2ZM12.8 25.6H9.6v3.2h3.2v-3.2ZM12.8 38.4H9.6v3.2h3.2v-3.2ZM12.8 48H9.6v3.2h3.2V48ZM12.8 51.2H9.6v3.2h3.2v-3.2ZM12.8 57.6H9.6v3.2h3.2v-3.2ZM12.8 64H9.6v3.2h3.2V64ZM12.8 67.2H9.6v3.2h3.2v-3.2ZM12.8 70.4H9.6v3.2h3.2v-3.2ZM12.8 76.8H9.6V80h3.2v-3.2ZM16 0h-3.2v3.2H16V0ZM16 6.4h-3.2v3.2H16V6.4Z"
-    fill="#171717" />
-  <path
-    d="M16 9.6h-3.2v3.2H16V9.6ZM16 12.8h-3.2V16H16v-3.2ZM16 19.2h-3.2v3.2H16v-3.2ZM16 25.6h-3.2v3.2H16v-3.2ZM16 41.6h-3.2v3.2H16v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M16 44.8h-3.2V48H16v-3.2ZM16 57.6h-3.2v3.2H16v-3.2ZM16 64h-3.2v3.2H16V64ZM16 67.2h-3.2v3.2H16v-3.2ZM16 70.4h-3.2v3.2H16v-3.2ZM16 76.8h-3.2V80H16v-3.2ZM19.2 0H16v3.2h3.2V0ZM19.2 19.2H16v3.2h3.2v-3.2ZM19.2 28.8H16V32h3.2v-3.2ZM19.2 44.8H16V48h3.2v-3.2ZM19.2 57.6H16v3.2h3.2v-3.2ZM19.2 76.8H16V80h3.2v-3.2ZM22.4 0h-3.2v3.2h3.2V0ZM22.4 3.2h-3.2v3.2h3.2V3.2ZM22.4 6.4h-3.2v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M22.4 9.6h-3.2v3.2h3.2V9.6ZM22.4 12.8h-3.2V16h3.2v-3.2ZM22.4 16h-3.2v3.2h3.2V16ZM22.4 19.2h-3.2v3.2h3.2v-3.2ZM22.4 25.6h-3.2v3.2h3.2v-3.2ZM22.4 32h-3.2v3.2h3.2V32ZM22.4 38.4h-3.2v3.2h3.2v-3.2ZM22.4 44.8h-3.2V48h3.2v-3.2ZM22.4 51.2h-3.2v3.2h3.2v-3.2ZM22.4 57.6h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M22.4 60.8h-3.2V64h3.2v-3.2ZM22.4 64h-3.2v3.2h3.2V64ZM22.4 67.2h-3.2v3.2h3.2v-3.2ZM22.4 70.4h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M22.4 73.6h-3.2v3.2h3.2v-3.2ZM22.4 76.8h-3.2V80h3.2v-3.2ZM25.6 28.8h-3.2V32h3.2v-3.2ZM25.6 32h-3.2v3.2h3.2V32ZM25.6 35.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M25.6 38.4h-3.2v3.2h3.2v-3.2ZM25.6 44.8h-3.2V48h3.2v-3.2ZM25.6 48h-3.2v3.2h3.2V48ZM25.6 51.2h-3.2v3.2h3.2v-3.2ZM28.8 0h-3.2v3.2h3.2V0ZM28.8 19.2h-3.2v3.2h3.2v-3.2ZM28.8 22.4h-3.2v3.2h3.2v-3.2ZM28.8 28.8h-3.2V32h3.2v-3.2ZM28.8 32h-3.2v3.2h3.2V32ZM28.8 35.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M28.8 38.4h-3.2v3.2h3.2v-3.2ZM28.8 44.8h-3.2V48h3.2v-3.2ZM28.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M28.8 54.4h-3.2v3.2h3.2v-3.2ZM28.8 64h-3.2v3.2h3.2V64ZM28.8 67.2h-3.2v3.2h3.2v-3.2ZM28.8 73.6h-3.2v3.2h3.2v-3.2ZM28.8 76.8h-3.2V80h3.2v-3.2ZM32 0h-3.2v3.2H32V0ZM32 6.4h-3.2v3.2H32V6.4ZM32 16h-3.2v3.2H32V16ZM32 22.4h-3.2v3.2H32v-3.2ZM32 25.6h-3.2v3.2H32v-3.2ZM32 32h-3.2v3.2H32V32ZM32 38.4h-3.2v3.2H32v-3.2ZM32 54.4h-3.2v3.2H32v-3.2ZM32 57.6h-3.2v3.2H32v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M32 60.8h-3.2V64H32v-3.2ZM32 76.8h-3.2V80H32v-3.2ZM35.2 0H32v3.2h3.2V0ZM35.2 9.6H32v3.2h3.2V9.6ZM35.2 12.8H32V16h3.2v-3.2ZM35.2 19.2H32v3.2h3.2v-3.2ZM35.2 28.8H32V32h3.2v-3.2ZM35.2 38.4H32v3.2h3.2v-3.2ZM35.2 41.6H32v3.2h3.2v-3.2ZM35.2 48H32v3.2h3.2V48ZM35.2 57.6H32v3.2h3.2v-3.2ZM35.2 64H32v3.2h3.2V64ZM35.2 76.8H32V80h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M38.4 0h-3.2v3.2h3.2V0ZM38.4 3.2h-3.2v3.2h3.2V3.2ZM38.4 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
-  <path
-    d="M38.4 9.6h-3.2v3.2h3.2V9.6ZM38.4 12.8h-3.2V16h3.2v-3.2ZM38.4 16h-3.2v3.2h3.2V16ZM38.4 51.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M38.4 54.4h-3.2v3.2h3.2v-3.2ZM38.4 60.8h-3.2V64h3.2v-3.2ZM38.4 64h-3.2v3.2h3.2V64ZM38.4 70.4h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M38.4 73.6h-3.2v3.2h3.2v-3.2ZM38.4 76.8h-3.2V80h3.2v-3.2ZM41.6 3.2h-3.2v3.2h3.2V3.2ZM41.6 12.8h-3.2V16h3.2v-3.2ZM41.6 19.2h-3.2v3.2h3.2v-3.2ZM41.6 22.4h-3.2v3.2h3.2v-3.2ZM41.6 25.6h-3.2v3.2h3.2v-3.2ZM41.6 32h-3.2v3.2h3.2V32ZM41.6 41.6h-3.2v3.2h3.2v-3.2ZM41.6 48h-3.2v3.2h3.2V48ZM41.6 51.2h-3.2v3.2h3.2v-3.2ZM41.6 57.6h-3.2v3.2h3.2v-3.2ZM41.6 67.2h-3.2v3.2h3.2v-3.2ZM41.6 73.6h-3.2v3.2h3.2v-3.2ZM41.6 76.8h-3.2V80h3.2v-3.2ZM44.8 0h-3.2v3.2h3.2V0ZM44.8 6.4h-3.2v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path d="M44.8 22.4h-3.2v3.2h3.2v-3.2ZM44.8 32h-3.2v3.2h3.2V32ZM44.8 41.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M44.8 44.8h-3.2V48h3.2v-3.2ZM44.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M44.8 54.4h-3.2v3.2h3.2v-3.2ZM44.8 57.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M44.8 60.8h-3.2V64h3.2v-3.2ZM44.8 64h-3.2v3.2h3.2V64ZM44.8 67.2h-3.2v3.2h3.2v-3.2ZM44.8 70.4h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M44.8 73.6h-3.2v3.2h3.2v-3.2ZM44.8 76.8h-3.2V80h3.2v-3.2ZM48 0h-3.2v3.2H48V0ZM48 16h-3.2v3.2H48V16ZM48 19.2h-3.2v3.2H48v-3.2ZM48 25.6h-3.2v3.2H48v-3.2ZM48 44.8h-3.2V48H48v-3.2ZM48 54.4h-3.2v3.2H48v-3.2ZM48 57.6h-3.2v3.2H48v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M48 60.8h-3.2V64H48v-3.2ZM48 67.2h-3.2v3.2H48v-3.2ZM51.2 6.4H48v3.2h3.2V6.4ZM51.2 12.8H48V16h3.2v-3.2ZM51.2 22.4H48v3.2h3.2v-3.2ZM51.2 25.6H48v3.2h3.2v-3.2ZM51.2 28.8H48V32h3.2v-3.2ZM51.2 32H48v3.2h3.2V32ZM51.2 35.2H48v3.2h3.2v-3.2ZM51.2 41.6H48v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M51.2 44.8H48V48h3.2v-3.2ZM51.2 54.4H48v3.2h3.2v-3.2ZM51.2 60.8H48V64h3.2v-3.2ZM51.2 64H48v3.2h3.2V64ZM54.4 6.4h-3.2v3.2h3.2V6.4ZM54.4 12.8h-3.2V16h3.2v-3.2ZM54.4 19.2h-3.2v3.2h3.2v-3.2ZM54.4 28.8h-3.2V32h3.2v-3.2ZM54.4 32h-3.2v3.2h3.2V32ZM54.4 38.4h-3.2v3.2h3.2v-3.2ZM54.4 48h-3.2v3.2h3.2V48Z"
-    fill="#171717" />
-  <path d="M54.4 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M54.4 54.4h-3.2v3.2h3.2v-3.2ZM54.4 57.6h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M54.4 60.8h-3.2V64h3.2v-3.2ZM54.4 64h-3.2v3.2h3.2V64ZM54.4 67.2h-3.2v3.2h3.2v-3.2ZM54.4 70.4h-3.2v3.2h3.2v-3.2ZM54.4 76.8h-3.2V80h3.2v-3.2ZM57.6 32h-3.2v3.2h3.2V32ZM57.6 41.6h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M57.6 44.8h-3.2V48h3.2v-3.2ZM57.6 51.2h-3.2v3.2h3.2v-3.2ZM57.6 64h-3.2v3.2h3.2V64ZM57.6 70.4h-3.2v3.2h3.2v-3.2ZM57.6 76.8h-3.2V80h3.2v-3.2ZM60.8 0h-3.2v3.2h3.2V0ZM60.8 3.2h-3.2v3.2h3.2V3.2ZM60.8 6.4h-3.2v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M60.8 9.6h-3.2v3.2h3.2V9.6ZM60.8 12.8h-3.2V16h3.2v-3.2ZM60.8 16h-3.2v3.2h3.2V16ZM60.8 19.2h-3.2v3.2h3.2v-3.2ZM60.8 25.6h-3.2v3.2h3.2v-3.2ZM60.8 35.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M60.8 38.4h-3.2v3.2h3.2v-3.2ZM60.8 44.8h-3.2V48h3.2v-3.2ZM60.8 48h-3.2v3.2h3.2V48ZM60.8 51.2h-3.2v3.2h3.2v-3.2ZM60.8 57.6h-3.2v3.2h3.2v-3.2ZM60.8 64h-3.2v3.2h3.2V64ZM60.8 67.2h-3.2v3.2h3.2v-3.2ZM64 0h-3.2v3.2H64V0ZM64 19.2h-3.2v3.2H64v-3.2ZM64 28.8h-3.2V32H64v-3.2ZM64 38.4h-3.2v3.2H64v-3.2ZM64 48h-3.2v3.2H64V48ZM64 51.2h-3.2v3.2H64v-3.2ZM64 64h-3.2v3.2H64V64ZM64 73.6h-3.2v3.2H64v-3.2ZM67.2 0H64v3.2h3.2V0ZM67.2 6.4H64v3.2h3.2V6.4Z"
-    fill="#171717" />
-  <path
-    d="M67.2 9.6H64v3.2h3.2V9.6ZM67.2 12.8H64V16h3.2v-3.2ZM67.2 19.2H64v3.2h3.2v-3.2ZM67.2 28.8H64V32h3.2v-3.2ZM67.2 41.6H64v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M67.2 44.8H64V48h3.2v-3.2ZM67.2 51.2H64v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M67.2 54.4H64v3.2h3.2v-3.2ZM67.2 57.6H64v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M67.2 60.8H64V64h3.2v-3.2ZM67.2 64H64v3.2h3.2V64ZM67.2 70.4H64v3.2h3.2v-3.2Z" fill="#171717" />
-  <path d="M67.2 73.6H64v3.2h3.2v-3.2ZM70.4 0h-3.2v3.2h3.2V0ZM70.4 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
-  <path
-    d="M70.4 9.6h-3.2v3.2h3.2V9.6ZM70.4 12.8h-3.2V16h3.2v-3.2ZM70.4 19.2h-3.2v3.2h3.2v-3.2ZM70.4 28.8h-3.2V32h3.2v-3.2ZM70.4 32h-3.2v3.2h3.2V32ZM70.4 35.2h-3.2v3.2h3.2v-3.2ZM70.4 44.8h-3.2V48h3.2v-3.2ZM70.4 48h-3.2v3.2h3.2V48ZM70.4 70.4h-3.2v3.2h3.2v-3.2ZM70.4 76.8h-3.2V80h3.2v-3.2ZM73.6 0h-3.2v3.2h3.2V0Z"
-    fill="#171717" />
-  <path d="M73.6 6.4h-3.2v3.2h3.2V6.4Z" fill="#171717" />
-  <path
-    d="M73.6 9.6h-3.2v3.2h3.2V9.6ZM73.6 12.8h-3.2V16h3.2v-3.2ZM73.6 19.2h-3.2v3.2h3.2v-3.2ZM73.6 28.8h-3.2V32h3.2v-3.2ZM73.6 35.2h-3.2v3.2h3.2v-3.2ZM73.6 44.8h-3.2V48h3.2v-3.2ZM73.6 48h-3.2v3.2h3.2V48ZM73.6 51.2h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M73.6 54.4h-3.2v3.2h3.2v-3.2ZM73.6 70.4h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M73.6 73.6h-3.2v3.2h3.2v-3.2ZM76.8 0h-3.2v3.2h3.2V0ZM76.8 19.2h-3.2v3.2h3.2v-3.2ZM76.8 28.8h-3.2V32h3.2v-3.2ZM76.8 35.2h-3.2v3.2h3.2v-3.2ZM76.8 41.6h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M76.8 44.8h-3.2V48h3.2v-3.2ZM76.8 51.2h-3.2v3.2h3.2v-3.2Z" fill="#171717" />
-  <path
-    d="M76.8 54.4h-3.2v3.2h3.2v-3.2ZM76.8 64h-3.2v3.2h3.2V64ZM76.8 67.2h-3.2v3.2h3.2v-3.2ZM76.8 70.4h-3.2v3.2h3.2v-3.2Z"
-    fill="#171717" />
-  <path d="M76.8 73.6h-3.2v3.2h3.2v-3.2ZM80 0h-3.2v3.2H80V0ZM80 3.2h-3.2v3.2H80V3.2ZM80 6.4h-3.2v3.2H80V6.4Z"
-    fill="#171717" />
-  <path
-    d="M80 9.6h-3.2v3.2H80V9.6ZM80 12.8h-3.2V16H80v-3.2ZM80 16h-3.2v3.2H80V16ZM80 19.2h-3.2v3.2H80v-3.2ZM80 25.6h-3.2v3.2H80v-3.2ZM80 32h-3.2v3.2H80V32ZM80 35.2h-3.2v3.2H80v-3.2Z"
-    fill="#171717" />
-  <path
-    d="M80 38.4h-3.2v3.2H80v-3.2ZM80 44.8h-3.2V48H80v-3.2ZM80 48h-3.2v3.2H80V48ZM80 57.6h-3.2v3.2H80v-3.2ZM80 64h-3.2v3.2H80V64ZM80 67.2h-3.2v3.2H80v-3.2ZM80 70.4h-3.2v3.2H80v-3.2Z"
-    fill="#171717" />
-  <path d="M80 73.6h-3.2v3.2H80v-3.2ZM80 76.8h-3.2V80H80v-3.2Z" fill="#171717" />
-</svg>
--- a/src/images/tractions/tractions.jpg
+++ b/src/images/tractions/tractions.jpg
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -228,4 +228,106 @@
  .bg-stat-gradient {
    background: linear-gradient(to bottom, rgba(17, 17, 17, 0.5), rgba(50, 48, 49, 0.5));
  }
+
+  .btn-new-gradient {
+    background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%);
+    color: #545853;
+  }
+
+  .btn-new-gradient:hover {
+    background: radial-gradient(circle, rgba(230, 245, 236, 0.8) 0%, rgba(172, 193, 232, 0.8) 100%);
+    color: #545853;
+  }
+
+  .btn-new-gradient:active {
+    background: radial-gradient(circle, rgba(230, 245, 236, 0.6) 0%, rgba(172, 193, 232, 0.6) 100%);
+    color: #545853;
+  }
+
+  .bg-gradient-soft {
+    background: #e6f5ec;
+    background: radial-gradient(circle, rgba(230, 245, 236, 1) 0%, rgba(172, 193, 232, 1) 100%);
+  }
+
+    .bg-gradient-dark {
+    background: #e6f5ec;
+    background: radial-gradient(circle, rgb(204, 255, 225) 0%, rgb(156, 186, 240) 100%);
+  }
+
+  .bg-gradient-neutral {
+    @apply bg-gradient-to-b from-neutral-50 to-neutral-400;
+    /* Recommended text colors for good contrast */
+    color: #1f2937; /* neutral-800 for light text */
+  }
+
+  /* Alternative text color variants */
+  .bg-gradient-neutral .text-light {
+    color: #374151; /* neutral-700 */
+  }
+
+  .bg-gradient-neutral .text-medium {
+    color: #4b5563; /* neutral-600 */
+  }
+
+  .bg-gradient-neutral .text-dark {
+    color: #1f2937; /* neutral-800 */
+  }
+
+  /* Text gradient utilities */
+  .text-gradient-neutral {
+    background: linear-gradient(to right, rgb(249, 250, 251), rgb(75, 85, 99));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .text-gradient-neutral-vertical {
+    background: linear-gradient(to bottom, rgb(249, 250, 251), rgb(126, 126, 126));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Variations with different opacity levels */
+  .text-gradient-neutral-light {
+    background: linear-gradient(to right, rgba(249, 250, 251, 0.8), rgba(75, 85, 99, 0.8));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .text-gradient-neutral-dark {
+    background: linear-gradient(to right, rgba(156, 163, 175, 0.8), rgba(31, 41, 55, 1));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* Reusable animation effects */
+  .animate-fade-in-delay-1 {
+    animation: fadeInUp 0.8s ease-out 0.2s both;
+  }
+
+  .animate-fade-in-delay-2 {
+    animation: fadeInUp 0.8s ease-out 0.4s both;
+  }
+
+  .animate-fade-in-delay-3 {
+    animation: fadeInUp 0.8s ease-out 0.6s both;
+  }
+
+  .animate-fade-in-delay-4 {
+    animation: fadeInUp 0.8s ease-out 0.8s both;
+  }
+
+  @keyframes fadeInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
--- a/start.sh
+++ b/start.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+
+# HERO Personal Agent Website - Development Server
+# This script starts the development server with hot reload
+
+echo "🚀 Starting HERO Personal Agent Website Development Server..."
+echo "============================================================="
+
+# Check if node_modules exists
+if [ ! -d "node_modules" ]; then
+    echo "❌ Dependencies not installed. Please run './install.sh' first."
+    exit 1
+fi
+
+# Start the development server
+pnpm run dev -p 3010
+
Author	SHA1	Message	Date
sasha-astiadi	cd8687db54	add favico	2025-09-09 16:04:02 +02:00
sasha-astiadi	c59c905945	ok	2025-09-08 17:48:06 +02:00
sasha-astiadi	14435d8f63	ok	2025-09-08 17:42:19 +02:00
sasha-astiadi	987550c7c6	ok	2025-09-08 17:22:33 +02:00
sasha-astiadi	ecd52b6ada	ok	2025-09-08 17:19:59 +02:00
sasha-astiadi	7e2b30fbcc	add	2025-09-08 17:18:54 +02:00
sasha-astiadi	a69f35c9a7	ALL	2025-09-08 15:27:33 +02:00
sasha-astiadi	4bea627e6d	add -a	2025-09-05 16:39:35 +02:00
sasha-astiadi	6d35b9dd05	add	2025-09-05 16:23:53 +02:00
sasha-astiadi	40d1d5ed24	add	2025-09-05 15:44:26 +02:00
sasha-astiadi	ddbe3c795d	add	2025-09-05 15:35:19 +02:00
sasha-astiadi	1df765c4aa	ok	2025-09-05 15:28:52 +02:00
sasha-astiadi	c8a3b455fe	ok	2025-09-05 14:35:51 +02:00
sasha-astiadi	75aa34ae6f	add chmod +x *.sh	2025-08-14 15:33:24 +02:00
despiegk	0310ecfb31	...	2025-08-14 12:56:26 +02:00