Aravind/nearle-next-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Aravind
2026-06-20 15:41:55 +05:30
commit 2778527442
163 changed files with 72703 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
stitch_nearle_awwwards_redesign/DESIGN.md Normal file
View File

@@ -0,0 +1,199 @@
---
name: Nearle Logic
colors:
surface: '#f9f9fc'
surface-dim: '#dadadc'
surface-bright: '#f9f9fc'
surface-container-lowest: '#ffffff'
surface-container-low: '#f3f3f6'
surface-container: '#eeeef0'
surface-container-high: '#e8e8ea'
surface-container-highest: '#e2e2e5'
on-surface: '#1a1c1e'
on-surface-variant: '#4d434f'
inverse-surface: '#2f3133'
inverse-on-surface: '#f0f0f3'
outline: '#7f7381'
outline-variant: '#d0c2d1'
surface-tint: '#83429f'
primary: '#4d046a'
on-primary: '#ffffff'
primary-container: '#662582'
on-primary-container: '#de96f9'
inverse-primary: '#ebb2ff'
secondary: '#006d37'
on-secondary: '#ffffff'
secondary-container: '#7bf8a1'
on-secondary-container: '#007239'
tertiary: '#745b00'
on-tertiary: '#ffffff'
tertiary-container: '#cda72b'
on-tertiary-container: '#4f3d00'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#f8d8ff'
primary-fixed-dim: '#ebb2ff'
on-primary-fixed: '#320047'
on-primary-fixed-variant: '#692885'
secondary-fixed: '#7efba4'
secondary-fixed-dim: '#61de8a'
on-secondary-fixed: '#00210c'
on-secondary-fixed-variant: '#005228'
tertiary-fixed: '#ffe08b'
tertiary-fixed-dim: '#ebc246'
on-tertiary-fixed: '#241a00'
on-tertiary-fixed-variant: '#584400'
background: '#f9f9fc'
on-background: '#1a1c1e'
surface-variant: '#e2e2e5'
typography:
display:
fontFamily: Hanken Grotesk
fontSize: 48px
fontWeight: '800'
lineHeight: 56px
letterSpacing: -0.02em
headline-lg:
fontFamily: Hanken Grotesk
fontSize: 32px
fontWeight: '700'
lineHeight: 40px
letterSpacing: -0.01em
headline-lg-mobile:
fontFamily: Hanken Grotesk
fontSize: 24px
fontWeight: '700'
lineHeight: 32px
headline-md:
fontFamily: Hanken Grotesk
fontSize: 20px
fontWeight: '600'
lineHeight: 28px
body-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: '400'
lineHeight: 24px
body-md:
fontFamily: Inter
fontSize: 14px
fontWeight: '400'
lineHeight: 20px
body-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: '400'
lineHeight: 16px
label-md:
fontFamily: Inter
fontSize: 14px
fontWeight: '600'
lineHeight: 20px
letterSpacing: 0.01em
label-sm:
fontFamily: Inter
fontSize: 11px
fontWeight: '700'
lineHeight: 16px
letterSpacing: 0.03em
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
container-max: 1280px
gutter: 16px
margin-mobile: 16px
margin-desktop: 32px
stack-xs: 4px
stack-sm: 8px
stack-md: 16px
stack-lg: 24px
---
## Brand & Style
The design system is engineered for a high-traffic consumer marketplace where speed of intent and clarity of information are paramount. The brand personality is **utilitarian, reliable, and efficient**, mirroring the operational excellence of leading logistics and delivery platforms. It eschews decorative abstractions in favor of high-fidelity, production-ready components that prioritize "findability" and conversion.
The visual style is **Modern Corporate / Systematic**, characterized by:
- **Information Density:** Strategic use of space to show more options without overwhelming the user.
- **Visual Hygiene:** A strict adherence to alignment and a sophisticated grayscale hierarchy to reduce cognitive load.
- **Functional Aesthetics:** Using borders and subtle tonal shifts rather than heavy shadows to define structure.
- **Action-Oriented:** A clear distinction between interactive elements and metadata.
## Colors
The palette is anchored by a deep, authoritative primary purple (#662582), used for brand presence and primary calls to action.
- **Primary:** Used for the main buttons, active selection states, and brand touchpoints.
- **Secondary (Success):** A vibrant green for price drops, discounts, and successful order states.
- **Neutral Scale:** A comprehensive range of grays is used to manage hierarchy.
- *Base Text:* #1A1C1E
- *Secondary Text:* #6B7280
- *Muted/Meta Text:* #9CA3AF
- *Borders:* #E5E7EB
- *Backgrounds:* #F9FAFB
- **Surfaces:** Pure white (#FFFFFF) is the standard for cards and content containers to ensure maximum contrast and legibility.
## Typography
The typographic system utilizes **Hanken Grotesk** for headings to provide a sharp, modern character that feels premium and "tech-forward." For all UI elements, inputs, and long-form metadata, **Inter** is used for its exceptional legibility at small sizes.
- **Weight Strategy:** Use Bold/ExtraBold for titles to create clear section breaks. Use Medium for interactive labels.
- **Hierarchy:** High-contrast sizing ensures that price points and product titles are immediately scannable.
- **Metadata:** Use `body-sm` in a medium-gray hex for secondary information like "Distance," "Time," or "Ratings."
## Layout & Spacing
This design system uses a **Fluid Grid** model with a hard 4px/8px baseline rhythm to ensure consistency across dense data views.
- **Desktop:** 12-column grid with 24px gutters. Content is centered with a max-width of 1280px.
- **Mobile:** Single column with 16px side margins.
- **Density:** Components use tight internal padding (8px or 12px) to maximize the amount of content "above the fold."
- **Vertical Rhythm:** Use `stack-md` (16px) for spacing between related cards and `stack-lg` (24px) for distinct sections or categories.
## Elevation & Depth
To maintain a utilitarian and clean aesthetic, this design system relies on **Low-contrast outlines** and **Tonal layers** rather than heavy shadows.
- **Standard Level:** Level 0 is the background color (#F9FAFB).
- **Surface Level:** Level 1 is the Card surface (#FFFFFF), defined by a 1px solid border (#E5E7EB).
- **Active Elevation:** Only use shadows for "floating" elements like sticky Bottom Sheets, Modals, or Popovers. For these, use a soft, 12% opacity neutral shadow with a 16px blur and 4px Y-offset.
- **Interactive State:** Buttons and clickable cards do not rise on hover; instead, they utilize a subtle background tint change (e.g., White becomes 2% Gray) to signal interactivity.
## Shapes
The shape language is **Soft and approachable** but maintains a professional structural integrity.
- **Base Radius:** 8px (`rounded`) for most interactive components like buttons, input fields, and small cards.
- **Large Radius:** 16px (`rounded-xl`) for main content containers, category banners, and bottom sheets.
- **Exceptions:** Search bars and specific filter chips may use a pill-shape (full radius) to distinguish them from actionable primary buttons.
## Components
### Buttons
- **Primary:** Solid #662582 with white text. 8px radius. High-emphasis.
- **Secondary:** White background with 1px #E5E7EB border. Used for secondary actions like "View Details" or "Add to Cart."
- **Ghost:** No border or background. Used for less critical actions like "See All" in category headers.
### Input Fields & Search
- Inputs must have a 1px #E5E7EB border and #FFFFFF background.
- Active state: 2px border using the primary color.
- Search bars should include a leading icon (Magnifying glass) and a trailing icon for voice or clear-text.
### Cards
- **Product/Service Cards:** 1px border. Vertical stack: Image (top), Title (Bold), Meta-info (Rating, Time, Distance), Price/Action (Bottom).
- **Metadata Layout:** Use horizontal stacks with dot separators (e.g., "4.5 • 20 mins • 2km").
### Navigation & Filters
- **Location Picker:** Top-left prominence. Bold current location with a chevron-down.
- **Category Filters:** Horizontally scrollable list of chips. Active chips take the primary color background; inactive chips have a light gray border.
### Status Indicators
- Use small, circular badges for status (e.g., Green for 'Open', Red for 'Closed').
- Use a secondary brand color (#27AE60) for highlight labels like "Best Seller" or "Discount Applied."

477
stitch_nearle_awwwards_redesign/code.html Normal file
View File

@@ -0,0 +1,477 @@
<!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&amp;family=Hanken+Grotesk:wght@600;700;800&amp;display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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 &amp; 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 &amp; 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 &amp; 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>

BIN
stitch_nearle_awwwards_redesign/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB