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

ready to add animations

Browse Source
This commit is contained in:
Emre
2025-10-11 02:55:49 +03:00
parent 60fa49c0ef
commit 16c1a09bc4
9 changed files with 109 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,14 +3,12 @@ import { motion } from 'framer-motion';
export const HeroSection = () => {
return (
<section className="relative snap-start">
<div className="relative flex h-screen w-full flex-col overflow-hidden bg-mist">
<div className="relative flex h-screen w-full flex-col overflow-hidden bg-black">
<video className="absolute inset-0 h-full w-full object-cover" autoPlay muted loop playsInline>
<source src="/videos/hero.mp4" type="video/mp4" />
</video>
<div className="absolute inset-0 bg-mist/70 backdrop-blur-[2px]" />
<div className="relative z-10 mx-auto flex h-full w-full max-w-7xl flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-20">
<div className="relative z-10 flex h-full w-full flex-col justify-between px-6 pb-16 pt-32 sm:px-10 lg:px-16">
<motion.div
initial={{ opacity: 0, y: 40 }}
animate={{ opacity: 1, y: 0 }}
@@ -18,10 +16,10 @@ export const HeroSection = () => {
className="max-w-3xl space-y-6"
>
<h1 className="text-4xl font-medium leading-tight text-ink sm:text-5xl md:text-6xl">
<h1 className="text-4xl font-medium leading-tight text-white sm:text-5xl md:text-6xl">
The Planet's Sovereign Agentic Cloud
</h1>
<p className="max-w-xl text-lg text-ink/80">
<p className="max-w-xl text-lg text-white">
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.
@@ -32,11 +30,11 @@ export const HeroSection = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, ease: 'easeOut', delay: 0.4 }}
className="flex items-center justify-between text-xs uppercase tracking-[0.3em] text-ink/60"
className="flex items-center justify-between text-xs uppercase tracking-[0.3em] text-white"
>
<span>Scroll to explore</span>
<div className="flex items-center gap-3">
<span className="h-px w-16 bg-ink/40" />
<span className="h-px w-16 bg-white/60" />
<span>Landing overview</span>
</div>
</motion.div>