Switch to version 1: modified src/app/page.tsx
This commit is contained in:
346
src/app/page.tsx
346
src/app/page.tsx
@@ -2,11 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import { Scissors } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -23,65 +27,295 @@ export default function LandingPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
]}
|
||||
brandName="Yianni Hair Spa"
|
||||
button={{ text: "Book Now", href: "/contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Yianni Hair Spa"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
title="Luxury Hair Experience in Panorama"
|
||||
description="Professional color, styling, treatments, and beauty services tailored to you."
|
||||
carouselItems={Array.from({ length: 6 }).map((_, i) => ({
|
||||
id: `${i + 1}`,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-aa-meeting-space-with-chairs-circle-prepared-group-therapy-nobody-office-decorated-with-furniture-rehabilitation-program-session-with-therapist-treating-alcoholism_482257-27825.jpg", imageAlt: "Salon interior"
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
title="Luxury Hair Experience in Panorama"
|
||||
description="Professional color, styling, treatments, and beauty services tailored to you."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Services",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-aa-meeting-space-with-chairs-circle-prepared-group-therapy-nobody-office-decorated-with-furniture-rehabilitation-program-session-with-therapist-treating-alcoholism_482257-27825.jpg",
|
||||
imageAlt: "Luxurious salon interior",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-spa-massage-wellness-hotel-suite-with-bathtub_105762-2027.jpg",
|
||||
imageAlt: "Premium hair styling station",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-hair-dryer-with-rollers_329181-1939.jpg",
|
||||
imageAlt: "Balayage result",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",
|
||||
imageAlt: "Blonde hair treatment",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sitting-hair-dresser-posing_23-2148108747.jpg",
|
||||
imageAlt: "Relaxing spa atmosphere",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg",
|
||||
imageAlt: "Professional salon hair products",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Maria K.", handle: "@mariak", testimonial: "Excellent service!" },
|
||||
{ id: "2", name: "Eleni P.", handle: "@elenip", testimonial: "Premium experience." }
|
||||
]}
|
||||
title="Client Experiences"
|
||||
description="What our guests say."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="Our Story"
|
||||
title="Excellence in Panorama"
|
||||
description="At Yianni Hair Spa Panorama, we believe in providing a premium beauty experience. Our team of experienced stylists is dedicated to personalized care and modern techniques."
|
||||
subdescription="Strategically located in the heart of Panorama, Thessaloniki, we pride ourselves on being a trusted destination for modern hair artistry."
|
||||
icon={Scissors}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["Personalized Care", "Relaxing Environment"] }}
|
||||
positiveCard={{ items: ["Professional Team", "Modern Techniques"] }}
|
||||
title="Why Choose Yianni Hair Spa"
|
||||
description="Experience premium quality."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "w-haircut",
|
||||
badge: "Popular",
|
||||
price: "From €35",
|
||||
subtitle: "Includes consultation and wash",
|
||||
features: [
|
||||
"Expert styling",
|
||||
"Personalized consultation",
|
||||
"Premium treatment",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "coloring",
|
||||
badge: "Pro",
|
||||
price: "From €50",
|
||||
subtitle: "Modern coloring techniques",
|
||||
features: [
|
||||
"Custom blend",
|
||||
"Professional products",
|
||||
"Long-lasting finish",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "balayage",
|
||||
badge: "Trend",
|
||||
price: "From €80",
|
||||
subtitle: "Expert balayage and highlights",
|
||||
features: [
|
||||
"Sun-kissed effect",
|
||||
"Blonde expertise",
|
||||
"Deep conditioning",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Explore our menu of premium hair treatments and styling services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1tx7a4"
|
||||
logoText="Yianni Hair Spa"
|
||||
columns={[
|
||||
{ title: "Salon", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Maria K.",
|
||||
handle: "@mariak",
|
||||
testimonial: "Excellent service and professional staff. Best haircut in Panorama!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/group-friends-enjoying-street_329181-12573.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Eleni P.",
|
||||
handle: "@elenip",
|
||||
testimonial: "Beautiful environment and premium experience. Highly recommended.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-singing_1187-3682.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sofia G.",
|
||||
handle: "@sofiag",
|
||||
testimonial: "They always get the blonde work perfectly. Truly professional.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/indoor-portrait-smiling-happy-girl-with-dark-hair-wearing-white-jacket-looking-down_291650-436.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Anna T.",
|
||||
handle: "@annat",
|
||||
testimonial: "Very friendly staff and excellent results. My go-to salon.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-woman-dark-green-top_197531-23823.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Dimitra L.",
|
||||
handle: "@dimitral",
|
||||
testimonial: "Amazing blowouts and treatment. Very professional.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bride-getting-makeup-done-medium-shot_23-2149860778.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Experiences"
|
||||
description="What our guests in Panorama say about us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="why-us" data-section="why-us">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Personalized Care",
|
||||
"Relaxing Environment",
|
||||
"Trusted Local Salon",
|
||||
"Accessible Location",
|
||||
"Customer-first Approach",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Professional Team",
|
||||
"Premium Products",
|
||||
"Modern Techniques",
|
||||
"Award-winning Stylists",
|
||||
"High-end Salon Tools",
|
||||
],
|
||||
}}
|
||||
title="Why Choose Yianni Hair Spa"
|
||||
description="Experience premium quality and professional care."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Book Your Appointment"
|
||||
description="Get in touch for bookings, queries, or appointments. We are located at Leof. Komninon 15, Panorama."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Your Phone",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your message or preferred appointment time",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-young-beautiful-woman-looking-camera-while-standing-counter-movie-house_613910-21690.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1tx7a4"
|
||||
logoText="Yianni Hair Spa"
|
||||
columns={[
|
||||
{
|
||||
title: "Salon",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Follow",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://www.instagram.com/hairbychrysapanorama/",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Yianni Hair Spa Panorama. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user