diff --git a/cshare-app/src/pages/LandingPage.jsx b/cshare-app/src/pages/LandingPage.jsx new file mode 100644 index 0000000..0da6f75 --- /dev/null +++ b/cshare-app/src/pages/LandingPage.jsx @@ -0,0 +1,366 @@ +import { useState, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { ShieldIcon, ZapIcon, GlobeIcon, ArrowDownIcon, EyeIcon, LinkIcon, ClockIcon, ChartIcon, CheckIcon, CopyIcon } from '../components/Icons'; +import Footer from '../components/Footer'; +import { useScrollReveal } from '../hooks/useScrollReveal'; + +const DEMO_FILES = [ + { id: 'a', name: 'app-prototype-v2.fig', type: 'FILE', color: '#5E9EFF', size: '15.0 MB', initProgress: 100, initLink: 'cshare.app/preview/x7k2m' }, + { id: 'b', name: 'Q4-report.pdf', type: 'PDF', color: '#E84848', size: '2.4 MB', initProgress: 62 }, + { id: 'c', name: 'brand-assets.zip', type: 'ZIP', color: '#4A90FF', size: '52.0 MB', initProgress: 21 }, +]; + +function HeroPreview() { + const [files, setFiles] = useState(() => + DEMO_FILES.map((f) => ({ ...f, progress: f.initProgress, link: f.initLink || null })) + ); + + useEffect(() => { + const id = setInterval(() => { + setFiles((prev) => + prev.map((f) => { + if (f.progress >= 100) return f; + const np = Math.min(100, f.progress + Math.random() * 8 + 3); + return { + ...f, + progress: np, + link: np >= 100 + ? `cshare.app/preview/${Math.random().toString(36).slice(2, 7)}` + : f.link, + }; + }) + ); + }, 380); + return () => clearInterval(id); + }, []); + + const doneCount = files.filter((f) => f.progress >= 100).length; + + return ( +
+ {/* Panel header */} +
+
+ + {doneCount < 3 ? `${doneCount} of 3 ready to share` : 'All files ready'} + + + just now + +
+ + {/* File rows */} +
+ {files.map((file) => ( +
+
+
+ {file.type} +
+ +
+
+ {file.name} +
+
+ {file.size} +
+
+ + {file.progress >= 100 ? ( +
+ +
+ ) : ( + + {Math.round(file.progress)}% + + )} +
+ + {file.progress < 100 && ( +
+
+
+ )} + + {file.link && ( +
+ + {file.link} + + +
+ )} +
+ ))} +
+
+ ); +} + +export default function LandingPage() { + const navigate = useNavigate(); + const sectionRef = useScrollReveal(0.1); + + return ( +
+ {/* ── Hero ──────────────────────────────────────────────── */} +
+ {/* Dot-grid background */} +
+
+
+ +
+ {/* Left — headline + CTA */} +
+ {/* Hero heading — Playfair Display italic */} +

+ Share files +
+ without the +
+ + friction. + +

+ +

+ Upload, share, and track your files with links that expire. + No sign-up walls, no bloated UIs, no files living forever on someone else's server. +

+ +
+ + +
+ + {/* Honest feature pills */} +
+ {['No sign-up required', 'Auto-expiring links', 'Up to 500 MB/file'].map((tag) => ( + + + {tag} + + ))} +
+
+ + {/* Right — live upload preview */} +
+ +
+
+
+ + {/* ── Features ─────────────────────────────────────────────── */} +
+
+
+ // + Features +
+

Built different, by design

+

+ Every decision made to reduce friction and keep your files under your control. +

+
+ +
+ {[ + { icon: , title: 'Instant uploads', desc: 'Drag, drop, share. Your link is ready before you finish reading this sentence.' }, + { icon: , title: 'Auto-expiring links', desc: 'Every link has a shelf life. Set it and forget it — files disappear when you want them to.' }, + { icon: , title: 'No account needed', desc: "Share files without creating an account. Recipients don't need one either." }, + { icon: , title: 'View tracking', desc: 'Know exactly who opened your link and when. Real-time analytics on every file you share.' }, + { icon: , title: 'One-click sharing', desc: 'Copy a share link the instant your file is ready. No extra steps, no friction.' }, + { icon: , title: 'Custom expiry', desc: 'Set links to expire in an hour, a day, a week — you decide when access ends.' }, + { icon: , title: 'Download analytics', desc: 'See how many times your file has been downloaded, right from your dashboard.' }, + { icon: , title: 'End-to-end encryption', desc: 'Your files are encrypted in transit and at rest. Only people with the link can access them.' }, + { icon: , title: '500MB file limit', desc: 'Share presentations, design files, datasets — up to half a gigabyte per upload.' }, + ].map((feature, i) => ( +
+ {/* Faint ordinal */} + + {String(i + 1).padStart(2, '0')} + +
+ {feature.icon} +
+

{feature.title}

+

{feature.desc}

+
+ ))} +
+
+ + {/* ── How it Works ─────────────────────────────────────────── */} +
+
+
+
+ // + How it Works +
+

Three steps. Zero friction.

+

+ From file to shared link in under five seconds. +

+
+ +
+
+ {[ + { title: 'Drop your file', desc: 'Drag and drop any file up to 500MB into the upload zone.' }, + { title: 'Get a link', desc: 'A unique, time-limited share link is generated instantly.' }, + { title: 'Share and track', desc: 'Send the link. See who viewed and downloaded it in your dashboard.' }, + ].map((step, i) => ( +
+ {/* Giant decorative background number */} +
+ {i + 1} +
+
+
+ {i + 1} +
+

{step.title}

+

{step.desc}

+
+
+ ))} +
+
+
+ + {/* ── CTA ──────────────────────────────────────────────────── */} +
+
+
+
+ // + Get Started +
+

Ready to share smarter?

+

+ No sign-up required. Upload your first file and see how simple file sharing should be. +

+ +
+
+ +
+ ); +}