emre/www_geomind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Emre
2025-10-11 00:33:25 +03:00
parent f450d61ccf
commit 60fa49c0ef
5 changed files with 90 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/layout/Header.tsx
View File

@@ -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"

2
src/pages/home/components/CtaSection.tsx
View File

@@ -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 }}

2
src/pages/home/components/FooterSection.tsx
View File

@@ -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">

11
src/pages/home/components/HeroSection.tsx
View File

@@ -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>

103
src/pages/home/components/ScrollLockedSection.tsx
View File

@@ -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>