4 Commits

Author SHA1 Message Date
605957ee52 Update src/app/about/page.tsx 2026-05-13 16:34:01 +00:00
44864fa341 Update src/app/about/page.tsx 2026-05-13 16:33:30 +00:00
d55c4a6754 Update src/app/page.tsx 2026-05-13 16:33:01 +00:00
6e65ecf40c Add src/app/about/page.tsx 2026-05-13 16:33:00 +00:00
2 changed files with 119 additions and 290 deletions

63
src/app/about/page.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FooterMedia from '@/components/sections/footer/FooterMedia';
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="largeSmall"
background="grid"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
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="about" data-section="about">
<SplitAbout
tag="Our Story"
title="Excellence in Panorama"
description="At Yianni Hair Spa Panorama, we believe in providing a premium beauty experience. Strategically located in the heart of Panorama, Thessaloniki."
textboxLayout="default"
imageSrc="http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg"
imageAlt="Glamorous model in make-up studio"
bulletPoints={[
{ title: "Premium Service", description: "High quality salon treatments." },
{ title: "Expert Staff", description: "Experienced professionals at your service." }
]}
useInvertedBackground={false}
/>
</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>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -2,15 +2,11 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; 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 FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel'; import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; 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 TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Scissors } from "lucide-react"; import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -27,295 +23,65 @@ export default function LandingPage() {
headingFontWeight="semibold" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
navItems={[ navItems={[
{ { name: "Home", id: "/" },
name: "Home", { name: "About", id: "/about" },
id: "hero", ]}
}, brandName="Yianni Hair Spa"
{ button={{ text: "Book Now", href: "/contact" }}
name: "About", />
id: "about", </div>
},
{
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"> <div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel <HeroBillboardRotatedCarousel
background={{ background={{ variant: "rotated-rays-static" }}
variant: "rotated-rays-static", title="Luxury Hair Experience in Panorama"
}} description="Professional color, styling, treatments, and beauty services tailored to you."
title="Luxury Hair Experience in Panorama" carouselItems={Array.from({ length: 6 }).map((_, i) => ({
description="Professional color, styling, treatments, and beauty services tailored to you." id: `${i + 1}`,
buttons={[ 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"
{ }))}
text: "Book Appointment", />
href: "#contact", </div>
},
{
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="about" data-section="about"> <div id="testimonials" data-section="testimonials">
<TestimonialAboutCard <TestimonialCardSix
useInvertedBackground={false} animationType="slide-up"
tag="Our Story" textboxLayout="default"
title="Excellence in Panorama" useInvertedBackground={false}
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." testimonials={[
subdescription="Strategically located in the heart of Panorama, Thessaloniki, we pride ourselves on being a trusted destination for modern hair artistry." { id: "1", name: "Maria K.", handle: "@mariak", testimonial: "Excellent service!" },
icon={Scissors} { id: "2", name: "Eleni P.", handle: "@elenip", testimonial: "Premium experience." }
imageSrc="http://img.b2bpic.net/free-photo/glamorous-model-make-up-studio_23-2148328753.jpg" ]}
mediaAnimation="slide-up" title="Client Experiences"
/> description="What our guests say."
</div> />
</div>
<div id="services" data-section="services"> <div id="why-us" data-section="why-us">
<PricingCardOne <FeatureCardSixteen
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
plans={[ negativeCard={{ items: ["Personalized Care", "Relaxing Environment"] }}
{ positiveCard={{ items: ["Professional Team", "Modern Techniques"] }}
id: "w-haircut", title="Why Choose Yianni Hair Spa"
badge: "Popular", description="Experience premium quality."
price: "From €35", />
subtitle: "Includes consultation and wash", </div>
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="testimonials" data-section="testimonials"> <div id="footer" data-section="footer">
<TestimonialCardSix <FooterMedia
animationType="slide-up" imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1tx7a4"
textboxLayout="default" logoText="Yianni Hair Spa"
useInvertedBackground={false} columns={[
testimonials={[ { title: "Salon", items: [{ label: "Home", href: "/" }, { label: "About", href: "/about" }] }
{ ]}
id: "1", />
name: "Maria K.", </div>
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> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }