Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 40f211f5ec | |||
| 67631fccaa | |||
| 38f5f25bbc | |||
| e9d0e75f6d | |||
| c4aa77e2d0 | |||
| 6437cad9d0 |
288
src/app/page.tsx
288
src/app/page.tsx
@@ -2,188 +2,148 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Building, CheckCircle, Move, Smile, Sparkles, Star } from "lucide-react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroSignup from '@/components/sections/hero/HeroSignup';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Star, Smile, Sparkles, Instagram, Facebook, Phone } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="2B Clean"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Ashanti Beauty"
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Professional Cleaning Services in Durrës"
|
||||
description="Reliable, affordable, and high-quality cleaning for homes and businesses. Enjoy a spotless environment today."
|
||||
tag="Rated 5.0 by locals"
|
||||
buttons={[{ text: "Book Now", href: "#contact" }, { text: "Call Us", href: "tel:0689544040" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-living-room-interior-design_23-2151983191.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/housekeeper-with-detergents-mopping-brow_23-2148076066.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/household-chores-concept_53876-139519.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beer-concept_23-2147790659.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-contemporary-modern-design-apartment-with-natural-light-fron-bir-window-white-curtain_609648-70.jpg" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSignup
|
||||
title="Luxurious Beauty in Durrës"
|
||||
description="Discover premium beauty treatments tailored for you. Experience the elegance of Ashanti Beauty Salon."
|
||||
tag="Excellence in Beauty"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttonText="WhatsApp Us"
|
||||
onSubmit={(email) => window.open(`https://wa.me/355680000000`, '_blank')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Deep Cleaning", description: "Total refresh for every corner.", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-cleaning-service-person-cleaning-office_23-2150520628.jpg", imageAlt: "deep cleaning equipment" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-cleaning-service-person-cleaning-office_23-2150520606.jpg", imageAlt: "deep cleaning equipment" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Office Cleaning", description: "Maintain a professional workspace.", icon: Building,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/african-american-employee-talking-landline-phone_482257-96280.jpg", imageAlt: "office cleaning professional" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/working-wall_1098-13458.jpg", imageAlt: "office cleaning professional" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Move-In / Out", description: "Seamless transition cleaning.", icon: Move,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/crop-woman-near-stack-boxes_23-2147758887.jpg", imageAlt: "move in cleaning service" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/black-woman-doing-house-chores_53876-14722.jpg", imageAlt: "move in cleaning service" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Our Cleaning Services"
|
||||
description="We offer a wide range of cleaning solutions tailored to your specific needs in Durrës."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureBento
|
||||
title="Our Premium Services"
|
||||
description="From professional styling to skin rejuvenation, we offer a range of luxury treatments."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
animationType="blur-reveal"
|
||||
features={[
|
||||
{ title: "Professional Hair Styling", description: "High-end cuts and color services.", bentoComponent: 'reveal-icon', icon: Sparkles },
|
||||
{ title: "Luxury Manicures", description: "Nail care in a relaxing environment.", bentoComponent: 'reveal-icon', icon: Star },
|
||||
{ title: "Skin Rejuvenation", description: "Tailored facials for your glow.", bentoComponent: 'reveal-icon', icon: Smile }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "About 2B Clean" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/bed-pillow_74190-1242.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
title="The Ashanti Difference"
|
||||
description="Located in Durrës, Ashanti Beauty Salon brings a unique blend of artistry and relaxation. Our expert team ensures every guest feels pampered."
|
||||
imageSrc="https://img.b2bpic.net/free-photo/beauty-salon-interior_23-2148766465.jpg?_wi=1"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Book Appointment", href: "https://wa.me/355680000000" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: Star, title: "Rating", value: "5.0" },
|
||||
{ id: "m2", icon: Smile, title: "Happy Clients", value: "100+" },
|
||||
{ id: "m3", icon: CheckCircle, title: "Local Projects", value: "200+" }
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="We are proud of our high standards and local service in Durrës."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
title="Why Guests Choose Ashanti"
|
||||
description="Reliable, expert, and premium beauty services in the heart of Durrës."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "s1", value: "10+ years", description: "Of excellence in beauty care" },
|
||||
{ id: "s2", value: "5000+", description: "Happy clients served" },
|
||||
{ id: "s3", value: "100%", description: "Focus on guest satisfaction" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Professionalism", quote: "Excellent cleaning, very professional and thorough.", name: "Sarah J.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/smiling-couple-embracing-cleaning_23-2147766998.jpg" },
|
||||
{ id: "2", title: "Value", quote: "Affordable and great results. Will use again.", name: "Michael B.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mature-family-couple-visiting-daughter_1398-4698.jpg" },
|
||||
{ id: "3", title: "Reliable", quote: "On time and very efficient team.", name: "Emily R.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg" },
|
||||
{ id: "4", title: "Quality", quote: "Best office cleaning service in Durrës.", name: "David K.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/man-gloves-with-sprayer_23-2147767005.jpg" },
|
||||
{ id: "5", title: "Trust", quote: "Honest and hard working cleaners.", name: "Lisa M.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/man-shirt-smiling-posing-kitchen_23-2148414940.jpg" }
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Don't just take our word for it—check out our stellar reviews."
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTwo
|
||||
title="What Our Guests Say"
|
||||
description="Real experiences from our lovely clients."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="depth-3d"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Elena M.", role: "Local Guest", testimonial: "The best beauty experience in Durrës. So relaxing and professional!" },
|
||||
{ id: "t2", name: "Anila D.", role: "Loyal Client", testimonial: "Ashanti Beauty Salon is my go-to for every special occasion." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Living Room", price: "Transformed", variant: "Before/After", imageSrc: "http://img.b2bpic.net/free-photo/person-doing-house-tour-online_23-2151050253.jpg" },
|
||||
{ id: "p2", name: "Kitchen", price: "Transformed", variant: "Before/After", imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990685.jpg" },
|
||||
{ id: "p3", name: "Floors", price: "Transformed", variant: "Before/After", imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-piece-wood_23-2148384495.jpg" },
|
||||
{ id: "p4", name: "Bathroom", price: "Transformed", variant: "Before/After", imageSrc: "http://img.b2bpic.net/free-photo/sketch-house_1048-4990.jpg" },
|
||||
{ id: "p5", name: "Furniture", price: "Transformed", variant: "Before/After", imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-hand-using-cloth-wipes-wooden-cabinet-with-drawer-holding-spray-bottle-cleaning-furniture-home_1150-48112.jpg" },
|
||||
{ id: "p6", name: "Office Space", price: "Transformed", variant: "Before/After", imageSrc: "http://img.b2bpic.net/free-photo/people-taking-care-office-cleaning_23-2149374466.jpg" }
|
||||
]}
|
||||
title="Before & After Results"
|
||||
description="See the transformation 2B Clean delivers every time."
|
||||
/>
|
||||
</div>
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardTwo
|
||||
title="Our Portfolio"
|
||||
description="Showcasing our best work in beauty and style."
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "g1", brand: "Style", name: "Modern Updo", price: "$50", rating: 5, reviewCount: "12 reviews", imageSrc: "https://img.b2bpic.net/free-photo/woman-getting-hair-styling-salon_23-2148766450.jpg" },
|
||||
{ id: "g2", brand: "Nails", name: "Signature Gel", price: "$30", rating: 5, reviewCount: "8 reviews", imageSrc: "https://img.b2bpic.net/free-photo/close-up-woman-getting-manicure_23-2148766440.jpg" },
|
||||
{ id: "g3", brand: "Facial", name: "Hydra Glow", price: "$70", rating: 5, reviewCount: "25 reviews", imageSrc: "https://img.b2bpic.net/free-photo/beauty-salon-interior_23-2148766465.jpg?_wi=2" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in touch"
|
||||
title="Visit Us in Durrës"
|
||||
description="We are located in the heart of Durrës. Contact us for professional cleaning services throughout the region."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
text="Ready to experience the elegance? Connect with us via WhatsApp to schedule your beauty session today!"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
buttons={[{ text: "Contact on WhatsApp", href: "https://wa.me/355680000000" }]}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="2B Clean"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Services", href: "#services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "068 954 4040", href: "tel:0689544040" },
|
||||
{ label: "Durrës, Albania", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 2B Clean. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Ashanti Beauty"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Phone, href: "https://wa.me/355680000000", ariaLabel: "WhatsApp" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #15479c;
|
||||
--background: #fbfaff;
|
||||
--card: #f7f5ff;
|
||||
--foreground: #0f0022;
|
||||
--primary-cta: #8b5cf6;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #a8cce8;
|
||||
--background-accent: #f5faff;
|
||||
--accent: #d8cef5;
|
||||
--background-accent: #c4a8f9;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user