477 lines
33 KiB
HTML
477 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Nearle | Your Neighborhood, Delivered</title>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Hanken+Grotesk:wght@600;700;800&display=swap" rel="stylesheet"/>
|
|
<!-- Material Symbols -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-primary": "#ffffff",
|
|
"inverse-on-surface": "#f0f0f3",
|
|
"surface-bright": "#f9f9fc",
|
|
"tertiary-container": "#cda72b",
|
|
"secondary-container": "#7bf8a1",
|
|
"tertiary-fixed-dim": "#ebc246",
|
|
"surface-dim": "#dadadc",
|
|
"on-primary-fixed": "#320047",
|
|
"error": "#ba1a1a",
|
|
"on-tertiary-fixed-variant": "#584400",
|
|
"on-surface": "#1a1c1e",
|
|
"inverse-surface": "#2f3133",
|
|
"surface-container-highest": "#e2e2e5",
|
|
"tertiary": "#745b00",
|
|
"primary": "#4d046a",
|
|
"error-container": "#ffdad6",
|
|
"on-primary-container": "#de96f9",
|
|
"on-secondary-fixed": "#00210c",
|
|
"on-secondary-container": "#007239",
|
|
"outline": "#7f7381",
|
|
"primary-fixed-dim": "#ebb2ff",
|
|
"primary-fixed": "#f8d8ff",
|
|
"on-secondary": "#ffffff",
|
|
"on-background": "#1a1c1e",
|
|
"surface-variant": "#e2e2e5",
|
|
"surface-container": "#eeeef0",
|
|
"on-tertiary-container": "#4f3d00",
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-fixed": "#ffe08b",
|
|
"on-secondary-fixed-variant": "#005228",
|
|
"secondary-fixed": "#7efba4",
|
|
"secondary-fixed-dim": "#61de8a",
|
|
"on-tertiary-fixed": "#241a00",
|
|
"surface-container-low": "#f3f3f6",
|
|
"on-surface-variant": "#4d434f",
|
|
"inverse-primary": "#ebb2ff",
|
|
"on-error-container": "#93000a",
|
|
"outline-variant": "#d0c2d1",
|
|
"surface": "#f9f9fc",
|
|
"on-error": "#ffffff",
|
|
"secondary": "#006d37",
|
|
"background": "#f9f9fc",
|
|
"surface-tint": "#83429f",
|
|
"surface-container-high": "#e8e8ea",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary-fixed-variant": "#692885",
|
|
"primary-container": "#662582"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"stack-lg": "24px",
|
|
"stack-sm": "8px",
|
|
"stack-md": "16px",
|
|
"margin-mobile": "16px",
|
|
"gutter": "16px",
|
|
"margin-desktop": "32px",
|
|
"stack-xs": "4px",
|
|
"container-max": "1280px"
|
|
},
|
|
"fontFamily": {
|
|
"body-sm": ["Inter"],
|
|
"headline-lg": ["Hanken Grotesk"],
|
|
"body-lg": ["Inter"],
|
|
"headline-md": ["Hanken Grotesk"],
|
|
"label-sm": ["Inter"],
|
|
"body-md": ["Inter"],
|
|
"headline-lg-mobile": ["Hanken Grotesk"],
|
|
"label-md": ["Inter"],
|
|
"display": ["Hanken Grotesk"]
|
|
},
|
|
"fontSize": {
|
|
"body-sm": ["12px", {"lineHeight": "16px", "fontWeight": "400"}],
|
|
"headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"label-sm": ["11px", {"lineHeight": "16px", "letterSpacing": "0.03em", "fontWeight": "700"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"headline-lg-mobile": ["24px", {"lineHeight": "32px", "fontWeight": "700"}],
|
|
"label-md": ["14px", {"lineHeight": "20px", "letterSpacing": "0.01em", "fontWeight": "600"}],
|
|
"display": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "800"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.smooth-scroll { scroll-behavior: smooth; }
|
|
.bento-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
|
|
.bento-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface font-body-md selection:bg-primary-container selection:text-on-primary-container smooth-scroll">
|
|
<!-- TopNavBar -->
|
|
<nav class="bg-surface-container-lowest dark:bg-inverse-surface w-full top-0 sticky z-50 border-b border-outline-variant dark:border-outline">
|
|
<div class="flex justify-between items-center w-full px-margin-mobile md:px-margin-desktop py-stack-sm max-w-container-max mx-auto">
|
|
<div class="flex items-center gap-6">
|
|
<a class="text-headline-md font-headline-md font-extrabold text-primary dark:text-primary-fixed-dim" href="#">Nearle</a>
|
|
<div class="hidden md:flex items-center gap-2 px-3 py-1.5 bg-surface-container rounded-lg cursor-pointer hover:bg-surface-container-high transition-colors">
|
|
<span class="material-symbols-outlined text-primary" data-icon="location_on">location_on</span>
|
|
<span class="font-label-md text-label-md text-on-surface">Indiranagar, Bengaluru</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="keyboard_arrow_down">keyboard_arrow_down</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-stack-md md:gap-stack-lg">
|
|
<a class="hidden md:block font-body-md text-body-md text-on-surface-variant dark:text-surface-variant hover:text-primary transition-colors" href="#">Nearle for Business</a>
|
|
<div class="flex items-center gap-4">
|
|
<button class="flex items-center gap-2 hover:bg-surface-container-low p-2 rounded-full transition-colors active:scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="search">search</span>
|
|
</button>
|
|
<button class="flex items-center gap-2 hover:bg-surface-container-low p-2 rounded-full transition-colors active:scale-95 duration-150">
|
|
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
|
|
<span class="hidden md:block font-label-md text-label-md">Login</span>
|
|
</button>
|
|
<button class="bg-primary-container text-on-primary px-6 py-2 rounded-lg font-label-md text-label-md hover:opacity-90 active:scale-95 transition-all shadow-sm">
|
|
Get App
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="relative overflow-hidden bg-surface-container-lowest">
|
|
<div class="max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop py-12 md:py-24 grid md:grid-cols-2 gap-12 items-center">
|
|
<div class="z-10">
|
|
<h1 class="font-display text-display text-on-surface mb-6 leading-tight">Your Neighborhood,<br/><span class="text-primary">Delivered.</span></h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-10 max-w-lg">Hyper-local essentials, hot meals, and professional services from verified businesses within your 2km radius.</p>
|
|
<div class="flex flex-col gap-4 max-w-xl">
|
|
<div class="flex items-center bg-white border border-outline-variant p-1.5 rounded-xl shadow-sm focus-within:ring-2 focus-within:ring-primary focus-within:border-primary transition-all">
|
|
<span class="material-symbols-outlined ml-3 text-on-surface-variant" data-icon="my_location">my_location</span>
|
|
<input class="w-full border-none focus:ring-0 font-body-md text-body-md px-4 py-3" placeholder="Enter your delivery location..." type="text"/>
|
|
<button class="bg-primary px-8 py-3 rounded-lg text-on-primary font-label-md text-label-md hover:bg-opacity-90 transition-all active:scale-95 whitespace-nowrap">
|
|
Find Shops
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-4 flex-wrap">
|
|
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Popular:</span>
|
|
<a class="font-label-sm text-label-sm text-primary hover:underline" href="#">Fresh Produce</a>
|
|
<a class="font-label-sm text-label-sm text-primary hover:underline" href="#">Artisan Bakery</a>
|
|
<a class="font-label-sm text-label-sm text-primary hover:underline" href="#">Pet Care</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative hidden md:block">
|
|
<div class="aspect-square rounded-2xl overflow-hidden shadow-xl border border-outline-variant">
|
|
<img class="w-full h-full object-cover" data-alt="A professional high-fidelity photograph of a clean, modern Indian residential neighborhood street at golden hour. A delivery professional in a neat purple uniform stands next to an electric scooter, handing a package to a smiling customer in front of a contemporary apartment building. The scene is bright, optimistic, and uses a professional color palette of purples, whites, and soft grays." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDAgVYSjoIQykfnIFzUroTKfJ4RUTk6lZRpN4qtGYcQNl2vcmqeuEXcbSmZN8ONxAllNRgSwcrq_vyL3mC3yg8jlsDye5aswcvHoEuhW9g0sGx4wGlal-WYrs3q_78Hu0SxOEizQF-tOPTzXVaMEIC3VMSvy1rFuhpr2pKiT4bRPDh-EkzYBxjRblhguKU0JQm4C7K0mV4i6WPwBjeZuyWyqZ6qraPa7in2WIeOOVci92F_Klcxcjpl-dKf0KSudftyTXaJRI6eiu6B"/>
|
|
</div>
|
|
<div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg border border-outline-variant animate-bounce-slow">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="electric_bolt">electric_bolt</span>
|
|
</div>
|
|
<div>
|
|
<p class="font-label-md text-label-md text-on-surface">12 Min Delivery</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Fastest in Indiranagar</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Service Categories -->
|
|
<section class="bg-background py-16 px-margin-mobile md:px-margin-desktop">
|
|
<div class="max-w-container-max mx-auto">
|
|
<div class="flex justify-between items-end mb-10">
|
|
<div>
|
|
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-2">Explore Neighborhood Services</h2>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Everything you need, just around the corner.</p>
|
|
</div>
|
|
<a class="text-primary font-label-md text-label-md flex items-center gap-1 hover:underline" href="#">
|
|
View All Categories <span class="material-symbols-outlined text-[18px]" data-icon="arrow_forward">arrow_forward</span>
|
|
</a>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-gutter">
|
|
<!-- Category Card -->
|
|
<div class="group cursor-pointer">
|
|
<div class="aspect-square bg-surface-container rounded-2xl mb-4 overflow-hidden border border-transparent group-hover:border-primary transition-all duration-300">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A crisp, high-resolution top-down product photograph of a gourmet bowl of steaming hot butter chicken with fresh cilantro garnish. The lighting is studio-quality, emphasizing textures and vibrant orange colors against a neutral light-gray background, reflecting a professional food marketplace aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDVJkuwmrOZNqNTM0hK2neYXFH6yR4YgkDKvYaJ9_CtRN9UEAghNEtR2UrSDM8b_MLfbm8pDUvvM4JVPoDT5KF5NX6lcQMu2BhB7fMrptAGhteI-3dvYpxLUEhSpaSUjWzGLyuVSz3_fXdUWX6744mIQD9vmr7K0BJy3h-YtWkCNtcgmnArPjBQtmRbx6CatdbIdMUUndb0Q8lrgJhr4UfrP6LvMw18xcLeiXHmZ4f65DxaQn8YGpBWjFJ_vOoxijhPk_FQLTvjgiMM"/>
|
|
</div>
|
|
<h3 class="font-label-md text-label-md text-center group-hover:text-primary transition-colors">Hot Food</h3>
|
|
</div>
|
|
<!-- Category Card -->
|
|
<div class="group cursor-pointer">
|
|
<div class="aspect-square bg-surface-container rounded-2xl mb-4 overflow-hidden border border-transparent group-hover:border-primary transition-all duration-300">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A clean, minimalist product shot of daily essentials: a carton of organic milk, a loaf of sourdough bread, and a basket of fresh red tomatoes. The composition is structured and utilitarian, set against a pristine white background with soft, professional shadows." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4JHnc1EBinF4_yBYoZT9KNyiEn5FsDQ3e5y2hpmPPv_6om9I_WgQjhtCxUXp-a0YyEFXAOtDX92CzjJT3DtpbrxjckohmXbVdUMxERSphRVDFsLOU3ylNh5i4-PZXY_wNOJs9X-Oabp-QWPDAAraL5l7gOE_ipCQILwZH4uwfGjznxAARY3YrURLez0KPgfa3HtsolEOH4hUTt-cIegQycvngIHcTUwHG3Wceoa1P6F0GUEwu3ehQ6pgOLBTT7tpJosJnu7a3YAYb"/>
|
|
</div>
|
|
<h3 class="font-label-md text-label-md text-center group-hover:text-primary transition-colors">Daily Essentials</h3>
|
|
</div>
|
|
<!-- Category Card -->
|
|
<div class="group cursor-pointer">
|
|
<div class="aspect-square bg-surface-container rounded-2xl mb-4 overflow-hidden border border-transparent group-hover:border-primary transition-all duration-300">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A high-end lifestyle product photograph showing a variety of pharmacy items and personal care products like vitamins, a neat first aid kit, and luxury skincare bottles. Professional lighting creates a clean, clinical yet accessible feel, using a palette of soft whites and teals." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCse3PxFQugNtmSIAjQC8j1aMQZxuVG3eKW9qFj9cHfTlfIaIwsQ37J8tFDvuIxwYICrerRIkcSlAK5K_6SgqSKHkm1tIPCEsjCTVlNuOZWFC4B_tttNkwddQAVeTcjM4ep2dkdfB87sagmhsGA-C-Ka_vh3FSVQSozAF--7jEyUQDb_o4YYydK_cuKwr1W3iBCnyU-JwTCdWsCNFhEw34eGIOTHY91y4GwgPHin2GJPiMZVJVKlR3IEEi0dHdg5q7EirdEexWtUYVb"/>
|
|
</div>
|
|
<h3 class="font-label-md text-label-md text-center group-hover:text-primary transition-colors">Health & Wellness</h3>
|
|
</div>
|
|
<!-- Category Card -->
|
|
<div class="group cursor-pointer">
|
|
<div class="aspect-square bg-surface-container rounded-2xl mb-4 overflow-hidden border border-transparent group-hover:border-primary transition-all duration-300">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A professional photograph of a well-organized laundry service presentation: a stack of perfectly folded, crisp white shirts and high-quality hangers. The aesthetic is extremely clean and utilitarian, emphasizing reliability and professional care." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDZtg0WNaWAUJDc3GM_tnO2t3kqjKMP4SVEy0H7zmas3mIjMr6OBAqNvWNm-Yd92l7emUa1Hu0wDGqTJEghGlOA-_my1BTKeUI2ko5TfFWFjXpwfnWK695tbxb1PjEza1Cp9vMiUEbPd1w2CwHJ7h0PEpCYXm9rSzm3Wl6zVluFvsdIlo5QsuUlZm7rzmyQEbdSdgrd1VBONDDBLesaJkWksuKLr8emehBt5-CEyLE08Vc3LoGgRt0O2DPLlvHmYO_oMmaeIFV-fWJg"/>
|
|
</div>
|
|
<h3 class="font-label-md text-label-md text-center group-hover:text-primary transition-colors">Home Services</h3>
|
|
</div>
|
|
<!-- Category Card -->
|
|
<div class="group cursor-pointer">
|
|
<div class="aspect-square bg-surface-container rounded-2xl mb-4 overflow-hidden border border-transparent group-hover:border-primary transition-all duration-300">
|
|
<img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="A high-quality lifestyle shot of modern pet supplies: a sleek ceramic water bowl, an organic dog toy, and a premium bag of pet food. The lighting is warm and domestic, emphasizing a high-standard of neighborhood living and care." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBDaoCu2fz3BDONa66yUp_9BTIHmvG5CFZXDwB8zWFJAFqbTSJ5pJesmJ-EcSdMvRv3rm5UiFApIT7nvgoNUaQZSLPAaN831d0rNrdwWRcXlmsS8smk7Ll8xAwgUEpJMXGeup6E79ub0ftQo3D_ZzJ-8R29Rik1T9cQ3cG9nbhLxcpdP0mD_f_mthQvD6WTTxv0_e3LLEzRkfg5i6KFcgo9xfTVAFsvz4rQqQfWtEygdxKmYlmiJ6BEFBPi45VCxHpok86fquFMQRSB"/>
|
|
</div>
|
|
<h3 class="font-label-md text-label-md text-center group-hover:text-primary transition-colors">Pet Essentials</h3>
|
|
</div>
|
|
<!-- Category Card -->
|
|
<div class="group cursor-pointer">
|
|
<div class="aspect-square bg-surface-container rounded-2xl mb-4 overflow-hidden border border-transparent group-hover:border-primary transition-all duration-300">
|
|
<div class="w-full h-full flex flex-col items-center justify-center text-primary-container">
|
|
<span class="material-symbols-outlined text-4xl" data-icon="grid_view">grid_view</span>
|
|
</div>
|
|
</div>
|
|
<h3 class="font-label-md text-label-md text-center group-hover:text-primary transition-colors">More Services</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Hyper-local Features -->
|
|
<section class="py-20 bg-surface-container-low border-y border-outline-variant">
|
|
<div class="max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop">
|
|
<div class="mb-12 text-center">
|
|
<span class="font-label-sm text-label-sm text-primary uppercase tracking-widest bg-primary-fixed-dim px-3 py-1 rounded-full">Hyper-local Network</span>
|
|
<h2 class="font-display text-headline-lg mt-4 text-on-surface">Nearle for Neighborhoods</h2>
|
|
</div>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<!-- Feature Card 1 -->
|
|
<div class="bg-white p-8 rounded-2xl border border-outline-variant bento-card">
|
|
<div class="w-12 h-12 bg-primary-container rounded-xl flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-on-primary" data-icon="verified">verified</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md mb-3 text-on-surface">Verified Local Shops</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Every business on Nearle is manually verified for quality, hygiene, and ethical practices within your community.</p>
|
|
<div class="mt-8 p-4 bg-surface-container-lowest border border-outline-variant rounded-lg">
|
|
<div class="flex items-center gap-3">
|
|
<img class="w-10 h-10 rounded-full border border-outline-variant" data-alt="A small circular profile logo of a local organic bakery brand named 'Crust & Crumb', featuring minimalist black typography and a wheat stalk icon on a soft cream background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCSwdw9AISAleo9LckkeaB9Fpb3XXv3Q2lOkRcE7n4eyHZ7pj50Y13R2ZMVe115iWRHpyOqzd_9lEWr_Vo2G2GL1CDue3LXEM_8l0limOMgmR6tQrGsKc6ybkPOauAnzrE-CXtsDZNR8ua9K7wFcNVD3hovmNv_ZjljG6iapZ_3AF_KcgCIZQfN2oC2Uk5TS_AVkE2xr-UqG6ksVjNvMnnOS_wpUn9uKQi46znmH1bGwHhCT7d7HsO-TiyzK0ud7Z4LL5viDTB0e1sQ"/>
|
|
<div>
|
|
<p class="font-label-md text-label-md">Crust & Crumb Bakery</p>
|
|
<p class="font-body-sm text-body-sm text-secondary">Verified Community Partner</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Feature Card 2 -->
|
|
<div class="bg-white p-8 rounded-2xl border border-outline-variant bento-card">
|
|
<div class="w-12 h-12 bg-secondary-container rounded-xl flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-secondary" data-icon="distance">distance</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md mb-3 text-on-surface">2KM Logistics Radius</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">We prioritize ultra-short distance deliveries, ensuring your items reach you in record time while reducing carbon footprint.</p>
|
|
<div class="mt-8 flex justify-between items-center text-on-surface-variant font-label-sm text-label-sm border-t border-dashed border-outline-variant pt-6">
|
|
<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]" data-icon="schedule">schedule</span> 15-20 Min</div>
|
|
<div class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]" data-icon="electric_moped">electric_moped</span> Eco-friendly</div>
|
|
</div>
|
|
</div>
|
|
<!-- Feature Card 3 -->
|
|
<div class="bg-white p-8 rounded-2xl border border-outline-variant bento-card">
|
|
<div class="w-12 h-12 bg-tertiary-fixed rounded-xl flex items-center justify-center mb-6">
|
|
<span class="material-symbols-outlined text-tertiary" data-icon="sell">sell</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-headline-md mb-3 text-on-surface">Community Offers</h3>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Exclusive discounts and loyalty programs negotiated specifically for your housing society or neighborhood cluster.</p>
|
|
<div class="mt-8 bg-tertiary-container/10 p-4 rounded-lg border border-tertiary-container/20">
|
|
<p class="font-label-md text-label-md text-tertiary">Exclusive for Residents</p>
|
|
<p class="font-display text-headline-md text-on-tertiary-container">Flat 20% OFF</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Business Segment -->
|
|
<section class="py-24 px-margin-mobile md:px-margin-desktop bg-surface-container-lowest">
|
|
<div class="max-w-container-max mx-auto">
|
|
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div>
|
|
<h2 class="font-display text-display text-on-surface mb-6">Enable your brand for your <span class="text-secondary">Neighborhood.</span></h2>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-10">Join 5,000+ local merchants who have transformed their neighborhood reach with Nearle's managed delivery and discovery platform.</p>
|
|
<div class="space-y-6 mb-10">
|
|
<div class="flex gap-4">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-secondary-fixed text-[16px]" data-icon="check">check</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-label-md text-label-md">Direct Customer Access</h4>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Build direct relationships with residents in your immediate vicinity.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-secondary-fixed text-[16px]" data-icon="check">check</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-label-md text-label-md">Managed Last-Mile Logistics</h4>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Professional delivery fleet at your service, no overheads.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-secondary-fixed flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-secondary-fixed text-[16px]" data-icon="check">check</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-label-md text-label-md">Data-Driven Growth</h4>
|
|
<p class="font-body-md text-body-md text-on-surface-variant">Understand your neighborhood demand trends and optimize inventory.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-10 py-4 rounded-xl font-label-md text-label-md hover:bg-opacity-90 transition-all active:scale-95 shadow-md">
|
|
Register as Merchant
|
|
</button>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-surface-container p-6 rounded-2xl flex flex-col justify-between aspect-square">
|
|
<span class="material-symbols-outlined text-4xl text-primary" data-icon="trending_up">trending_up</span>
|
|
<div>
|
|
<p class="text-3xl font-display font-bold">40%+</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Avg Revenue Increase</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-primary text-on-primary p-6 rounded-2xl flex flex-col justify-between aspect-square mt-8">
|
|
<span class="material-symbols-outlined text-4xl" data-icon="groups">groups</span>
|
|
<div>
|
|
<p class="text-3xl font-display font-bold">12k+</p>
|
|
<p class="font-body-sm text-body-sm opacity-80">Daily Orders Handled</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white border border-outline-variant p-6 rounded-2xl flex flex-col justify-between aspect-square">
|
|
<span class="material-symbols-outlined text-4xl text-secondary" data-icon="storefront">storefront</span>
|
|
<div>
|
|
<p class="text-3xl font-display font-bold">5k+</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Active Neighborhood Partners</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container p-6 rounded-2xl flex flex-col justify-between aspect-square mt-8">
|
|
<span class="material-symbols-outlined text-4xl text-primary" data-icon="support_agent">support_agent</span>
|
|
<div>
|
|
<p class="text-3xl font-display font-bold">24/7</p>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">Merchant Partner Support</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- App Promo -->
|
|
<section class="py-16 px-margin-mobile md:px-margin-desktop overflow-hidden">
|
|
<div class="max-w-container-max mx-auto bg-primary rounded-[2rem] p-12 md:p-24 relative overflow-hidden">
|
|
<!-- Background Pattern -->
|
|
<div class="absolute inset-0 opacity-10 pointer-events-none" style="background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 30px 30px;"></div>
|
|
<div class="grid md:grid-cols-2 gap-12 items-center relative z-10">
|
|
<div class="text-on-primary">
|
|
<h2 class="font-display text-display mb-6">Everything local, in one app.</h2>
|
|
<p class="font-body-lg text-body-lg mb-10 opacity-90 max-w-md">Download the Nearle app for the best experience, live order tracking, and exclusive in-app offers.</p>
|
|
<div class="flex flex-wrap gap-4">
|
|
<a class="h-12 border border-white/20 rounded-lg hover:bg-white/10 transition-colors p-1" href="#">
|
|
<img class="h-full" data-alt="Official App Store download badge with Apple logo and text 'Download on the App Store'. White logo on transparent background, high-fidelity brand asset." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB18P04JDfLnhs9V1wKS1PBFLJZJUbaQBBS4XZB41IkNDNKX867pZgYWJlbFwq3Dxusc57JrSEUGyb0Rpss8NOhoQolTwNZhaWAlktJQVWAVeTXm1RBOM6SSPy028m8YLCh8kSWmUuJA7wtP_BL8SEcuhE0AhwP7oktoLRi0_y-k5nNVrFaVj9MZ0EHykaNlap0uBOmSMTQ5S1-mI0pLnG-iiP5Yq7Qv1yj1xXJyC8sqP12CoBEth2JdszaV9ylSXSWnYnD5qMfkO_t"/>
|
|
</a>
|
|
<a class="h-12 border border-white/20 rounded-lg hover:bg-white/10 transition-colors p-1" href="#">
|
|
<img class="h-full" data-alt="Official Google Play Store download badge with colorful Google Play icon and text 'Get it on Google Play'. High-fidelity brand asset for a mobile app landing page." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7uMSDDyijuyWc8cO5Mol0mDJk0txL-5WzEhOawZOKVW8f1wbxaFmEeuKM6hW91lunBD_Fn0BqXvB65DrdDwsCYMdhh4XfltyR2vHZc6u8G3xk0iEwTLK_P2ubJu1xfNO4ouV0OxDeM1Lh1vzg45dBGftLI_QcNOxVugsz2uxb8-RNeOWm9J5V4VccfB_mOC3zhu_ENCXLnDwf_e-7NBZbteTz-cCZm0CY2PmmXJte0XdKPVXUbwxaKqobYvuKJLCxVcGswgYN7RRX"/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center md:justify-end">
|
|
<div class="relative w-full max-w-xs">
|
|
<div class="bg-inverse-surface w-full aspect-[9/19] rounded-[3rem] border-8 border-surface-container-highest shadow-2xl relative overflow-hidden">
|
|
<img class="w-full h-full object-cover" data-alt="A realistic high-fidelity UI mockup of the Nearle mobile app on a premium smartphone screen. The app interface shows a vibrant home screen with category chips (Food, Grocery, Pharmacy), a 'Popular in your Neighborhood' section with appetizing food photography, and a prominent 'Indiranagar' location header. The UI is clean, modern, and utilizes the brand purple #662582." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDmJL8Opv5RZ48am6l7-VDdN7mm4tCo_7Bf7ZntlmDGbIljSPDb6K9PJkFjC36S-gySYxUKqCH14iOh1SweFTliLOcF80kgixvbakabhOXPwKGhcK8Of94b-IxYfm2u2nDYHwYpbcJOl2J6PsUw3SzATO6iFxiUPoilKZAahGRIQtKta2ddejAOnWIHBYBXxc51k2I-liV-bEFjh9xAhvPnWlYrsX_3Nsu8Y7X404aZZUh1j9L3o7hc4GSXxoqWYcKcB3g0xuvFZ73g"/>
|
|
</div>
|
|
<!-- Floating UI Element -->
|
|
<div class="absolute -right-8 top-1/4 bg-white p-4 rounded-xl shadow-xl border border-outline-variant hidden lg:block">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-secondary-fixed flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-secondary text-[18px]" data-icon="shopping_bag">shopping_bag</span>
|
|
</div>
|
|
<p class="font-label-md text-label-md text-on-surface">Order Picked Up!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Footer -->
|
|
<footer class="bg-surface-container-low dark:bg-inverse-surface w-full border-t border-outline-variant dark:border-outline">
|
|
<div class="max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop py-stack-lg">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-gutter mb-12">
|
|
<div class="col-span-2 md:col-span-1">
|
|
<a class="text-headline-md font-headline-md font-extrabold text-primary dark:text-primary-fixed-dim mb-6 inline-block" href="#">Nearle</a>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xs mb-6">India's first truly managed neighborhood living platform, connecting residents with high-quality local businesses.</p>
|
|
<div class="flex gap-4">
|
|
<a class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center hover:text-primary transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="share">share</span>
|
|
</a>
|
|
<a class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center hover:text-primary transition-colors" href="#">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="public">public</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-label-md text-label-md text-on-surface mb-6">Company</h5>
|
|
<ul class="space-y-3">
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">About Us</a></li>
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Careers</a></li>
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Press</a></li>
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Help Center</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-label-md text-label-md text-on-surface mb-6">Partnerships</h5>
|
|
<ul class="space-y-3">
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Merchant Partner</a></li>
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Delivery Partner</a></li>
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Corporate Gifting</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-label-md text-label-md text-on-surface mb-6">Legal</h5>
|
|
<ul class="space-y-3">
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Privacy Policy</a></li>
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Terms of Service</a></li>
|
|
<li><a class="font-body-sm text-body-sm text-on-surface-variant hover:text-primary transition-colors" href="#">Cookie Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-outline-variant pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant">© 2024 Nearle. All rights reserved.</p>
|
|
<div class="flex items-center gap-2 text-on-surface-variant font-body-sm text-body-sm">
|
|
<span>Made for neighborhoods in</span>
|
|
<span class="flex items-center gap-1 font-bold text-on-surface">India <img alt="Indian Flag" class="w-4 h-3 inline-block" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD96lzO751ZJ8CtPavOG9-sj1zEkw_I7uJUUrZ93r387w2Ftxjrsc8qBCj6j1V4uWE5uNscdjwg3LW4t-SW0_Oe4J9GEI6d8TV9o00-CbZM9HCS0LGMNBXwVW3zQ6bNjQ6O6xummSq7Xaq5fGRe_VO_Lc6APUMW2lke0ew4ufasnJPOgXOBvrtOHCLgBD6cyfiIXNR6aPVCc-7jEyxuJCUdXWQXhZlJyQGEuj23OSOT8O5gkLbVt-fDR-7tmn1YABr1-NusXF5h7EZT"/></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script>
|
|
// Simple micro-interactions
|
|
document.querySelectorAll('.active\\:scale-95').forEach(button => {
|
|
button.addEventListener('mousedown', () => {
|
|
button.classList.add('scale-95');
|
|
});
|
|
button.addEventListener('mouseup', () => {
|
|
button.classList.remove('scale-95');
|
|
});
|
|
button.addEventListener('mouseleave', () => {
|
|
button.classList.remove('scale-95');
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |