Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 03cb56dd19 | |||
| 0b072f1354 | |||
| 8c1c7cce70 | |||
| daccb7d9d4 | |||
| 759625c24e |
388
src/app/page.tsx
388
src/app/page.tsx
@@ -2,306 +2,116 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Layers, Shield, Zap } from "lucide-react";
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function GoldenScissorsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
]}
|
||||
brandName="ScaleSaaS"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Services", id: "#features" },
|
||||
{ name: "Reviews", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Golden Scissors"
|
||||
button={{ text: "Book Appointment", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Scalable Infrastructure for Modern SaaS"
|
||||
description="Minimize operational overhead with our lightweight, pre-configured architecture. Performance-optimized, cost-efficient, and ready to deploy."
|
||||
kpis={[
|
||||
{
|
||||
value: "99.9%",
|
||||
label: "Uptime",
|
||||
},
|
||||
{
|
||||
value: "50ms",
|
||||
label: "Latency",
|
||||
},
|
||||
{
|
||||
value: "$0",
|
||||
label: "DevOps Cost",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/a-sophisticated-software-dashboard-visua-1774817590932-4dd85e6f.png"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-a--1774817589830-2a8b4b48.png",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-a--1774817590922-4568ec47.png",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-a--1774817590993-1587370c.png",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-an-1774817589922-57083428.png",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-a--1774817589830-2a8b4b48.png",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ developers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "AWS Ready",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Kubernetes Optimized",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "PostgreSQL Native",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Redis Powered",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Edge Ready",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
title="Golden Scissors Porvoo"
|
||||
description="Professional barbering services located in the heart of Porvoo. Classic cuts, modern styles, and a premium grooming experience."
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
testimonials={[
|
||||
{ name: "Local Customer", handle: "@porvoo_style", testimonial: "Best haircut I've had in years. Great atmosphere!", rating: 5 }
|
||||
]}
|
||||
buttons={[{ text: "View Services", href: "#features" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Zero Latency",
|
||||
description: "Client-side optimized rendering reduces API overhead.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure by Default",
|
||||
description: "Rate-limited endpoints prevent unauthorized access.",
|
||||
},
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Scalable Base",
|
||||
description: "Modular design allows seamless component upgrades.",
|
||||
},
|
||||
]}
|
||||
title="Engineering Excellence"
|
||||
description="Built for scale, not for maintenance. Keep your focus on your product."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
title="Our Services"
|
||||
description="Precision cuts and grooming for every style."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Classic Haircut",
|
||||
author: "30 min",
|
||||
description: "Traditional scissors and clipper cuts.",
|
||||
tags: ["Cut", "Style"],
|
||||
imageSrc: "https://images.unsplash.com/photo-1599351431202-180f0b69116a?auto=format&fit=crop&q=80&w=800&h=800"
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Beard Trim",
|
||||
author: "15 min",
|
||||
description: "Hot towel treatment and beard shaping.",
|
||||
tags: ["Beard", "Grooming"],
|
||||
imageSrc: "https://images.unsplash.com/photo-1585747860715-2ba37e788b70?auto=format&fit=crop&q=80&w=800&h=800"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={true}
|
||||
title="Real Performance Data"
|
||||
tag="Reliability"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "2.4x",
|
||||
description: "Faster Load Times",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "85%",
|
||||
description: "Cost Reduction",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "1M+",
|
||||
description: "Requests Handled",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
title="Customer Reviews"
|
||||
description="See what our clients say about their experience at Golden Scissors."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
animationType="blur-reveal"
|
||||
kpiItems={[{ value: "4.9", label: "Rating" }, { value: "500+", label: "Happy Clients" }, { value: "5", label: "Years" }]}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "John D.", role: "Regular", company: "Porvoo", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Incredible Speed",
|
||||
quote: "The performance is unmatched. Our costs plummeted.",
|
||||
name: "Alice M.",
|
||||
role: "CTO",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-a--1774817589830-2a8b4b48.png?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Robust Foundation",
|
||||
quote: "Best architecture I've worked with in years.",
|
||||
name: "Bob K.",
|
||||
role: "Lead Eng",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-a--1774817590922-4568ec47.png",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Easy Scaling",
|
||||
quote: "We handled traffic spikes with zero intervention.",
|
||||
name: "Charlie D.",
|
||||
role: "DevOps",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-a--1774817590993-1587370c.png",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Premium Quality",
|
||||
quote: "Solid, reliable, and exceptionally fast.",
|
||||
name: "Diana V.",
|
||||
role: "Founder",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-an-1774817589922-57083428.png",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Absolute Game Changer",
|
||||
quote: "The most efficient deployment workflow I've ever used.",
|
||||
name: "Edward P.",
|
||||
role: "Architect",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdSZjzPLtFeGBve1olbfFQd8l8/high-quality-professional-headshot-of-a--1774817589830-2a8b4b48.png?_wi=2",
|
||||
},
|
||||
]}
|
||||
title="Trusted by Architects"
|
||||
description="See why top developers choose our infrastructure."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Visit Us"
|
||||
title="Find Us in Porvoo"
|
||||
description="Pormestarinkatu 14, 06100 Porvoo | Call: 044 9841051"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
price: "$0",
|
||||
name: "Developer",
|
||||
buttons: [
|
||||
{
|
||||
text: "Start Now",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Limited requests",
|
||||
"Community support",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
price: "$99",
|
||||
name: "Pro",
|
||||
buttons: [
|
||||
{
|
||||
text: "Upgrade",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Priority infra",
|
||||
"Email support",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Predictable Pricing"
|
||||
description="Choose the tier that fits your growth."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="ScaleSaaS"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Golden Scissors"
|
||||
columns={[
|
||||
{ items: [{ label: "Pormestarinkatu 14" }, { label: "06100 Porvoo" }] },
|
||||
{ items: [{ label: "Phone: 044 9841051" }] },
|
||||
{ items: [{ label: "Open: Mon-Fri 09-18" }, { label: "Sat 10-15" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user