From 60fa49c0efb496171ba0c2642c7f9b654d253b75 Mon Sep 17 00:00:00 2001
From: Emre <emre@Emres-MacBook-Air.local>
Date: Sat, 11 Oct 2025 00:33:25 +0300
Subject: [PATCH] updates

---
 src/components/layout/Header.tsx              |  65 +++++------
 src/pages/home/components/CtaSection.tsx      |   2 +-
 src/pages/home/components/FooterSection.tsx   |   2 +-
 src/pages/home/components/HeroSection.tsx     |  11 +-
 .../home/components/ScrollLockedSection.tsx   | 103 +++++++++---------
 5 files changed, 90 insertions(+), 93 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 01099fe..b39f9a2 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -4,9 +4,8 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { cn } from '../../lib/cn';
 
 const navItems = [
-  { label: 'Home', to: '/' },
   { label: 'About', to: '/about' },
-  { label: 'Technology', to: '/technology' },
+  { label: 'Solutions', to: '/technology' },
   { label: 'Use Cases', to: '/usecases' },
 ];
 
@@ -36,36 +35,38 @@ export const Header = () => {
         isScrolled ? 'bg-mist/95 shadow-lg backdrop-blur-sm' : 'bg-transparent',
       )}
     >
-      <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 lg:px-8">
-        <Link to="/" className="flex items-center">
-          <img
-            src="/images/geomind_logo.png"
-            alt="Geomind logo"
-            className="h-12 w-auto object-contain"
-          />
-        </Link>
-        <nav className="hidden items-center gap-8 md:flex">
-          {navItems.map(({ label, to }) => (
-            <NavLink
-              key={to}
-              to={to}
-              className={({ isActive }) =>
-                cn(
-                  'text-sm font-medium uppercase tracking-wide text-slate-500 transition-colors duration-300',
-                  isActive && 'text-brand-600',
-                )
-              }
-            >
-              {label}
-            </NavLink>
-          ))}
-          <a
-            href="mailto:support@threefold.tech"
-            className="rounded-full border border-brand-200 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:border-brand-700 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
-          >
-            Contact
-          </a>
-        </nav>
+      <div className="mx-auto flex max-w-6xl items-center justify-between py-4">
+        <div className="flex items-center gap-8">
+          <Link to="/" className="flex items-center">
+            <img
+              src="/images/geomind_logo.png"
+              alt="Geomind logo"
+              className="h-8 w-auto object-contain"
+            />
+          </Link>
+          <nav className="hidden items-center gap-8 md:flex">
+            {navItems.map(({ label, to }) => (
+              <NavLink
+                key={to}
+                to={to}
+                className={({ isActive }) =>
+                  cn(
+                    'text-sm font-medium uppercase tracking-wide text-slate-500 transition-colors duration-300',
+                    isActive && 'text-brand-600',
+                  )
+                }
+              >
+                {label}
+              </NavLink>
+            ))}
+          </nav>
+        </div>
+        <a
+          href="mailto:support@threefold.tech"
+          className="rounded-full border border-brand-200 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:border-brand-700 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
+        >
+          Contact
+        </a>
         <button
           type="button"
           aria-label="Toggle navigation"
diff --git a/src/pages/home/components/CtaSection.tsx b/src/pages/home/components/CtaSection.tsx
index 40b0174..11d0183 100644
--- a/src/pages/home/components/CtaSection.tsx
+++ b/src/pages/home/components/CtaSection.tsx
@@ -2,7 +2,7 @@ import { motion } from 'framer-motion';
 
 export const CtaSection = () => {
   return (
-    <section className="snap-start bg-mist">
+    <section className="snap-start bg-[rgb(172,173,175)]">
       <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-40 text-center sm:px-10">
         <motion.span
           initial={{ opacity: 0, y: 20 }}
diff --git a/src/pages/home/components/FooterSection.tsx b/src/pages/home/components/FooterSection.tsx
index 415d394..cac518c 100644
--- a/src/pages/home/components/FooterSection.tsx
+++ b/src/pages/home/components/FooterSection.tsx
@@ -10,7 +10,7 @@ export const FooterSection = () => {
   const year = new Date().getFullYear();
 
   return (
-    <footer className="bg-mist px-6 pb-16 pt-12 sm:px-10 lg:px-20">
+    <footer className="bg-[rgb(172,173,175)] px-6 pb-16 pt-12 sm:px-10 lg:px-20">
       <div className="mx-auto flex w-full max-w-7xl flex-col gap-12 border-t border-ink/10 pt-12 md:flex-row md:items-center md:justify-between">
         <div className="space-y-3">
           <span className="text-xs font-semibold uppercase tracking-[0.35em] text-ink/60">
diff --git a/src/pages/home/components/HeroSection.tsx b/src/pages/home/components/HeroSection.tsx
index 41a579c..d95b45e 100644
--- a/src/pages/home/components/HeroSection.tsx
+++ b/src/pages/home/components/HeroSection.tsx
@@ -17,15 +17,14 @@ export const HeroSection = () => {
             transition={{ duration: 0.8, ease: 'easeOut' }}
             className="max-w-3xl space-y-6"
           >
-            <span className="text-xs font-semibold uppercase tracking-[0.4em] text-ink/70">
-              Geomind
-            </span>
+           
             <h1 className="text-4xl font-medium leading-tight text-ink sm:text-5xl md:text-6xl">
-              Geospatial intelligence for real-world momentum.
+              The Planet's Sovereign Agentic Cloud
             </h1>
             <p className="max-w-xl text-lg text-ink/80">
-              Introduce a compelling statement here that speaks to the transformation you deliver.
-              Keep it short, grounded, and ready for future storytelling.
+              A new generation of decentralized cloud and AI infrastructure.
+              <br />
+              Secure, scalable, efficient, and sovereign by design. Deploy your own datacenter, scale globally, and turn infrastructure into profit.
             </p>
           </motion.div>
 
diff --git a/src/pages/home/components/ScrollLockedSection.tsx b/src/pages/home/components/ScrollLockedSection.tsx
index dd5b63c..3be5702 100644
--- a/src/pages/home/components/ScrollLockedSection.tsx
+++ b/src/pages/home/components/ScrollLockedSection.tsx
@@ -1,4 +1,4 @@
-import { motion, useScroll, useSpring, useTransform, useMotionValueEvent } from 'framer-motion';
+import { motion, useScroll, useSpring, useMotionValueEvent } from 'framer-motion';
 import { useRef, useState } from 'react';
 
 type ScrollLockedSectionProps = {
@@ -8,6 +8,8 @@ type ScrollLockedSectionProps = {
   description: string;
 };
 
+const TAB_ITEMS = ['Inbox 24', 'Meetings 8', 'Subscriptions 2', 'Newsletters 6', 'Shopping 8'];
+
 export const ScrollLockedSection = ({
   id,
   eyebrow,
@@ -20,78 +22,73 @@ export const ScrollLockedSection = ({
     offset: ['start start', 'end end'],
   });
   const smoothProgress = useSpring(scrollYProgress, { stiffness: 120, damping: 30, mass: 0.4 });
-  const cardFillWidth = useTransform(smoothProgress, [0, 1], ['12%', '100%']);
-  const cardFillOpacity = useTransform(smoothProgress, [0, 1], [0.25, 0.85]);
-  const barScale = useTransform(smoothProgress, [0, 1], [0.3, 1]);
   const [percent, setPercent] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(0);
 
   useMotionValueEvent(smoothProgress, 'change', (value) => {
-    setPercent(Math.round(value * 100));
+    const percentage = Math.round(value * 100);
+    setPercent(percentage);
+    const nextIndex = Math.min(
+      TAB_ITEMS.length - 1,
+      Math.round(value * (TAB_ITEMS.length - 1)),
+    );
+    setActiveIndex(nextIndex);
   });
 
   return (
-    <section id={id} ref={sectionRef} className="relative h-[200vh] snap-start">
+    <section id={id} ref={sectionRef} className="relative h-[200vh] snap-start bg-[rgb(172,173,175)]">
       <div className="sticky top-0 flex h-screen flex-col">
         <div className="mx-auto flex h-full w-full max-w-7xl flex-col justify-between px-6 py-24 sm:px-10 lg:px-20">
-          <div className="space-y-4">
-            <span className="text-xs font-semibold uppercase tracking-[0.45em] text-ink/50">
+          <div className="space-y-6">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.45em] text-ink/45">
               {eyebrow}
             </span>
-            <div className="max-w-3xl space-y-4">
-              <h2 className="text-3xl font-medium leading-tight text-ink sm:text-4xl md:text-5xl">
+            <div className="max-w-3xl space-y-3">
+              <p className="text-3xl font-semibold leading-tight text-ink sm:text-[2.25rem] sm:leading-[1.2]">
                 {title}
-              </h2>
-              <p className="text-lg text-ink/75">{description}</p>
+              </p>
+              <p className="text-lg leading-relaxed text-ink/70">{description}</p>
             </div>
           </div>
 
-          <div className="mt-16 flex flex-1 flex-col justify-end">
-            <div className="space-y-8 rounded-3xl border border-ink/10 bg-white/60 p-8 shadow-[0_22px_48px_-32px_rgba(0,0,0,0.28)] backdrop-blur">
-              <div className="space-y-4">
-                <div className="flex items-center justify-between">
-                  <p className="text-sm font-semibold uppercase tracking-[0.35em] text-ink/60">
-                    Animation Placeholder
-                  </p>
-                  <motion.span
-                    className="text-xs font-medium uppercase tracking-[0.35em] text-ink/50"
-                    style={{ opacity: smoothProgress }}
-                  >
-                    {percent}%
-                  </motion.span>
-                </div>
-                <div className="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
-                  <motion.div
-                    className="h-full origin-left rounded-full bg-ink"
-                    style={{ scaleX: smoothProgress }}
-                  />
+          <div className="mt-20 flex flex-1 flex-col justify-start">
+            <div className="flex w-full flex-1 flex-col overflow-hidden rounded-[36px] border border-ink/10 bg-mist/70 shadow-[0_26px_64px_-48px_rgba(0,0,0,0.6)] backdrop-blur">
+              <div className="flex items-center justify-between px-10 pt-10 text-[11px] font-semibold uppercase tracking-[0.35em] text-ink/45">
+                <span>Animation Placeholder</span>
+                <motion.span initial={false} animate={{ opacity: percent > 0 ? 1 : 0.3 }}>
+                  {percent}%
+                </motion.span>
+              </div>
+              <div className="flex-1 px-10 pb-12">
+                <div className="flex h-full items-center justify-center rounded-[28px] border border-dashed border-ink/15 bg-white/50 text-xs font-semibold uppercase tracking-[0.4em] text-ink/25">
+                  Content Canvas
                 </div>
               </div>
-
-              <div className="relative h-56 w-full overflow-hidden rounded-2xl border border-ink/10 bg-mist/70">
-                <div className="absolute inset-0 grid grid-cols-12 gap-2 px-8 py-10">
-                  {Array.from({ length: 12 }).map((_, index) => (
-                    <motion.span
-                      key={index}
-                      className="flex h-full w-full origin-bottom items-end justify-center rounded-full bg-ink/15"
-                      style={{ opacity: cardFillOpacity, scaleY: barScale }}
-                    >
-                      <span className="sr-only">Placeholder animation bar</span>
-                    </motion.span>
+              <div className="border-t border-ink/10 bg-mist/80 px-8 py-6">
+                <div className="flex items-center justify-between text-[11px] font-medium uppercase tracking-[0.3em] text-ink/35">
+                  {TAB_ITEMS.map((tab, index) => (
+                    <div key={tab} className="relative flex flex-1 justify-center">
+                      <span className={index === activeIndex ? 'text-ink' : 'text-ink/40'}>{tab}</span>
+                      <motion.span
+                        initial={false}
+                        animate={{ opacity: index === activeIndex ? 1 : 0 }}
+                        transition={{ duration: 0.3, ease: 'easeOut' }}
+                        className="absolute -bottom-3 left-1/2 h-1 w-16 -translate-x-1/2 rounded-full bg-ink"
+                      />
+                    </div>
                   ))}
                 </div>
-                <div className="absolute bottom-8 left-1/2 flex w-11/12 -translate-x-1/2 items-center gap-3">
-                  <div className="h-1 w-full rounded-full bg-ink/10">
-                    <motion.div
-                      className="h-full rounded-full bg-ink"
-                      style={{ width: cardFillWidth, opacity: cardFillOpacity }}
-                    />
-                  </div>
-                  <motion.span className="text-[10px] font-semibold uppercase tracking-[0.3em] text-ink/50">
-                    {percent}%
-                  </motion.span>
-                </div>
               </div>
             </div>
+            <div className="mt-10 flex justify-center">
+              <button
+                type="button"
+                className="flex items-center gap-2 rounded-full border border-ink/15 bg-white/70 px-6 py-2 text-[11px] font-semibold uppercase tracking-[0.35em] text-ink/50 shadow-[0_16px_32px_-28px_rgba(0,0,0,0.65)] transition-colors duration-300 hover:border-ink/30 hover:text-ink/70"
+              >
+                Directory
+                <span className="text-ink/30">Info</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>