diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..2c4a5e4 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,370 @@ +import React from 'react'; +import { Flame, FlameKindle, MapPin, Search, Plus, Sparkles, Navigation, ArrowRight, Star, ShoppingBag, Truck, Camera, MessageSquareText, Timer, Bike, Banknote, Utensils } from 'lucide-react'; + +function Logo({ className = "h-8" }: { className?: string }) { + const [imgError, setImgError] = React.useState(false); + + // Fallback to text if the image is not uploaded yet + if (imgError) { + return ( + + mealno + + ); + } + + return ( + Mealno Logo setImgError(true)} + /> + ); +} + +function Navbar() { + return ( + + ); +} + +const targetLaunchDate = new Date(Date.now() + (5 * 24 * 60 * 60 * 1000) + (12 * 60 * 60 * 1000) + (45 * 60 * 1000) + (8 * 1000)).getTime(); + +function Hero() { + const [timeLeft, setTimeLeft] = React.useState(() => { + const distance = targetLaunchDate - new Date().getTime(); + if (distance < 0) return { days: 0, hours: 0, minutes: 0, seconds: 0 }; + return { + days: Math.floor(distance / (1000 * 60 * 60 * 24)), + hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), + minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), + seconds: Math.floor((distance % (1000 * 60)) / 1000) + }; + }); + + React.useEffect(() => { + const interval = setInterval(() => { + const distance = targetLaunchDate - new Date().getTime(); + + if (distance < 0) { + clearInterval(interval); + setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 }); + return; + } + + setTimeLeft({ + days: Math.floor(distance / (1000 * 60 * 60 * 24)), + hours: Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)), + minutes: Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)), + seconds: Math.floor((distance % (1000 * 60)) / 1000) + }); + }, 1000); + + return () => clearInterval(interval); + }, []); + + const formatNumber = (num: number) => num.toString().padStart(2, '0'); + + return ( +
+
+
+ + {/* Left Content */} +
+
+
+ Dropping Soon +
+ +

+ Your Wallet Will Thank You.
+ Your Stomach Will Love You. +

+ +

+ Newtown's ultimate student cloud kitchen is dropping soon. Insane flavor, unbelievable student discounts. +

+ + {/* Countdown Box */} +
+
+
+ +
+ {formatNumber(timeLeft.days)} + Days +
+ + : + +
+ {formatNumber(timeLeft.hours)} + Hours +
+ + : + +
+ {formatNumber(timeLeft.minutes)} + Mins +
+ + : + +
+ {formatNumber(timeLeft.seconds)} + Secs +
+ +
+
+ + {/* Waitlist Input Row */} +
e.preventDefault()}> +
+
+ + + +
+ +
+ +
+ + {/* Tiers Text */} +
+
+ +

+ Waitlist Tier 1 (First 500): Free Delivery for one month. +

+
+
+
+
+
+

+ Tier 2 (Next 1000): Priority first access. Sign up now. +

+
+
+ +
+ + {/* Right Image */} +
+
+
+ {/* Chip on Image */} +
+ + Spicy AF +
+ + {/* Using a high-quality dark-themed burger image as placeholder */} + Delicious authentic Indian Biryani with spices + + {/* Vignette Overlay for dark aesthetic */} +
+
+
+ +
+
+
+ ); +} + +function StealsSection() { + const steals = [ + { + title: "Heavy Discounts", + description: "Daily flash sales and student-only pricing. Keep your ID ready.", + icon: , + iconBg: "bg-red-950/40 border-red-900/50" + }, + { + title: "Fresh & Fast", + description: "Cooked fresh, delivered straight to your hostel or flat before the craving dies.", + icon: , + iconBg: "bg-amber-950/40 border-amber-900/50" + }, + { + title: "Zero Delivery Fees", + description: "Order minimums? We don't know them. Free delivery within Newtown campus zones.", + icon: , + iconBg: "bg-blue-950/40 border-blue-900/50" + } + ]; + + return ( +
+
+
+

Student Steals

+

+ Because instant noodles shouldn't be your only late-night option. +

+
+ +
+ {steals.map((steal, i) => ( +
+
+ {steal.icon} +
+

{steal.title}

+

+ {steal.description} +

+
+ ))} +
+
+
+ ); +} + +function FounderSection() { + const team = [ + { + name: "Arnab Kapri", + role: "Founder", + quote: "\"Software dev by day, building your new favorite food brand by night to fix Newtown's late-night food scene.\"", + img: "https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=800&q=80" + }, + { + name: "Alex Rivera", + role: "Co-Founder & Head of Operations", + quote: "\"Ensuring your late-night cravings hit your doorstep before the movie gets to the good part.\"", + img: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=800&q=80" + }, + { + name: "Sarah Chen", + role: "Co-Founder & Culinary Lead", + quote: "\"Experimenting with flavors that'll make you rethink everything you know about midnight snacking.\"", + img: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=800&q=80" + } + ]; + + return ( +
+
+
+ The Hustle +

+ Built by locals, for late-night cravings. +

+

+ Meet the team bringing the heat to Newtown's after-hours food scene. +

+
+ +
+ {team.map((member, i) => ( +
+
+ {member.name} +
+ +
+ +
+

{member.name}

+

{member.role}

+ +
+

+ {member.quote} +

+
+
+
+ ))} +
+
+
+ ); +} + +function Footer() { + return ( + + ); +} + +export default function App() { + return ( +
+ +
+ + + +
+
+
+ ); +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..feb4880 --- /dev/null +++ b/src/index.css @@ -0,0 +1,38 @@ +@import "tailwindcss"; + +@theme { + --color-background: #ffffff; + --color-surface: #f8fafc; + --color-surface-dim: #f1f5f9; + --color-surface-bright: #ffffff; + --color-surface-container: #ffffff; + --color-on-surface: #0f172a; + + --color-primary: #f93a4a; + --color-primary-text: #f93a4a; + --color-on-primary: #ffffff; + + --color-secondary: #ffb300; + --color-on-secondary: #4d3600; + + --color-border: #e2e8f0; + + --font-sans: 'Inter', sans-serif; + --font-display: 'Plus Jakarta Sans', sans-serif; +} + +body { + @apply bg-background text-on-surface font-sans antialiased; +} + +h1, h2, h3, h4, h5, h6, .font-display { + @apply font-display tracking-tight text-on-surface; +} + +/* Custom glow utility */ +.glow-primary { + box-shadow: 0 0 20px rgba(249, 58, 74, 0.2); +} +.glow-primary:hover { + box-shadow: 0 0 30px rgba(249, 58, 74, 0.4); +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..080dac3 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import App from './App.tsx'; +import './index.css'; + +createRoot(document.getElementById('root')!).render( + + + , +);