Merge version_2 into main #2

Merged
bender merged 4 commits from version_2 into main 2026-03-12 06:47:16 +00:00
4 changed files with 187 additions and 201 deletions

View File

@@ -6,6 +6,7 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
import { Nunito_Sans } from "next/font/google";
import { Syne, DM_Sans } from "next/font/google";
@@ -14,8 +15,13 @@ export const metadata: Metadata = {
description: 'Order snacks, drinks & essentials delivered in 20 minutes. No minimum order. Available 24/7 in major cities. Perfect for students & night shift workers.',
};
const nunitoSans = Nunito_Sans({
variable: "--font-nunito-sans", subsets: ["latin"],
const syne = Syne({
variable: "--font-syne", subsets: ["latin"],
weight: ["400", "500", "600", "700", "800"],
});
const dmSans = DM_Sans({
variable: "--font-dm-sans", subsets: ["latin"],
});
export default function RootLayout({
@@ -26,7 +32,7 @@ export default function RootLayout({
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${nunitoSans.variable} antialiased`}>
<body className={`${syne.variable} ${dmSans.variable} antialiased`}>
<Tag />
{children}
<script

View File

@@ -1,235 +1,215 @@
"use client"
"use client";
import { useState } from "react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import AboutMetric from '@/components/sections/about/AboutMetric';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterCard from '@/components/sections/footer/FooterCard';
import { AlertCircle, Clock, DollarSign, Handshake, Instagram, Linkedin, Lock, MapPin, MessageCircle, Settings, ShoppingBag, Star, Twitter, User, Wallet, Zap } from 'lucide-react';
import { Clock, MapPin, Package, Users } from 'lucide-react';
export default function FlitsWaitlist() {
const [signupCount, setSignupCount] = useState(247);
const [email, setEmail] = useState("");
const [orderingTime, setOrderingTime] = useState("");
const [preferredItems, setPreferredItems] = useState("");
const [submitted, setSubmitted] = useState(false);
const [showConfirmation, setShowConfirmation] = useState(false);
const handleFormSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (email && orderingTime && preferredItems) {
setSubmitted(true);
setShowConfirmation(true);
setSignupCount(prev => prev + 1);
// Reset form after 3 seconds
setTimeout(() => {
setEmail("");
setOrderingTime("");
setPreferredItems("");
setShowConfirmation(false);
}, 3000);
}
};
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
background="none"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="glass"
headingFontWeight="light"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="LateNight"
brandName="Flits"
navItems={[
{ name: "Features", id: "features" },
{ name: "Why Us", id: "about" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
{ name: "Waitlist", id: "waitlist" },
{ name: "FAQ", id: "faq" }
]}
button={{
text: "Start Ordering", href: "https://app.latenightessentials.com"
}}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Latenight essentials in 20 minutes"
description="No minimum order. Snacks, drinks, and emergency items delivered fast to your door, anytime. Open until 3 AM in your area."
tag="Available 24/7"
title="Order Snacks & Essentials Late at Night in Amsterdam"
description="Fast, reliable delivery of your favorite snacks and essentials whenever you need them. No minimum order. Join our waitlist and get a special discount!"
tag="Coming Soon"
tagIcon={Clock}
tagAnimation="slide-up"
background={{ variant: "radial-gradient" }}
background={{ variant: "plain" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-delivery-man-checking-trip-details-phone_23-2148944603.jpg", imageAlt: "Mobile delivery app interface showing order screen"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-spa-composition-with-skin-care-products-blue-background_169016-21004.jpg", imageAlt: "Selection of late night snacks and drinks available for delivery"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/delivery-man-employee-yellow-cap-blank-tshirt-uniform-holding-food-container-pizza-box-with-paper-bag-talking-mobile-phone-with-aggressive-expression-standing-orange-background_141793-137144.jpg", imageAlt: "Fast delivery courier on bike rushing through city streets"
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP7MAT202NCrlDBWuaqgGOuf5Q/uploaded-1773297994290-91f73bru.png", imageAlt: "Flits delivery service"
}
]}
buttons={[
{ text: "Start ordering", href: "https://app.latenightessentials.com" },
{ text: "Become a courier", href: "#courier-info" }
{ text: "Join Waitlist", href: "#waitlist" }
]}
buttonAnimation="slide-up"
mediaAnimation="slide-up"
ariaLabel="Hero section for late night essentials delivery service"
ariaLabel="Flits late-night delivery service hero section"
/>
</div>
<div id="features" data-section="features">
<FeatureBento
title="Built for Speed and Convenience"
description="Everything you need for hassle-free late-night delivery, optimized for mobile and dark mode compatibility."
tag="Why Choose Us"
tagIcon={Zap}
tagAnimation="slide-up"
features={[
{
title: "Sub-10 Second Ordering", description: "Streamlined checkout designed for rapid impulse orders without unnecessary friction.", bentoComponent: "animated-bar-chart"
},
{
title: "Real-Time Tracking", description: "Know exactly where your delivery is with live GPS tracking and instant updates.", bentoComponent: "map"
},
{
title: "24/7 Availability", description: "Order anytime—snacks, drinks, and essentials delivered even at 3 AM in dense urban areas.", bentoComponent: "line-chart"
},
{
title: "Courier Dashboard", description: "Simple, transparent order acceptance and delivery workflows for gig workers.", bentoComponent: "phone", statusIcon: Lock,
alertIcon: AlertCircle,
alertTitle: "New Order", alertMessage: "Snacks order ready to accept", apps: [
{ name: "Orders", icon: ShoppingBag },
{ name: "Earnings", icon: DollarSign },
{ name: "Map", icon: MapPin },
{ name: "Profile", icon: User },
{ name: "Support", icon: MessageCircle },
{ name: "Settings", icon: Settings },
{ name: "History", icon: Clock },
{ name: "Wallet", icon: Wallet }
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
carouselMode="buttons"
ariaLabel="Feature highlights for delivery platform"
/>
<div id="waitlist" data-section="waitlist" className="py-20 px-6 md:px-12 bg-white">
<div className="max-w-2xl mx-auto">
<div className="text-center mb-12">
<h2 className="text-4xl md:text-5xl font-bold text-black mb-4" style={{ fontFamily: "var(--font-syne)" }}>Be First to Order</h2>
<p className="text-lg text-gray-700" style={{ fontFamily: "var(--font-dm-sans)" }}>Join our Amsterdam community and get exclusive early-bird discount</p>
</div>
{showConfirmation ? (
<div className="bg-orange-50 border-2 border-orange-400 rounded-lg p-8 text-center mb-8">
<div className="text-orange-500 text-5xl mb-4"></div>
<h3 className="text-2xl font-bold text-orange-600 mb-2" style={{ fontFamily: "var(--font-syne)" }}>Welcome to Flits!</h3>
<p className="text-gray-700" style={{ fontFamily: "var(--font-dm-sans)" }}>You're on the waitlist. We'll notify you when we launch!</p>
</div>
) : null}
<form onSubmit={handleFormSubmit} className="space-y-6 mb-8">
{/* Email Field */}
<div>
<label className="block text-black font-semibold mb-2" style={{ fontFamily: "var(--font-syne)" }}>Email Address</label>
<input
type="email"
required
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="your@email.com"
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-orange-400 focus:outline-none text-black"
style={{ fontFamily: "var(--font-dm-sans)" }}
/>
</div>
{/* Ordering Time */}
<div>
<label className="block text-black font-semibold mb-2" style={{ fontFamily: "var(--font-syne)" }}>When do you usually order?</label>
<select
required
value={orderingTime}
onChange={(e) => setOrderingTime(e.target.value)}
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-orange-400 focus:outline-none text-black"
style={{ fontFamily: "var(--font-dm-sans)" }}
>
<option value="">Select a time</option>
<option value="22-00">10 PM - 12 AM</option>
<option value="00-02">12 AM - 2 AM</option>
<option value="02-04">2 AM - 4 AM</option>
</select>
</div>
{/* Preferred Items */}
<div>
<label className="block text-black font-semibold mb-2" style={{ fontFamily: "var(--font-syne)" }}>What do you usually order?</label>
<select
required
value={preferredItems}
onChange={(e) => setPreferredItems(e.target.value)}
className="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-orange-400 focus:outline-none text-black"
style={{ fontFamily: "var(--font-dm-sans)" }}
>
<option value="">Select preferred items</option>
<option value="snacks">Snacks & Chips</option>
<option value="drinks">Drinks & Beverages</option>
<option value="essentials">Essentials & Toiletries</option>
<option value="mixed">Mixed Items</option>
</select>
</div>
{/* Submit Button */}
<button
type="submit"
className="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 rounded-lg transition-all duration-200 transform hover:scale-105"
style={{ fontFamily: "var(--font-syne)" }}
>
Join Waitlist - Get 20% Off First Order
</button>
</form>
{/* Signup Counter */}
<div className="text-center">
<div className="inline-flex items-center gap-2 bg-orange-50 px-6 py-3 rounded-lg border-2 border-orange-200">
<Users className="w-5 h-5 text-orange-500" />
<span className="text-black font-semibold" style={{ fontFamily: "var(--font-dm-sans)" }}>
{signupCount.toLocaleString()} people have joined
</span>
</div>
</div>
</div>
</div>
<div id="about" data-section="about">
<AboutMetric
title="Serving Urban Students and Professionals Who Demand Speed"
useInvertedBackground={false}
metrics={[
{ icon: Zap, label: "Average Delivery Time", value: "20 mins" },
{ icon: MapPin, label: "Dense Urban Coverage", value: "Major Cities" },
{ icon: User, label: "Active Couriers", value: "500+" },
{ icon: ShoppingBag, label: "Zero Minimum Order", value: "Any Amount" }
]}
metricsAnimation="slide-up"
ariaLabel="Key metrics and achievements"
/>
</div>
<div id="faq" data-section="faq" className="py-20 px-6 md:px-12 bg-white">
<div className="max-w-2xl mx-auto">
<h2 className="text-4xl md:text-5xl font-bold text-black mb-12 text-center" style={{ fontFamily: "var(--font-syne)" }}>Frequently Asked Questions</h2>
<div className="space-y-4">
<details className="border-2 border-gray-300 rounded-lg p-4 group cursor-pointer" open>
<summary className="flex items-center justify-between font-bold text-black" style={{ fontFamily: "var(--font-syne)" }}>
<span>When does Flits launch?</span>
<span className="group-open:rotate-180 transition-transform"></span>
</summary>
<p className="mt-3 text-gray-700" style={{ fontFamily: "var(--font-dm-sans)" }}>We're launching in Q2 2025. Join the waitlist to be notified the moment we go live!</p>
</details>
<div id="socialproof" data-section="socialproof">
<SocialProofOne
title="Trusted by Urban Communities"
description="Partnered with leading retailers, educational institutions, and payment providers to bring you seamless late-night essentials delivery."
tag="Partners"
tagIcon={Handshake}
textboxLayout="default"
useInvertedBackground={false}
names={[
"Local Retailers", "Urban Universities", "Payment Partners", "Logistics Network", "Student Communities", "Tech Partners", "Support Services"
]}
speed={40}
showCard={true}
ariaLabel="Partner logos and trusted brands"
/>
</div>
<details className="border-2 border-gray-300 rounded-lg p-4 group cursor-pointer">
<summary className="flex items-center justify-between font-bold text-black" style={{ fontFamily: "var(--font-syne)" }}>
<span>What areas do you deliver to?</span>
<span className="group-open:rotate-180 transition-transform">▼</span>
</summary>
<p className="mt-3 text-gray-700" style={{ fontFamily: "var(--font-dm-sans)" }}>We're starting with central Amsterdam and expanding to nearby areas. Check our coverage map when we launch.</p>
</details>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
title="What Our Users Say"
description="Real stories from students, professionals, and couriers who trust LateNight for their essential needs."
tag="Reviews"
tagIcon={Star}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
testimonials={[
{
id: "1", name: "Alex Chen", role: "Computer Science Student", company: "Tech University", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-charming-gorgeous-young-woman-with-perfect-tanned-skin-straight-teeth-hair-gathered-ponytail-with-positive-beautiful-smile-posing-outdoors-park_343059-2898.jpg"
},
{
id: "2", name: "Jessica Patel", role: "Night Shift Nurse", company: "City Medical Center", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-lean-grey-wall-holding-laptop-hand_197531-348.jpg"
},
{
id: "3", name: "Marcus Rodriguez", role: "Freelance Developer", company: "Independent", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-man-black-shirt-standing-front-closed-door_23-2148164478.jpg"
},
{
id: "4", name: "Sofia Nakamura", role: "Courier", company: "LateNight Delivery", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-his-work-time-office-job_23-2149571041.jpg"
}
]}
kpiItems={[
{ value: "4.8/5", label: "Average Rating" },
{ value: "10K+", label: "Active Users" },
{ value: "99%", label: "On-Time Delivery" }
]}
ariaLabel="Customer testimonials and ratings"
/>
</div>
<details className="border-2 border-gray-300 rounded-lg p-4 group cursor-pointer">
<summary className="flex items-center justify-between font-bold text-black" style={{ fontFamily: "var(--font-syne)" }}>
<span>What's the delivery fee?</span>
<span className="group-open:rotate-180 transition-transform"></span>
</summary>
<p className="mt-3 text-gray-700" style={{ fontFamily: "var(--font-dm-sans)" }}>Flat 2.99 delivery fee for all orders. No minimum purchase required.</p>
</details>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about ordering and delivering with LateNight Essentials."
textPosition="left"
useInvertedBackground={false}
animationType="smooth"
showCard={true}
faqs={[
{
id: "1", title: "What's the minimum order amount?", content: "There is no minimum order. Order a single snack, a drink, or emergency items—we deliver everything for the same flat delivery fee."
},
{
id: "2", title: "How fast is delivery?", content: "We guarantee 2030 minute delivery in dense urban areas where we operate. Average delivery time is under 25 minutes from order confirmation."
},
{
id: "3", title: "What payment methods do you accept?", content: "We accept credit/debit cards, digital wallets, and iDEAL (for Netherlands/Belgium). All payments are processed securely."
},
{
id: "4", title: "How do I become a courier?", content: "Visit our Courier Portal to sign up. You'll need a valid ID, proof of residency, and a bike or scooter. We handle background checks and training."
},
{
id: "5", title: "Can I track my order in real-time?", content: "Yes! Once your order is accepted by a courier, you'll see live GPS tracking on your phone showing exactly where they are."
},
{
id: "6", title: "What if my order arrives late or damaged?", content: "We guarantee on-time delivery. If your order is late or damaged, contact support immediately for a full refund or replacement."
}
]}
faqsAnimation="slide-up"
ariaLabel="Frequently asked questions section"
/>
<details className="border-2 border-gray-300 rounded-lg p-4 group cursor-pointer">
<summary className="flex items-center justify-between font-bold text-black" style={{ fontFamily: "var(--font-syne)" }}>
<span>What payment methods do you accept?</span>
<span className="group-open:rotate-180 transition-transform"></span>
</summary>
<p className="mt-3 text-gray-700" style={{ fontFamily: "var(--font-dm-sans)" }}>We accept credit cards, iDEAL, and other popular payment methods.</p>
</details>
</div>
</div>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="LateNight"
copyrightText="© 2025 LateNight Essentials. All rights reserved."
socialLinks={[
{
icon: Twitter,
href: "https://twitter.com/latenightess", ariaLabel: "Follow us on Twitter"
},
{
icon: Instagram,
href: "https://instagram.com/latenightess", ariaLabel: "Follow us on Instagram"
},
{
icon: Linkedin,
href: "https://linkedin.com/company/latenightessentials", ariaLabel: "Connect on LinkedIn"
}
]}
ariaLabel="Site footer with social links"
logoText="Flits"
copyrightText="© 2025 Flits. Late-night essentials delivered in Amsterdam."
socialLinks={[]}
ariaLabel="Flits footer"
/>
</div>
</ThemeProvider>

View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-nunito-sans), sans-serif;
font-family: var(--font-dm-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-nunito-sans), sans-serif;
font-family: var(--font-syne), sans-serif;
}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f7f6f7;
--card: #ffffff;
--foreground: #25190c;
--primary-cta: #ff6207;
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000000;
--primary-cta: #E34400;
--primary-cta-text: #f7f6f7;
--secondary-cta: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta-text: #25190c;
--accent: #ffce93;
--background-accent: #e8cfa8;
--accent: #E34400;
--background-accent: #E34400;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);