bender/49ec0d22-777f-4eba-ad53-110b1976d741
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-11 19:47:35 +00:00
parent 3aeb2725d7
commit 450236555c
1 changed files with 54 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
src/app/page.tsx
View File

@@ -32,21 +32,13 @@ export default function LandingPage() {
<NavbarStyleFullscreen
navItems={[
{
name: "Products",
id: "products",
},
name: "Products", id: "products"},
{
name: "Routine",
id: "routine",
},
name: "Routine", id: "routine"},
{
name: "About",
id: "about",
},
name: "About", id: "about"},
{
name: "Contact",
id: "contact",
},
name: "Contact", id: "contact"},
]}
brandName="Flux Care Men"
/>
@@ -55,67 +47,42 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboard
background={{
variant: "gradient-bars",
}}
variant: "gradient-bars"}}
title="Care Like a Man. Look Like a Legend."
description="Premium Algerian grooming solutions engineered for the modern man. Elevate your routine."
buttons={[
{
text: "Shop Now",
href: "#products",
},
text: "Shop Now", href: "#products"},
{
text: "Discover the Routine",
href: "#routine",
},
text: "Discover the Routine", href: "#routine"},
]}
imageSrc="http://img.b2bpic.net/free-photo/young-bearded-man-lying-water_23-2148022363.jpg"
imageAlt="Flux Care Men Product Showcase"
mediaAnimation="blur-reveal"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/african-american-guy-wearing-jacket-checkered-shirt-leaning-wall-looking-away_613910-21130.jpg",
alt: "Confident urban male",
},
src: "http://img.b2bpic.net/free-photo/african-american-guy-wearing-jacket-checkered-shirt-leaning-wall-looking-away_613910-21130.jpg", alt: "Confident urban male"},
{
src: "http://img.b2bpic.net/free-photo/handsome-blond-man-dark-blue-shirt-posing-grey-background-studio_613910-12752.jpg",
alt: "Style conscious man",
},
src: "http://img.b2bpic.net/free-photo/handsome-blond-man-dark-blue-shirt-posing-grey-background-studio_613910-12752.jpg", alt: "Style conscious man"},
{
src: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-14795.jpg",
alt: "Refined male portrait",
},
src: "http://img.b2bpic.net/free-photo/studio-portrait-serious-bearded-male-dressed-suit_613910-14795.jpg", alt: "Refined male portrait"},
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg",
alt: "Modern grooming advocate",
},
src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg", alt: "Modern grooming advocate"},
{
src: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg",
alt: "Professional young man",
},
src: "http://img.b2bpic.net/free-photo/young-cheerful-man-classic-black-suit-white-shirt-with-wireless-earphones-happily-lookingin-camera-with-laptop-hands-while-spending-time-outdoor_574295-5776.jpg", alt: "Professional young man"},
]}
avatarText="Trusted by 5,000+ men across Algeria."
marqueeItems={[
{
type: "text",
text: "Premium Quality",
},
type: "text", text: "Premium Quality"},
{
type: "text",
text: "Locally Crafted",
},
type: "text", text: "Locally Crafted"},
{
type: "text",
text: "Dermatologist Tested",
},
type: "text", text: "Dermatologist Tested"},
{
type: "text",
text: "Paraben Free",
},
type: "text", text: "Paraben Free"},
{
type: "text",
text: "Modern Masculine",
},
type: "text", text: "Modern Masculine"},
]}
/>
</div>
@@ -128,59 +95,23 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "p1",
brand: "Flux Care",
name: "Face Mask Anti-Acné 3en1",
price: "1200 DZD",
rating: 5,
reviewCount: "128",
imageSrc: "http://img.b2bpic.net/free-photo/skin-care-product-arrangement-sand_23-2148761480.jpg",
},
id: "p1", brand: "Flux Care", name: "Face Mask Anti-Acné 3en1", price: "1200 DZD", rating: 5,
reviewCount: "128", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOu61tMS28slPin08NWeIPsleJ/uploaded-1778528840404-z8txvc6y.jpg"},
{
id: "p2",
brand: "Flux Care",
name: "Déodorant Longue Durée",
price: "850 DZD",
rating: 5,
reviewCount: "94",
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-tube-product-with-gift-box-balloons-black-background_187299-46830.jpg",
},
id: "p2", brand: "Flux Care", name: "Déodorant Longue Durée", price: "850 DZD", rating: 5,
reviewCount: "94", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOu61tMS28slPin08NWeIPsleJ/uploaded-1778528840404-2pzed9da.jpg"},
{
id: "p3",
brand: "Flux Care",
name: "Gel Douche 5 Plantes",
price: "950 DZD",
rating: 4,
reviewCount: "82",
imageSrc: "http://img.b2bpic.net/free-photo/gel-healthy-background-blank-shampoo_1203-4623.jpg",
},
id: "p3", brand: "Flux Care", name: "Gel Douche 5 Plantes", price: "950 DZD", rating: 4,
reviewCount: "82", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOu61tMS28slPin08NWeIPsleJ/uploaded-1778528840404-4766d1tv.jpg"},
{
id: "p4",
brand: "Flux Care",
name: "Masque Capillaire",
price: "1400 DZD",
rating: 5,
reviewCount: "45",
imageSrc: "http://img.b2bpic.net/free-photo/collection-aluminum-products-packaging_23-2150820956.jpg",
},
id: "p4", brand: "Flux Care", name: "Masque Capillaire", price: "1400 DZD", rating: 5,
reviewCount: "45", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DOu61tMS28slPin08NWeIPsleJ/uploaded-1778528840404-078z7iy6.jpg"},
{
id: "p5",
brand: "Flux Care",
name: "Sérum Visage",
price: "1800 DZD",
rating: 5,
reviewCount: "67",
imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232236.jpg",
},
id: "p5", brand: "Flux Care", name: "Sérum Visage", price: "1800 DZD", rating: 5,
reviewCount: "67", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232236.jpg"},
{
id: "p6",
brand: "Flux Care",
name: "Kit Soin Complet",
price: "4500 DZD",
rating: 5,
reviewCount: "210",
imageSrc: "http://img.b2bpic.net/free-photo/vanity-case-with-products-arrangement_23-2149879965.jpg",
},
id: "p6", brand: "Flux Care", name: "Kit Soin Complet", price: "4500 DZD", rating: 5,
reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/vanity-case-with-products-arrangement_23-2149879965.jpg"},
]}
title="Essential Grooming"
description="Selected formulas designed to keep your skin sharp and protected."
@@ -195,19 +126,13 @@ export default function LandingPage() {
features={[
{
icon: Droplets,
title: "Cleanse",
description: "Remove impurities with our gentle formulas.",
},
title: "Cleanse", description: "Remove impurities with our gentle formulas."},
{
icon: Target,
title: "Treat",
description: "Target specific skin needs with our active serums.",
},
title: "Treat", description: "Target specific skin needs with our active serums."},
{
icon: Shield,
title: "Protect",
description: "Shield your skin against urban stressors daily.",
},
title: "Protect", description: "Shield your skin against urban stressors daily."},
]}
title="Your Daily Ritual"
description="Master your grooming in three simple steps."
@@ -221,33 +146,13 @@ export default function LandingPage() {
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "100%",
title: "Made in Algeria",
description: "Proudly crafted for local needs.",
imageSrc: "http://img.b2bpic.net/free-photo/dark-wavy-abstract-textured-background_84443-83983.jpg",
},
id: "m1", value: "100%", title: "Made in Algeria", description: "Proudly crafted for local needs.", imageSrc: "http://img.b2bpic.net/free-photo/dark-wavy-abstract-textured-background_84443-83983.jpg"},
{
id: "m2",
value: "0%",
title: "No Parabens",
description: "Clean, natural formulations only.",
imageSrc: "http://img.b2bpic.net/free-photo/dark-textured-stone-surface_84443-73662.jpg",
},
id: "m2", value: "0%", title: "No Parabens", description: "Clean, natural formulations only.", imageSrc: "http://img.b2bpic.net/free-photo/dark-textured-stone-surface_84443-73662.jpg"},
{
id: "m3",
value: "Tested",
title: "Dermatologist Approved",
description: "Safety and effectiveness guaranteed.",
imageSrc: "http://img.b2bpic.net/free-photo/black-paper-texture-background_23-2148171278.jpg",
},
id: "m3", value: "Tested", title: "Dermatologist Approved", description: "Safety and effectiveness guaranteed.", imageSrc: "http://img.b2bpic.net/free-photo/black-paper-texture-background_23-2148171278.jpg"},
{
id: "m4",
value: "All Skin",
title: "Universal Care",
description: "Perfect for every skin type.",
imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-water-with-bubbles_23-2147933806.jpg",
},
id: "m4", value: "All Skin", title: "Universal Care", description: "Perfect for every skin type.", imageSrc: "http://img.b2bpic.net/free-photo/dark-blue-water-with-bubbles_23-2147933806.jpg"},
]}
title="Why Flux Care Men?"
description="Commitment to local craft and dermatological precision."
@@ -259,8 +164,7 @@ export default function LandingPage() {
useInvertedBackground={true}
title="Crafted for the Urban Man"
description={[
"Born in Algeria, Flux Care Men is dedicated to the modern man who values precision and style. We believe looking good shouldn't be complicated.",
]}
"Born in Algeria, Flux Care Men is dedicated to the modern man who values precision and style. We believe looking good shouldn't be complicated."]}
/>
</div>
@@ -269,30 +173,15 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Amine K.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-with-crossed-arms-wearing-wool-suit_613910-1866.jpg",
},
id: "1", name: "Amine K.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-with-crossed-arms-wearing-wool-suit_613910-1866.jpg"},
{
id: "2",
name: "Yassine M.",
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-posing-grey-background_613910-11594.jpg",
},
id: "2", name: "Yassine M.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-redhead-bearded-male-dressed-suit-posing-grey-background_613910-11594.jpg"},
{
id: "3",
name: "Karim B.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-grey-vignette-background_613910-8472.jpg",
},
id: "3", name: "Karim B.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-male-grey-vignette-background_613910-8472.jpg"},
{
id: "4",
name: "Sofiane R.",
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-man-wearing-leaning-against-rusty-colored-background_150588-67.jpg",
},
id: "4", name: "Sofiane R.", imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-man-wearing-leaning-against-rusty-colored-background_150588-67.jpg"},
{
id: "5",
name: "Hamza D.",
imageSrc: "http://img.b2bpic.net/free-photo/beard-care_1098-14681.jpg",
},
id: "5", name: "Hamza D.", imageSrc: "http://img.b2bpic.net/free-photo/beard-care_1098-14681.jpg"},
]}
cardTitle="What Men Are Saying"
cardTag="Community Verified"
@@ -307,22 +196,14 @@ export default function LandingPage() {
description="Have questions? Need advice? Reach out to our grooming experts."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
name: "name", type: "text", placeholder: "Your Name", required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
name: "email", type: "email", placeholder: "Email Address", required: true,
},
]}
textarea={{
name: "message",
placeholder: "How can we help?",
rows: 4,
name: "message", placeholder: "How can we help?", rows: 4,
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/modern-man-taking-care-his-beard_23-2149075001.jpg"
@@ -334,37 +215,23 @@ export default function LandingPage() {
<FooterSimple
columns={[
{
title: "Social",
items: [
title: "Social", items: [
{
label: "Instagram",
href: "#",
},
label: "Instagram", href: "#"},
{
label: "Facebook",
href: "#",
},
label: "Facebook", href: "#"},
{
label: "TikTok",
href: "#",
},
label: "TikTok", href: "#"},
],
},
{
title: "Customer",
items: [
title: "Customer", items: [
{
label: "WhatsApp Order",
href: "#",
},
label: "WhatsApp Order", href: "#"},
{
label: "Contact Us",
href: "#contact",
},
label: "Contact Us", href: "#contact"},
{
label: "Shipping Policy",
href: "#",
},
label: "Shipping Policy", href: "#"},
],
},
]}
@@ -375,4 +242,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}