Update src/app/page.tsx
This commit is contained in:
230
src/app/page.tsx
230
src/app/page.tsx
@@ -30,17 +30,11 @@ export default function LandingPage() {
|
|||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{
|
||||||
name: "Home",
|
name: "Home", id: "/"},
|
||||||
id: "/",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Products",
|
name: "Products", id: "/products"},
|
||||||
id: "/products",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Contact",
|
name: "Contact", id: "/contact"},
|
||||||
id: "/contact",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x51310"
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x51310"
|
||||||
logoAlt="SKIN CARE Logo"
|
logoAlt="SKIN CARE Logo"
|
||||||
@@ -51,71 +45,46 @@ export default function LandingPage() {
|
|||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplit
|
<HeroSplit
|
||||||
background={{
|
background={{
|
||||||
variant: "radial-gradient",
|
variant: "radial-gradient"}}
|
||||||
}}
|
|
||||||
title="Radiant Skin, Naturally Yours"
|
title="Radiant Skin, Naturally Yours"
|
||||||
description="Discover SKIN CARE's exquisite range of natural products designed to nourish, protect, and revitalize your skin. Experience the glow of healthy, beautiful skin."
|
description="Discover SKIN CARE's exquisite range of natural products designed to nourish, protect, and revitalize your skin. Experience the glow of healthy, beautiful skin."
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Shop Now",
|
text: "Shop Now", href: "/products"},
|
||||||
href: "/products",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
text: "Learn More",
|
text: "Learn More", href: "#about"},
|
||||||
href: "#about",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
avatars={[
|
avatars={[
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-charming-smile-feeling-happy-free-after-graduating-university-relaxing-cafe-waiting-food-making-plans-future-ginger-woman-having-rest-indoors_273609-481.jpg",
|
src: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-charming-smile-feeling-happy-free-after-graduating-university-relaxing-cafe-waiting-food-making-plans-future-ginger-woman-having-rest-indoors_273609-481.jpg", alt: "Customer 1"},
|
||||||
alt: "Customer 1",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/young-man-with-back-hair-arms-crossed-looking-camera_23-2148112769.jpg",
|
src: "http://img.b2bpic.net/free-photo/young-man-with-back-hair-arms-crossed-looking-camera_23-2148112769.jpg", alt: "Customer 2"},
|
||||||
alt: "Customer 2",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-blond-model-dressed-summer-hipster-clothes-trendy-girl-posing-street-background-funny-positive-woman_158538-5479.jpg",
|
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-smiling-blond-model-dressed-summer-hipster-clothes-trendy-girl-posing-street-background-funny-positive-woman_158538-5479.jpg", alt: "Customer 3"},
|
||||||
alt: "Customer 3",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",
|
src: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg", alt: "Customer 4"},
|
||||||
alt: "Customer 4",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-young-redhead-woman-with-charming-smile-healthy-clean-skin_273609-9036.jpg",
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-beautiful-young-redhead-woman-with-charming-smile-healthy-clean-skin_273609-9036.jpg", alt: "Happy Customer"},
|
||||||
alt: "Happy Customer",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
avatarText="Loved by thousands of happy customers"
|
avatarText="Loved by thousands of happy customers"
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/branch-near-rake-cosmetics_23-2147787970.jpg?_wi=1"
|
imageSrc="http://img.b2bpic.net/free-photo/branch-near-rake-cosmetics_23-2147787970.jpg"
|
||||||
imageAlt="Woman with glowing skin applying skincare product"
|
imageAlt="Woman with glowing skin applying skincare product"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
marqueeItems={[
|
marqueeItems={[
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Natural Ingredients", icon: Leaf,
|
||||||
text: "Natural Ingredients",
|
|
||||||
icon: Leaf,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Cruelty-Free", icon: Heart,
|
||||||
text: "Cruelty-Free",
|
|
||||||
icon: Heart,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Dermatologist Approved", icon: ShieldCheck,
|
||||||
text: "Dermatologist Approved",
|
|
||||||
icon: ShieldCheck,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Sustainable Sourcing", icon: Globe,
|
||||||
text: "Sustainable Sourcing",
|
|
||||||
icon: Globe,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text-icon",
|
type: "text-icon", text: "Visible Results", icon: Sparkles,
|
||||||
text: "Visible Results",
|
|
||||||
icon: Sparkles,
|
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
@@ -142,80 +111,53 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
title: "Pure & Potent Ingredients",
|
title: "Pure & Potent Ingredients", description: "We source the finest natural and organic ingredients, ensuring each product is packed with skin-loving nutrients without harsh chemicals.", media: {
|
||||||
description: "We source the finest natural and organic ingredients, ensuring each product is packed with skin-loving nutrients without harsh chemicals.",
|
imageSrc: "http://img.b2bpic.net/free-photo/mysterious-woman-posing-indoors-side-view_23-2149551261.jpg", imageAlt: "Close-up of a natural ingredient"},
|
||||||
media: {
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/mysterious-woman-posing-indoors-side-view_23-2149551261.jpg",
|
|
||||||
imageAlt: "Close-up of a natural ingredient",
|
|
||||||
},
|
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
icon: Leaf,
|
icon: Leaf,
|
||||||
text: "Organic Extracts",
|
text: "Organic Extracts"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Droplet,
|
icon: Droplet,
|
||||||
text: "Deep Hydration",
|
text: "Deep Hydration"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Shield,
|
icon: Shield,
|
||||||
text: "Protective Formulas",
|
text: "Protective Formulas"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
reverse: false,
|
reverse: false
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=x51310",
|
|
||||||
imageAlt: "skin hydration science diagram",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Sustainable & Ethical",
|
title: "Sustainable & Ethical", description: "Our dedication to the planet means using eco-friendly packaging and sustainable practices, so you can feel good about your beauty routine.", media: {
|
||||||
description: "Our dedication to the planet means using eco-friendly packaging and sustainable practices, so you can feel good about your beauty routine.",
|
imageSrc: "http://img.b2bpic.net/free-photo/composition-spa-treatment-cream-hair-brushes_23-2148645562.jpg", imageAlt: "Eco-friendly skincare packaging"},
|
||||||
media: {
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-spa-treatment-cream-hair-brushes_23-2148645562.jpg",
|
|
||||||
imageAlt: "Eco-friendly skincare packaging",
|
|
||||||
},
|
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
icon: Recycle,
|
icon: Recycle,
|
||||||
text: "Recyclable Packaging",
|
text: "Recyclable Packaging"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Earth,
|
icon: Globe,
|
||||||
text: "Ethically Sourced",
|
text: "Ethically Sourced"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Heart,
|
icon: Heart,
|
||||||
text: "Cruelty-Free",
|
text: "Cruelty-Free"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
reverse: true,
|
reverse: true
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/branch-near-rake-cosmetics_23-2147787970.jpg?_wi=2",
|
|
||||||
imageAlt: "skin hydration science diagram",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Dermatologist Approved",
|
title: "Dermatologist Approved", description: "Developed with expert guidance, our products are rigorously tested to ensure efficacy and gentleness for all skin types, even the most sensitive.", media: {
|
||||||
description: "Developed with expert guidance, our products are rigorously tested to ensure efficacy and gentleness for all skin types, even the most sensitive.",
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-self-care-treatment-indoors_23-2148974284.jpg", imageAlt: "Dermatologist examining skin"},
|
||||||
media: {
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-doing-self-care-treatment-indoors_23-2148974284.jpg",
|
|
||||||
imageAlt: "Dermatologist examining skin",
|
|
||||||
},
|
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
icon: CheckCircle,
|
icon: CheckCircle,
|
||||||
text: "Clinically Tested",
|
text: "Clinically Tested"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: UserCheck,
|
icon: UserCheck,
|
||||||
text: "Hypoallergenic",
|
text: "Hypoallergenic"},
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Award,
|
icon: Award,
|
||||||
text: "Proven Results",
|
text: "Proven Results"},
|
||||||
},
|
|
||||||
],
|
],
|
||||||
reverse: false,
|
reverse: false
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-charming-smile-feeling-happy-free-after-graduating-university-relaxing-cafe-waiting-food-making-plans-future-ginger-woman-having-rest-indoors_273609-481.jpg",
|
}
|
||||||
imageAlt: "skin hydration science diagram",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="The SKIN CARE Difference"
|
title="The SKIN CARE Difference"
|
||||||
description="Our commitment to excellence shines through in every product. Discover what sets us apart."
|
description="Our commitment to excellence shines through in every product. Discover what sets us apart."
|
||||||
@@ -228,49 +170,23 @@ export default function LandingPage() {
|
|||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{
|
||||||
id: "1",
|
id: "1", name: "Sophia R.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg", imageAlt: "Sophia R."},
|
||||||
name: "Sophia R.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg",
|
|
||||||
imageAlt: "Sophia R.",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "2",
|
id: "2", name: "Liam K.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-cheerful-girl-baking-kitchen-making-dough-holding-recipe-book-having-ideas_1258-195141.jpg", imageAlt: "Liam K."},
|
||||||
name: "Liam K.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-cheerful-girl-baking-kitchen-making-dough-holding-recipe-book-having-ideas_1258-195141.jpg",
|
|
||||||
imageAlt: "Liam K.",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "3",
|
id: "3", name: "Olivia M.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020787.jpg", imageAlt: "Olivia M."},
|
||||||
name: "Olivia M.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-yellow-jacket-flowers_23-2149020787.jpg",
|
|
||||||
imageAlt: "Olivia M.",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "4",
|
id: "4", name: "Noah J.", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-female-blue-shirt-grey-background_613910-7970.jpg", imageAlt: "Noah J."},
|
||||||
name: "Noah J.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-brunette-female-blue-shirt-grey-background_613910-7970.jpg",
|
|
||||||
imageAlt: "Noah J.",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "5",
|
id: "5", name: "Ava P.", imageSrc: "http://img.b2bpic.net/free-photo/happy-cute-korean-girl-suit-opens-up-heart-shaped-box-with-romantic-gift-white-day-holiday-standing-suit-pink-background_1258-99176.jpg", imageAlt: "Ava P."},
|
||||||
name: "Ava P.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-cute-korean-girl-suit-opens-up-heart-shaped-box-with-romantic-gift-white-day-holiday-standing-suit-pink-background_1258-99176.jpg",
|
|
||||||
imageAlt: "Ava P.",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: "6",
|
id: "6", name: "Ethan C.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-beach_613910-806.jpg", imageAlt: "Ethan C."},
|
||||||
name: "Ethan C.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-sitting-beach_613910-806.jpg",
|
|
||||||
imageAlt: "Ethan C.",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
cardTitle="Hear From Our Happy Customers"
|
cardTitle="Hear From Our Happy Customers"
|
||||||
cardTag="Real Results"
|
cardTag="Real Results"
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Read All Reviews",
|
text: "Read All Reviews", href: "#"},
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
cardAnimation="slide-up"
|
cardAnimation="slide-up"
|
||||||
/>
|
/>
|
||||||
@@ -281,14 +197,7 @@ export default function LandingPage() {
|
|||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
names={[
|
names={[
|
||||||
"Vogue",
|
"Vogue", "Allure", "Cosmopolitan", "Glamour", "Harper's Bazaar", "ELLE", "Beauty Insider"]}
|
||||||
"Allure",
|
|
||||||
"Cosmopolitan",
|
|
||||||
"Glamour",
|
|
||||||
"Harper's Bazaar",
|
|
||||||
"ELLE",
|
|
||||||
"Beauty Insider",
|
|
||||||
]}
|
|
||||||
title="Featured In"
|
title="Featured In"
|
||||||
description="Trusted by leading beauty experts and publications."
|
description="Trusted by leading beauty experts and publications."
|
||||||
/>
|
/>
|
||||||
@@ -301,58 +210,35 @@ export default function LandingPage() {
|
|||||||
logoText="SKIN CARE"
|
logoText="SKIN CARE"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: "Products",
|
title: "Products", items: [
|
||||||
items: [
|
|
||||||
{
|
{
|
||||||
label: "Face Care",
|
label: "Face Care", href: "/products#face"},
|
||||||
href: "/products#face",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Hand Care",
|
label: "Hand Care", href: "/products#hand"},
|
||||||
href: "/products#hand",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Foot Care",
|
label: "Foot Care", href: "/products#foot"},
|
||||||
href: "/products#foot",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "All Products",
|
label: "All Products", href: "/products"},
|
||||||
href: "/products",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Company",
|
title: "Company", items: [
|
||||||
items: [
|
|
||||||
{
|
{
|
||||||
label: "About Us",
|
label: "About Us", href: "#about"},
|
||||||
href: "#about",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Our Philosophy",
|
label: "Our Philosophy", href: "#"},
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Contact Us",
|
label: "Contact Us", href: "/contact"},
|
||||||
href: "/contact",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Legal",
|
title: "Legal", items: [
|
||||||
items: [
|
|
||||||
{
|
{
|
||||||
label: "Privacy Policy",
|
label: "Privacy Policy", href: "#"},
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Terms of Service",
|
label: "Terms of Service", href: "#"},
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: "Cookie Policy",
|
label: "Cookie Policy", href: "#"},
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
|||||||
Reference in New Issue
Block a user