bender/c628a73f-3577-4ab4-a4c5-388e6a3f3faf
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-03-26 09:52:31 +00:00
parent 5315c74689
commit fd6d27f734
1 changed files with 32 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/app/page.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { ThemeProvider, ThemeProviderProps } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
@@ -9,45 +9,25 @@ import BlogCardOne from '@/components/sections/blog/BlogCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
const assetMap = [
{"id":"hero-media-1","url":"http://img.b2bpic.net/free-photo/beauty-portrait-lovely-pleased-young-woman-smiles-happily-holds-cosmetic-brushes-applying-makeup-wears-headband-casual-t-shirt-looks-directly-camera-isolated-brown-background_273609-56898.jpg","alt":"woman with glowing skin natural light"},
{"id":"hero-media-2","url":"http://img.b2bpic.net/free-photo/beautiful-african-woman-lying-spa-salon_176420-12927.jpg","alt":"close up facial treatment glowing skin"},
{"id":"hero-media-3","url":"http://img.b2bpic.net/free-photo/room-with-blue-couchs-with-white-cushions_1203-374.jpg","alt":"aesthetic clinic interior modern minimalist"},
{"id":"hero-media-4","url":"http://img.b2bpic.net/free-photo/close-up-woman-applying-make-up_23-2149190620.jpg","alt":"gentle hands applying facial mask"},
{"id":"hero-media-5","url":"http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334255.jpg","alt":"exfoliating facial treatment healthy skin"},
{"id":"hero-media-6","url":"http://img.b2bpic.net/free-photo/young-woman-getting-skincare-procedure_23-2148825332.jpg","alt":"woman smiling after successful facial"},
{"id":"testimonial-1","url":"http://img.b2bpic.net/free-photo/portrait-makeup-artist-applying-products_23-2149350642.jpg","alt":"happy woman clear skin smiling"},
{"id":"testimonial-2","url":"http://img.b2bpic.net/free-photo/content-joyful-teenage-gir-squints-face-from-happiness_273609-28166.jpg","alt":"confident young woman perfect skin"},
{"id":"testimonial-3","url":"http://img.b2bpic.net/free-photo/side-view-woman-posing-with-gold-body-painting_23-2150466356.jpg","alt":"woman feeling fresh after facial"},
{"id":"testimonial-4","url":"http://img.b2bpic.net/free-photo/happy-face-young-woman-talking-mobile-phone_1262-5142.jpg","alt":"client pleased with skincare outcome"},
{"id":"instagram-post-1","url":"http://img.b2bpic.net/free-photo/view-decoration-with-brown-lipstick-plant_23-2148299612.jpg","alt":"skincare routine product flat lay"},
{"id":"instagram-post-2","url":"http://img.b2bpic.net/free-photo/front-view-young-beautiful-female-pink-bathrobe-taking-photo_140725-17164.jpg","alt":"woman applying face mask selfie"},
{"id":"instagram-post-3","url":"http://img.b2bpic.net/free-photo/young-beautiful-girl-lies-beautician-s-table-receives-procedures-light-facial-massage-using-oil_343596-4184.jpg","alt":"close up of facial massage"},
{"id":"booking-contact-image","url":"http://img.b2bpic.net/free-photo/abstract-blur-defocused-shopping-mall_1203-9539.jpg","alt":"clean minimal spa reception desk"},
{"id":"about-us-illustration","url":"http://img.b2bpic.net/free-photo/caucasian-blonde-girl-applies-anti-aging-cream-skin-aging-her-mother-s-face-indoors-concept-natural-cosmetics-wrinkle-smoothing_197531-31469.jpg","alt":"esthetician consulting client modern clinic"},
{"id":"brand-logo","url":"http://img.b2bpic.net/free-vector/cosmetic-label-template-design_742173-23951.jpg","alt":"GlowSkin logo aesthetic minimalist"}
];
function getAssetUrl(id) {
const asset = assetMap.find(a => a.id === id);
return asset ? asset.url : '';
}
function getAssetAlt(id) {
const asset = assetMap.find(a => a.id === id);
return asset ? asset.alt : 'Image';
}
const filteredNavItems = [
const navItems = [
{
name: "Home", id: "home-hero", href: "/"
name: "Home", id: "/", href: "/"
},
{
name: "Services", id: "services-page", href: "/services"
name: "Services", id: "/services", href: "/services"
},
{
name: "About", id: "/about", href: "/about"
},
{
name: "Book", id: "/book", href: "/book"
},
{
name: "Contact", id: "/contact", href: "/contact"
}
];
const themeProps = {
const themeProps: ThemeProviderProps = {
defaultButtonVariant: "elastic-effect", defaultTextAnimation: "reveal-blur", borderRadius: "rounded", contentWidth: "small", sizing: "largeSmallSizeLargeTitles", background: "noise", cardStyle: "gradient-radial", primaryButtonStyle: "flat", secondaryButtonStyle: "glass", headingFontWeight: "normal"};
export default function HomePage() {
@@ -56,7 +36,7 @@ export default function HomePage() {
<div id="nav" data-section="nav">
<NavbarStyleCentered
brandName="GlowSkin.lb"
navItems={filteredNavItems}
navItems={navItems}
button={{
text: "Book Appointment", href: "/book"
}}
@@ -73,17 +53,16 @@ export default function HomePage() {
{ text: "View Services", href: "/services" }
]}
mediaItems={[
{ imageSrc: getAssetUrl("hero-media-1"), imageAlt: getAssetAlt("hero-media-1") },
{ imageSrc: getAssetUrl("hero-media-2"), imageAlt: getAssetAlt("hero-media-2") },
{ imageSrc: getAssetUrl("hero-media-3"), imageAlt: getAssetAlt("hero-media-3") },
{ imageSrc: getAssetUrl("hero-media-4"), imageAlt: getAssetAlt("hero-media-4") },
{ imageSrc: getAssetUrl("hero-media-5"), imageAlt: getAssetAlt("hero-media-5") },
{ imageSrc: getAssetUrl("hero-media-6"), imageAlt: getAssetAlt("hero-media-6") }
{ imageSrc: "http://img.b2bpic.net/free-photo/beauty-portrait-lovely-pleased-young-woman-smiles-happily-holds-cosmetic-brushes-applying-makeup-wears-headband-casual-t-shirt-looks-directly-camera-isolated-brown-background_273609-56898.jpg", imageAlt: "woman with glowing skin natural light" },
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-woman-lying-spa-salon_176420-12927.jpg", imageAlt: "close up facial treatment glowing skin" },
{ imageSrc: "http://img.b2bpic.net/free-photo/room-with-blue-couchs-with-white-cushions_1203-374.jpg", imageAlt: "aesthetic clinic interior modern minimalist" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-applying-make-up_23-2149190620.jpg", imageAlt: "gentle hands applying facial mask" },
{ imageSrc: "http://img.b2bpic.net/free-photo/person-getting-micro-needling-beauty-treatment_23-2149334255.jpg", imageAlt: "exfoliating facial treatment healthy skin" },
{ imageSrc: "http://img.b2bpic.net/free-photo/young-woman-getting-skincare-procedure_23-2148825332.jpg", imageAlt: "woman smiling after successful facial" }
]}
mediaAnimation="slide-up"
buttonAnimation="slide-up"
tagAnimation="none"
useInvertedBackground={true}
/>
</div>
@@ -108,8 +87,8 @@ export default function HomePage() {
title="Why Choose Us"
description="At Glow Skin, we focus on results—not just treatments. We combine advanced techniques with personalized care to deliver visible improvements from your very first session. Our serene and clean environment ensures a relaxing and effective experience."
buttons={[{ text: "View All Services", href: "/services" }]}
imageSrc={getAssetUrl("about-us-illustration")}
imageAlt={getAssetAlt("about-us-illustration")}
imageSrc="http://img.b2bpic.net/free-photo/caucasian-blonde-girl-applies-anti-aging-cream-skin-aging-her-mother-s-face-indoors-concept-natural-cosmetics-wrinkle-smoothing_197531-31469.jpg"
imageAlt="esthetician consulting client modern clinic"
useInvertedBackground={true}
tagAnimation="none"
buttonAnimation="slide-up"
@@ -122,20 +101,16 @@ export default function HomePage() {
description="See the amazing transformations our clients have experienced at Glow Skin. Your journey to radiant skin starts here."
testimonials={[
{
id: "1", name: "Sarah Johnson", role: "Client", testimonial: "My skin has never looked better! The hydrafacial was a game-changer. Highly recommend GlowSkin!", imageSrc: getAssetUrl("testimonial-1"),
imageAlt: getAssetAlt("testimonial-1")
id: "1", name: "Sarah Johnson", role: "Client", testimonial: "My skin has never looked better! The hydrafacial was a game-changer. Highly recommend GlowSkin!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-makeup-artist-applying-products_23-2149350642.jpg", imageAlt: "happy woman clear skin smiling"
},
{
id: "2", name: "Amina Ali", role: "Client", testimonial: "The deep cleansing facial made such a difference. My pores are clear, and my skin feels so smooth.", imageSrc: getAssetUrl("testimonial-2"),
imageAlt: getAssetAlt("testimonial-2")
id: "2", name: "Amina Ali", role: "Client", testimonial: "The deep cleansing facial made such a difference. My pores are clear, and my skin feels so smooth.", imageSrc: "http://img.b2bpic.net/free-photo/content-joyful-teenage-gir-squints-face-from-happiness_273609-28166.jpg", imageAlt: "confident young woman perfect skin"
},
{
id: "3", name: "Layla Karam", role: "Client", testimonial: "After just a few acne treatments, my skin is significantly clearer. Thank you, GlowSkin!", imageSrc: getAssetUrl("testimonial-3"),
imageAlt: getAssetAlt("testimonial-3")
id: "3", name: "Layla Karam", role: "Client", testimonial: "After just a few acne treatments, my skin is significantly clearer. Thank you, GlowSkin!", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-posing-with-gold-body-painting_23-2150466356.jpg", imageAlt: "woman feeling fresh after facial"
},
{
id: "4", name: "Fatima Hassan", role: "Client", testimonial: "The dermapen sessions have really reduced my old acne scars. I feel so much more confident!", imageSrc: getAssetUrl("testimonial-4"),
imageAlt: getAssetAlt("testimonial-4")
id: "4", name: "Fatima Hassan", role: "Client", testimonial: "The dermapen sessions have really reduced my old acne scars. I feel so much more confident!", imageSrc: "http://img.b2bpic.net/free-photo/happy-face-young-woman-talking-mobile-phone_1262-5142.jpg", imageAlt: "client pleased with skincare outcome"
}
]}
animationType="slide-up"
@@ -150,22 +125,13 @@ export default function HomePage() {
description="@glowskin.lb_facial"
blogs={[
{
id: "post-1", category: "Skincare Tips", title: "Your Daily Skincare Routine", excerpt: "A step-by-step guide to achieving healthy, glowing skin every day.", imageSrc: getAssetUrl("instagram-post-1"),
imageAlt: getAssetAlt("instagram-post-1"),
authorName: "GlowSkin.lb", authorAvatar: getAssetUrl("brand-logo"),
date: "2 days ago"
id: "post-1", category: "Skincare Tips", title: "Your Daily Skincare Routine", excerpt: "A step-by-step guide to achieving healthy, glowing skin every day.", imageSrc: "http://img.b2bpic.net/free-photo/view-decoration-with-brown-lipstick-plant_23-2148299612.jpg", imageAlt: "skincare routine product flat lay", authorName: "GlowSkin.lb", authorAvatar: "http://img.b2bpic.net/free-vector/cosmetic-label-template-design_742173-23951.jpg", date: "2 days ago"
},
{
id: "post-2", category: "Treatments", title: "Benefits of Hydrafacial", excerpt: "Dive deep into why Hydrafacial is the ultimate solution for instant glow.", imageSrc: getAssetUrl("instagram-post-2"),
imageAlt: getAssetAlt("instagram-post-2"),
authorName: "GlowSkin.lb", authorAvatar: getAssetUrl("brand-logo"),
date: "1 week ago"
id: "post-2", category: "Treatments", title: "Benefits of Hydrafacial", excerpt: "Dive deep into why Hydrafacial is the ultimate solution for instant glow.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-beautiful-female-pink-bathrobe-taking-photo_140725-17164.jpg", imageAlt: "woman applying face mask selfie", authorName: "GlowSkin.lb", authorAvatar: "http://img.b2bpic.net/free-vector/cosmetic-label-template-design_742173-23951.jpg", date: "1 week ago"
},
{
id: "post-3", category: "Self-Care", title: "Relax & Rejuvenate", excerpt: "Experience pure bliss with our signature relaxation facial. Your skin will thank you!", imageSrc: getAssetUrl("instagram-post-3"),
imageAlt: getAssetAlt("instagram-post-3"),
authorName: "GlowSkin.lb", authorAvatar: getAssetUrl("brand-logo"),
date: "2 weeks ago"
id: "post-3", category: "Self-Care", title: "Relax & Rejuvenate", excerpt: "Experience pure bliss with our signature relaxation facial. Your skin will thank you!", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-lies-beautician-s-table-receives-procedures-light-facial-massage-using-oil_343596-4184.jpg", imageAlt: "close up of facial massage", authorName: "GlowSkin.lb", authorAvatar: "http://img.b2bpic.net/free-vector/cosmetic-label-template-design_742173-23951.jpg", date: "2 weeks ago"
}
]}
animationType="slide-up"
@@ -181,14 +147,13 @@ export default function HomePage() {
description="Start your journey to healthier, more radiant skin with GlowSkin.lb. Our team is ready to provide you with personalized care."
background={{ variant: "plain" }}
useInvertedBackground={false}
imageSrc={getAssetUrl("booking-contact-image")}
imageAlt={getAssetAlt("booking-contact-image")}
imageSrc="http://img.b2bpic.net/free-photo/abstract-blur-defocused-shopping-mall_1203-9539.jpg"
imageAlt="clean minimal spa reception desk"
mediaAnimation="opacity"
mediaPosition="right"
buttonText="Book Now"
termsText="By booking, you agree to our terms and conditions."
tagAnimation="none"
buttonAnimation="slide-up"
/>
</div>