diff --git a/public/apple-icon-v2.png b/public/apple-icon-v2.png new file mode 100644 index 0000000..9fd47f6 Binary files /dev/null and b/public/apple-icon-v2.png differ diff --git a/public/favicon-v2.ico b/public/favicon-v2.ico new file mode 100644 index 0000000..748b1f7 Binary files /dev/null and b/public/favicon-v2.ico differ diff --git a/public/favicon-v2.png b/public/favicon-v2.png new file mode 100644 index 0000000..9fd47f6 Binary files /dev/null and b/public/favicon-v2.png differ diff --git a/public/images/slider-courier-mask-purple-v5.png b/public/images/slider-courier-mask-purple-v5.png new file mode 100644 index 0000000..574d369 Binary files /dev/null and b/public/images/slider-courier-mask-purple-v5.png differ diff --git a/public/logo-purple-v3.png b/public/logo-purple-v3.png new file mode 100644 index 0000000..f7c33e7 Binary files /dev/null and b/public/logo-purple-v3.png differ diff --git a/public/logo-v3.png b/public/logo-v3.png new file mode 100644 index 0000000..8eaae4a Binary files /dev/null and b/public/logo-v3.png differ diff --git a/public/logo-white-v3.png b/public/logo-white-v3.png new file mode 100644 index 0000000..f2b697f Binary files /dev/null and b/public/logo-white-v3.png differ diff --git a/scratch/update_logos.py b/scratch/update_logos.py new file mode 100644 index 0000000..e19ca79 --- /dev/null +++ b/scratch/update_logos.py @@ -0,0 +1,124 @@ +import os +from PIL import Image, ImageDraw + +def update_logos(): + src_logo_path = "/Users/apple/.gemini/antigravity-ide/brain/822556bd-47a7-4c07-8975-803618af0a3a/media__1781948467684.png" + rider_image_base = "public/images/slider-courier-mask-purple-v3.png" + rider_image_out = "public/images/slider-courier-mask-purple-v5.png" + + if not os.path.exists(src_logo_path): + print(f"Source logo not found at {src_logo_path}") + return + + # 1. Load the original logo + logo_img = Image.open(src_logo_path).convert("RGBA") + logo_w, logo_h = logo_img.size + + # 2. Save original logo directly as logo-v3.png (white text, purple icon, white icon bg) + # Just in case we need it, but we will make logo-white-v3.png the default white logo + logo_img.save("public/logo-v3.png", "PNG") + + # 3. Create logo-purple-v3.png (for Navbar) + # Icon (x < 40) is kept as-is (purple outline/bag, white background) + # Text (x >= 40) white pixels become purple #662582 (102, 37, 130) + logo_purple = Image.new("RGBA", (logo_w, logo_h)) + pixels_orig = logo_img.load() + pixels_purple = logo_purple.load() + + for x in range(logo_w): + for y in range(logo_h): + r, g, b, a = pixels_orig[x, y] + if a > 0: + if x < 40: + # Keep original icon colors + pixels_purple[x, y] = (r, g, b, a) + else: + # Convert white text to purple, keep ® sign purple + if r > 200 and g > 200 and b > 200: + pixels_purple[x, y] = (102, 37, 130, a) + else: + pixels_purple[x, y] = (r, g, b, a) + else: + pixels_purple[x, y] = (0, 0, 0, 0) + + logo_purple.save("public/logo-purple-v3.png", "PNG") + print("Saved public/logo-purple-v3.png") + + # 4. Create logo-white-v3.png (for Footer and Backpack) + # Icon (x < 40): convert purple border/bag to white, convert white background circle to transparent + # Text (x >= 40): convert all text/® sign to white + logo_white = Image.new("RGBA", (logo_w, logo_h)) + pixels_white = logo_white.load() + + for x in range(logo_w): + for y in range(logo_h): + r, g, b, a = pixels_orig[x, y] + if a > 0: + if x < 40: + # Icon area + if r > 200 and g > 200 and b > 200: + # White background of circle -> transparent + pixels_white[x, y] = (0, 0, 0, 0) + else: + # Purple outline and purple shopping bag -> white + pixels_white[x, y] = (255, 255, 255, a) + else: + # Text area: make everything white (text is already white, ® sign becomes white) + pixels_white[x, y] = (255, 255, 255, a) + else: + pixels_white[x, y] = (0, 0, 0, 0) + + logo_white.save("public/logo-white-v3.png", "PNG") + print("Saved public/logo-white-v3.png") + + # 5. Create Favicon from the icon area (X: 0 to 39, Y: 4 to 43) + # Note: we use original icon crop (has white background circle and purple border) + icon_crop = logo_img.crop((0, 4, 40, 44)) + + # Save as versioned Favicon and Apple Icon + icon_crop.save("public/favicon-v2.png", "PNG") + icon_crop.save("public/apple-icon-v2.png", "PNG") + + # Save as favicon-v2.ico to both public/ and src/app/ + icon_crop.save("public/favicon-v2.ico", format="ICO", sizes=[(32, 32), (48, 48)]) + icon_crop.save("src/app/favicon-v2.ico", format="ICO", sizes=[(32, 32), (48, 48)]) + print("Saved favicon-v2.ico and apple-icon-v2.png to public/ and src/app/") + + # 6. Overlay the new logo-white-v3.png onto the delivery rider's backpack + if os.path.exists(rider_image_base): + rider_img = Image.open(rider_image_base).convert("RGBA") + + # Draw a fresh badge (matching --brand-dark / #120217) + badge_w = 148 + badge_h = 38 + badge_left = 887 - (badge_w // 2) + badge_top = 270 - (badge_h // 2) + badge_right = badge_left + badge_w + badge_bottom = badge_top + badge_h + + draw_rider = ImageDraw.Draw(rider_img) + draw_rider.rounded_rectangle( + [badge_left, badge_top, badge_right, badge_bottom], + radius=8, + fill=(18, 2, 23, 255) + ) + + # Resize logo-white-v3.png (original ratio 275x45 -> width 120, height 20) + logo_w_badge = 120 + logo_h_badge = 20 + resized_white_logo = logo_white.resize((logo_w_badge, logo_h_badge), Image.Resampling.LANCZOS) + + logo_left = 887 - (logo_w_badge // 2) + logo_top = 270 - (logo_h_badge // 2) + + # Paste logo on top of the black badge + rider_img.paste(resized_white_logo, (logo_left, logo_top), resized_white_logo) + + # Save output + rider_img.save(rider_image_out, "PNG") + print(f"Created updated rider image with white logo at {rider_image_out}") + else: + print(f"Rider base image not found at {rider_image_base}") + +if __name__ == "__main__": + update_logos() diff --git a/src/app/favicon-v2.ico b/src/app/favicon-v2.ico new file mode 100644 index 0000000..748b1f7 Binary files /dev/null and b/src/app/favicon-v2.ico differ diff --git a/src/app/globals.css b/src/app/globals.css index f917ede..226b432 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -376,20 +376,19 @@ body { .hero-map-layer { position: absolute; - width: 86%; - left: 2%; - top: -1%; - height: 610px; - opacity: 0.72; + width: 35%; + left: -5%; + top: 20px; + height: 280px; + opacity: 0.10; z-index: 1; - mix-blend-mode: screen; - animation: hero-map-drift 18s ease-in-out infinite alternate; + mix-blend-mode: normal; + animation: none; } .hero-map-layer img { - filter: sepia(1) saturate(4.6) hue-rotate(230deg) brightness(0.9) contrast(1.35) - drop-shadow(0 0 22px rgba(189, 52, 254, 0.34)); - opacity: 0.95; + filter: brightness(0.6) contrast(1.1); + opacity: 0.8; } .hero-content { @@ -452,17 +451,17 @@ body { .hero-map-layer { position: absolute; - width: 120%; - left: -10%; - top: 5%; - height: 380px; /* Explicit height on mobile */ - opacity: 0.3; + width: 100%; + left: 0; + top: 10%; + height: 300px; + opacity: 0.08; z-index: 1; - mix-blend-mode: screen; + mix-blend-mode: normal; } .hero-map-layer img { - filter: sepia(1) saturate(4) hue-rotate(230deg) brightness(0.76) contrast(1.18); + filter: brightness(0.5) contrast(1); opacity: 0.7; } diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx index aed148f..6d239c7 100644 --- a/src/components/home/Hero.tsx +++ b/src/components/home/Hero.tsx @@ -31,113 +31,62 @@ export function Hero() { {/* ─── Base Dark Background Panel (Clipped diagonally) ─── */}
- {/* Flat Dotted World Map Layer */} -
+ {/* Subtle Background Dot Texture (Minimal, barely visible) */} +
Dotted World Map - - {/* Animated Route Lines & Glowing Location Nodes */} - - - - - - - - - - - {/* Glowing nodes */} - - - - - - - - - - - - - - - - - - - - - - {/* Arc dashed lines with moving stroke-dash animation */} - - - - - - -
+ {/* Minimal Route Animation (2-3 thin lines only, very subtle) */} + + + + + + + + + + + {/* Minimal glow nodes - only 2 small ones at top */} + + + + + + + {/* Only 2 very thin route lines at top - staying clear of text area */} + + + + {/* Soft purple radial glow behind the bike near the diagonal edge (clipped) */}
diff --git a/src/components/home/HyperlocalFeatures.tsx b/src/components/home/HyperlocalFeatures.tsx index 0fbf044..3e85158 100644 --- a/src/components/home/HyperlocalFeatures.tsx +++ b/src/components/home/HyperlocalFeatures.tsx @@ -21,108 +21,170 @@ const FEATURES = [ export function HyperlocalFeatures() { return ( -
- {/* Background soft blur */} -
+
+ {/* Scoped CSS styles for precise layout enforcement */} + -
-
+ {/* Subtle background radial glows */} +
+
+ + {/* Inner container */} +
+ + {/* Left Column: Visual Storytelling */} +
- {/* Left Column: Visual Storytelling (5 cols) */} -
-
- Fresh groceries and goods delivered at home -
- - {/* Floating Badge */} -
-
-
- -
-
-

100% Eco-Friendly

-

Reducing neighbor carbon footprint

-
-
-
-
- - {/* Background Decorative Circle */} -
+ {/* Grocery image inside the lower area (occupies exactly 62% height) */} +
+ Fresh groceries and goods delivered at home
- {/* Right Column: Dark Feature Panel (7 cols) */} -
-
- {/* Internal vector decor */} -
-
- -
- - Care & Quality - - -

- Relax at Home,
- We Care. -

- -

- Nearle connects you to local, trusted neighborhood shops, bringing you the best essentials while taking care of the logistics and safety standards. -

- - {/* Features List */} -
- {FEATURES.map((item) => ( -
-
- -
-
-

- {item.title} -

-

- {item.desc} -

-
-
- ))} -
- - {/* Onboarding Call to Action */} - + {/* Eco-Friendly floating pill */} +
+
+
+ +
+
+

100% Eco-Friendly

+

Reducing neighbor carbon footprint

+ {/* Floating Proof Badges near the image (Desktop only, hidden below 900px) */} +
+
+ +
+ 2KM Local Delivery +
+ +
+
+ +
+ Verified Partners +
+
+ + {/* Right Column: Dark Feature Panel */} +
+ {/* Internal ambient glows (subtle) */} +
+
+ +
+ + Care & Quality + + +

+ Relax at Home,
+ We Care. +

+ +

+ Nearle connects you to local, trusted neighborhood shops, bringing you the best essentials while taking care of the logistics and safety standards. +

+ + {/* Features List with vertical connector line */} +
+ + {/* Vertical connector line (orange low-opacity) */} +
+ + {FEATURES.map((item) => ( +
+ + {/* Orange icon circle */} +
+ +
+ +
+

+ {item.title} +

+

+ {item.desc} +

+
+
+ ))} +
+ + {/* Divider Line above CTA Area */} +
+ + {/* Onboarding Call to Action */} + + +
+
+
);