diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 66e47ab..01099fe 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -33,7 +33,7 @@ export const Header = () => { transition={{ duration: 0.6, ease: 'easeOut' }} className={cn( 'fixed inset-x-0 top-0 z-50 transition-all duration-500', - isScrolled ? 'bg-white/95 shadow-lg backdrop-blur-sm' : 'bg-transparent', + isScrolled ? 'bg-mist/95 shadow-lg backdrop-blur-sm' : 'bg-transparent', )} >
@@ -101,7 +101,7 @@ export const Header = () => { animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -16 }} transition={{ duration: 0.25, ease: 'easeOut' }} - className="border-t border-slate-100 bg-white/95 px-6 py-4 shadow-lg md:hidden" + className="border-t border-slate-100 bg-mist/95 px-6 py-4 shadow-lg md:hidden" >
{navItems.map(({ label, to }) => ( diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index b2de289..887273b 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -1,24 +1,33 @@ import { type ReactNode } from 'react'; +import { useLocation } from 'react-router-dom'; import { Header } from './Header'; import { Footer } from './Footer'; import { ScrollToTop } from './ScrollToTop'; +import { cn } from '../../lib/cn'; type LayoutProps = { children: ReactNode; }; export const Layout = ({ children }: LayoutProps) => { + const { pathname } = useLocation(); + const isHome = pathname === '/'; + return ( -
+
- {/* Decorative gradient blurs */} -
-
-
-
-
{children}
-
+
+ {children} +
+ {!isHome &&
}
); }; diff --git a/src/index.css b/src/index.css index 8764a3a..35729a9 100644 --- a/src/index.css +++ b/src/index.css @@ -5,8 +5,8 @@ @tailwind utilities; :root { - color: #111827; - background-color: #f6f8fb; + color: #000000; + background-color: rgb(252 252 246); } html, diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 42d4799..a009fb0 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -1,17 +1,64 @@ -import { HomeHero } from './components/HomeHero'; -import { CoreTechnology } from './components/CoreTechnology'; -import { ImpactBanner } from './components/ImpactBanner'; -import { WhyGeomind } from './components/WhyGeomind'; -import { FinalCallToAction } from './components/FinalCallToAction'; +import { HeroSection } from './components/HeroSection'; +import { ScrollLockedSection } from './components/ScrollLockedSection'; +import { CtaSection } from './components/CtaSection'; +import { FooterSection } from './components/FooterSection'; + +const sections = [ + { + id: 'deploy', + eyebrow: 'Deploy', + title: 'Launch seamlessly across your environments.', + description: + 'Use this space to outline the deployment story. Highlight speed, reliability, or any differentiators that matter for your product rollout.', + }, + { + id: 'plug_play', + eyebrow: 'Plug & Play', + title: 'Connect data sources without orchestration headaches.', + description: + 'Describe how integrations work and communicate the ease of getting started. Keep the copy short and scannable.', + }, + { + id: 'slice', + eyebrow: 'Slice', + title: 'Break complex geospatial datasets into digestible layers.', + description: + 'Talk through the slicing concept in a sentence or two. This is placeholder text while the final story is drafted.', + }, + { + id: 'global', + eyebrow: 'Global', + title: 'Stay synchronized across every region you operate in.', + description: + 'Explain the global coverage or synchronization narrative you want to share. Replace this block with final messaging later.', + }, + { + id: 'profit', + eyebrow: 'Profit', + title: 'Make the commercial case with defensible metrics.', + description: + 'Use these lines to tease the ROI conversation. Mention efficiency, cost savings, or other proof points once they are ready.', + }, + { + id: 'usecases', + eyebrow: 'Use Cases', + title: 'Show how teams activate the platform day-to-day.', + description: + 'Imagine this section as a carousel or story. For now, it is a placeholder where future customer narratives will land.', + }, +]; export const HomePage = () => { return ( -
- - - - - +
+
+ + {sections.map((section) => ( + + ))} + +
+
); }; diff --git a/src/pages/home/components/CoreTechnology.tsx b/src/pages/home/components/CoreTechnology.tsx deleted file mode 100644 index 30d9237..0000000 --- a/src/pages/home/components/CoreTechnology.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { motion } from 'framer-motion'; - -const features = [ - { - title: 'Self Healing & Prederministic Deployments', - description: - "GeoMind nodes detect and fix issues automatically with zero downtime. Every deployment is verifiable and runs exactly the same anywhere, fully autonomous, resilient, and predictable.", - }, - { - title: 'Unbreakable Storage', - description: - 'Data is encrypted and encoded using forward-error-correction codes, not replication. Even if parts of the network fail, data can always be rebuilt, making it unhackable, permanent, and loss-proof.', - }, - { - title: 'Unbreakable Network', - description: - 'Runs on top of the internet, finding the fastest path for data. With end-to-end quantum-safe encryption and self-optimizing routing, it creates a layer that cannot be hacked or shut down.', - }, -]; - -export const CoreTechnology = () => { - return ( -
-
-

- Core Technology -

-

- The Foundation of a New Datacenter Standard -

-

- GeoMind is built on a modular, self-healing datacenter architecture designed for unmatched - efficiency, reliability, and sovereignty. Every component works autonomously yet integrates - seamlessly into a global, planet-scale infrastructure. -

-
-
- {features.map((feature, index) => ( - - - {index + 1} - -

{feature.title}

-

{feature.description}

- - ))} -
-
- ); -}; diff --git a/src/pages/home/components/CtaSection.tsx b/src/pages/home/components/CtaSection.tsx new file mode 100644 index 0000000..40b0174 --- /dev/null +++ b/src/pages/home/components/CtaSection.tsx @@ -0,0 +1,48 @@ +import { motion } from 'framer-motion'; + +export const CtaSection = () => { + return ( +
+
+ + Ready when you are + + + Drop in your call to action headline and invite people forward. + + + Use this block to reinforce the value proposition and give your visitor a clear next step. + Consider pairing it with a lead capture form or direct contact pathway later. + + + Placeholder CTA + +
+
+ ); +}; diff --git a/src/pages/home/components/FinalCallToAction.tsx b/src/pages/home/components/FinalCallToAction.tsx deleted file mode 100644 index 6219e4f..0000000 --- a/src/pages/home/components/FinalCallToAction.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { motion } from 'framer-motion'; -import { PrimaryButton } from '../../../components/ui/PrimaryButton'; - -export const FinalCallToAction = () => { - return ( -
- -

- {' '} - - The Datacenter Standard - {' '} -
- for the next era of Cloud and AI. -

-

- For years we've been pioneering infrastructure technologies that power the world's most demanding cloud workloads. Learn more about our team and expertise behind our mission. -

-
- About Us -
- -
- ); -}; diff --git a/src/pages/home/components/FooterSection.tsx b/src/pages/home/components/FooterSection.tsx new file mode 100644 index 0000000..415d394 --- /dev/null +++ b/src/pages/home/components/FooterSection.tsx @@ -0,0 +1,50 @@ +import { Link } from 'react-router-dom'; + +const footerLinks = [ + { label: 'About', to: '/about' }, + { label: 'Technology', to: '/technology' }, + { label: 'Use Cases', to: '/usecases' }, +]; + +export const FooterSection = () => { + const year = new Date().getFullYear(); + + return ( +
+
+
+ + Geomind + +

+ Anchor your footer copy here. Add a short positioning line or compliance text once ready. +

+
+ +
+
+ © {year} Geomind + +
+
+ ); +}; diff --git a/src/pages/home/components/HeroSection.tsx b/src/pages/home/components/HeroSection.tsx new file mode 100644 index 0000000..41a579c --- /dev/null +++ b/src/pages/home/components/HeroSection.tsx @@ -0,0 +1,48 @@ +import { motion } from 'framer-motion'; + +export const HeroSection = () => { + return ( +
+
+ + +
+ +
+ + + Geomind + +

+ Geospatial intelligence for real-world momentum. +

+

+ Introduce a compelling statement here that speaks to the transformation you deliver. + Keep it short, grounded, and ready for future storytelling. +

+ + + + Scroll to explore +
+ + Landing overview +
+ +
+
+
+ ); +}; diff --git a/src/pages/home/components/HomeHero.tsx b/src/pages/home/components/HomeHero.tsx deleted file mode 100644 index a837ebe..0000000 --- a/src/pages/home/components/HomeHero.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { motion } from 'framer-motion'; -import { PrimaryButton } from '../../../components/ui/PrimaryButton'; - -export const HomeHero = () => { - return ( -
- -
-
- - The planet's sovereign agentic cloud - - - A new generation of decentralized cloud and AI infrastructure, - secure, scalable, efficient, and sovereign by design. Deploy your own - datacenter, scale globally, and turn infrastructure into profit. - - - Technologies - - Use Cases - - -
-
- ); -}; diff --git a/src/pages/home/components/ImpactBanner.tsx b/src/pages/home/components/ImpactBanner.tsx deleted file mode 100644 index 1c74cc1..0000000 --- a/src/pages/home/components/ImpactBanner.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { motion } from 'framer-motion'; -import { useEffect, useRef } from 'react'; -import { PrimaryButton } from '../../../components/ui/PrimaryButton'; - -export const ImpactBanner = () => { - const canvasRef = useRef(null); - - useEffect(() => { - const canvas = canvasRef.current; - if (!canvas) return; - - const ctx = canvas.getContext('2d'); - if (!ctx) return; - - // Set canvas size - const resizeCanvas = () => { - canvas.width = canvas.offsetWidth; - canvas.height = canvas.offsetHeight; - }; - resizeCanvas(); - window.addEventListener('resize', resizeCanvas); - - // Grid configuration - const gridSpacing = 40; - const dotRadius = 2; - const glowRadius = 8; - const dots: Array<{ - x: number; - y: number; - baseX: number; - baseY: number; - phase: number; - speed: number; - }> = []; - - // Create grid of dots - for (let x = 0; x < canvas.width; x += gridSpacing) { - for (let y = 0; y < canvas.height; y += gridSpacing) { - dots.push({ - x, - y, - baseX: x, - baseY: y, - phase: Math.random() * Math.PI * 2, - speed: 0.5 + Math.random() * 0.5, - }); - } - } - - let animationFrameId: number; - let time = 0; - - const animate = () => { - ctx.clearRect(0, 0, canvas.width, canvas.height); - time += 0.01; - - dots.forEach((dot) => { - // Subtle floating animation - const offsetX = Math.sin(time * dot.speed + dot.phase) * 3; - const offsetY = Math.cos(time * dot.speed * 0.8 + dot.phase) * 3; - dot.x = dot.baseX + offsetX; - dot.y = dot.baseY + offsetY; - - // Pulsing opacity - const opacity = 0.15 + Math.sin(time * dot.speed + dot.phase) * 0.1; - - // Draw glow - const gradient = ctx.createRadialGradient(dot.x, dot.y, 0, dot.x, dot.y, glowRadius); - gradient.addColorStop(0, `rgba(99, 102, 241, ${opacity * 0.3})`); - gradient.addColorStop(1, 'rgba(99, 102, 241, 0)'); - ctx.fillStyle = gradient; - ctx.fillRect(dot.x - glowRadius, dot.y - glowRadius, glowRadius * 2, glowRadius * 2); - - // Draw dot - ctx.beginPath(); - ctx.arc(dot.x, dot.y, dotRadius, 0, Math.PI * 2); - ctx.fillStyle = `rgba(99, 102, 241, ${opacity + 0.2})`; - ctx.fill(); - }); - - animationFrameId = requestAnimationFrame(animate); - }; - - animate(); - - return () => { - window.removeEventListener('resize', resizeCanvas); - cancelAnimationFrame(animationFrameId); - }; - }, []); - - return ( -
- {/* Animated background canvas */} - - - {/* Content */} - -

Designed for Real-World Impact

-

- GeoMind enables enterprises and infrastructure providers to run secure, profitable, - efficient, and sovereign clouds anywhere. -

-
- Use Cases -
- -
- ); -}; diff --git a/src/pages/home/components/ScrollLockedSection.tsx b/src/pages/home/components/ScrollLockedSection.tsx new file mode 100644 index 0000000..dd5b63c --- /dev/null +++ b/src/pages/home/components/ScrollLockedSection.tsx @@ -0,0 +1,100 @@ +import { motion, useScroll, useSpring, useTransform, useMotionValueEvent } from 'framer-motion'; +import { useRef, useState } from 'react'; + +type ScrollLockedSectionProps = { + id: string; + eyebrow: string; + title: string; + description: string; +}; + +export const ScrollLockedSection = ({ + id, + eyebrow, + title, + description, +}: ScrollLockedSectionProps) => { + const sectionRef = useRef(null); + const { scrollYProgress } = useScroll({ + target: sectionRef, + 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); + + useMotionValueEvent(smoothProgress, 'change', (value) => { + setPercent(Math.round(value * 100)); + }); + + return ( +
+
+
+
+ + {eyebrow} + +
+

+ {title} +

+

{description}

+
+
+ +
+
+
+
+

+ Animation Placeholder +

+ + {percent}% + +
+
+ +
+
+ +
+
+ {Array.from({ length: 12 }).map((_, index) => ( + + Placeholder animation bar + + ))} +
+
+
+ +
+ + {percent}% + +
+
+
+
+
+
+
+ ); +}; diff --git a/src/pages/home/components/WhyGeomind.tsx b/src/pages/home/components/WhyGeomind.tsx deleted file mode 100644 index af2f8bc..0000000 --- a/src/pages/home/components/WhyGeomind.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { motion } from 'framer-motion'; - -const pillars = [ - { - title: 'Sovereign by Design', - points: [ - 'Stay compliant with in-country data requirements.', - 'Each node operates independently or as part of a global, trusted network.', - 'Maintain total ownership of your infrastructure and data.', - ], - }, - { - title: 'Efficient and Sustainable', - points: [ - 'Up to 10x less energy for specific workloads.', - 'Removes layers of legacy software overhead.', - 'Lower operational cost and carbon footprint.', - ], - }, - { - title: 'Profitable Infrastructure', - points: [ - 'Turn existing datacenters, offices, or parking lots into productive assets.', - 'Use capacity for your workloads and sell the excess to the network.', - 'ROI can be 3x higher than traditional models.', - ], - }, -]; - -export const WhyGeomind = () => { - return ( -
-
-
- -

Why GeoMind

-

- Traditional datacenters are increasingly limited by geopolitics, inefficiency, and energy - waste. GeoMind eliminates those constraints with a resilient, autonomous infrastructure that - delivers planetary scalability and sovereign performance anywhere in the world. -

- -
- {pillars.map((pillar, index) => ( - -

{pillar.title}

-
    - {pillar.points.map((point) => ( -
  • - - {point} -
    • - ))} -
- - ))} -
-
- ); -}; diff --git a/tailwind.config.js b/tailwind.config.js index 2d3abf2..2bde7f7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,8 +20,8 @@ export default { 800: '#343b8a', 900: '#2d336c', }, - ink: '#111827', - mist: '#f6f8fb', + ink: '#000000', + mist: '#fcfcf6', }, boxShadow: { subtle: '0 20px 45px -25px rgba(18, 28, 132, 0.35)',