256 lines
16 KiB
TypeScript
256 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import { Sparkles, CheckCircle, Zap, Layers, Eye, MapPin, TrendingUp, Shield, Building2, Star, HelpCircle, Rocket } from 'lucide-react';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="rounded"
|
||
contentWidth="medium"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="circleGradient"
|
||
cardStyle="layered-gradient"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="light"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
brandName="Perth Site Studio"
|
||
navItems={[
|
||
{ name: "How It Works", id: "features" },
|
||
{ name: "Why Perth Sites", id: "about" },
|
||
{ name: "Testimonials", id: "testimonials" },
|
||
{ name: "FAQ", id: "faq" }
|
||
]}
|
||
button={{
|
||
text: "Book Your Free Demo", href: "#contact"
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitKpi
|
||
title="Your website, built fast. Built right."
|
||
description="Professional websites for Perth small business—no jargon, no surprises, no waiting months. See your site live in weeks."
|
||
tag="Trusted by 150+ Perth Businesses"
|
||
tagIcon={Sparkles}
|
||
tagAnimation="slide-up"
|
||
kpis={[
|
||
{ value: "2-4 weeks", label: "From Brief to Live" },
|
||
{ value: "100% Transparent", label: "Clear Pricing, No Surprises" },
|
||
{ value: "Local Expertise", label: "WA-Based Support" }
|
||
]}
|
||
enableKpiAnimation={true}
|
||
buttons={[
|
||
{ text: "Book Your Free Demo", href: "#contact" },
|
||
{ text: "See How It Works", href: "#features" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
background={{ variant: "glowing-orb" }}
|
||
imageSrc="http://img.b2bpic.net/free-psd/moody-food-restaurant-concept-mock-up_23-2148410552.jpg"
|
||
imageAlt="Perth Site Studio website builder interface"
|
||
mediaAnimation="opacity"
|
||
imagePosition="right"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MetricSplitMediaAbout
|
||
tag="Why Perth Site Studio"
|
||
tagIcon={CheckCircle}
|
||
tagAnimation="slide-up"
|
||
title="Fast, Simple, High-Quality Websites for Perth Small Business"
|
||
description="We understand the challenges facing Perth tradespeople, hospitality owners, and service providers. You're busy running your business—not managing web projects. That's why we've streamlined the entire process: confident local expertise, transparent pricing that builds immediate trust, and fast delivery that gets you online without the wait. No jargon. No hidden costs. Just results."
|
||
metrics={[
|
||
{ value: "150+", title: "Websites Delivered in WA" },
|
||
{ value: "98%", title: "Client Satisfaction Rate" }
|
||
]}
|
||
useInvertedBackground={false}
|
||
imageSrc="http://img.b2bpic.net/free-photo/young-handsome-colleagues-sitting-office-coworking_171337-17711.jpg"
|
||
imageAlt="Perth Site Studio team delivering websites"
|
||
mediaAnimation="slide-up"
|
||
metricsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="features" data-section="features">
|
||
<FeatureBento
|
||
title="How It Works"
|
||
description="A streamlined process designed for busy business owners"
|
||
tag="Simple. Fast. Proven."
|
||
tagIcon={Zap}
|
||
tagAnimation="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "Speed", description: "See your site live in 2–4 weeks, not months. We handle the heavy lifting so you can focus on your business.", bentoComponent: "reveal-icon", icon: Zap
|
||
},
|
||
{
|
||
title: "Simple Process", description: "No lengthy briefs, no jargon, no surprises. Just straightforward conversations about what your business needs.", bentoComponent: "reveal-icon", icon: Layers
|
||
},
|
||
{
|
||
title: "Transparent Pricing", description: "Know exactly what you're paying upfront. No hidden costs. No shock invoices. Just honest, affordable pricing.", bentoComponent: "reveal-icon", icon: Eye
|
||
},
|
||
{
|
||
title: "Local Support", description: "We're Perth-based and understand your market. Direct communication with the team building your site.", bentoComponent: "reveal-icon", icon: MapPin
|
||
},
|
||
{
|
||
title: "Proven Results", description: "Our clients book demos, win projects, and grow their customer base through their new websites.", bentoComponent: "reveal-icon", icon: TrendingUp
|
||
},
|
||
{
|
||
title: "Confidence", description: "Professional design that builds trust instantly. Your website does the work while you focus on service delivery.", bentoComponent: "reveal-icon", icon: Shield
|
||
}
|
||
]}
|
||
animationType="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="socialproof" data-section="socialproof">
|
||
<SocialProofOne
|
||
title="Trusted by Perth's Best"
|
||
description="Small businesses across trades, services, and hospitality rely on us to build their online presence"
|
||
tag="Industries We Serve"
|
||
tagIcon={Building2}
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
names={[
|
||
"Local Tradies", "Cleaning Services", "Beauty & Wellness", "Cafes & Hospitality", "Auto Mechanics", "Childcare Providers", "Marketing Managers", "Office Managers"
|
||
]}
|
||
speed={40}
|
||
showCard={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardFive
|
||
title="What Our Clients Say"
|
||
description="Real feedback from Perth business owners who've transformed their online presence"
|
||
tag="Success Stories"
|
||
tagIcon={Star}
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Marcus Thompson, Plumbing & Gas", date: "Date: 15 November 2024", title: "Website paid for itself in the first month", quote: "We were skeptical about doing a website, but Perth Site Studio made it simple. We saw qualified leads within weeks. No nonsense, just results. Highly recommend to any tradie in Perth.", tag: "Plumbing & Gas", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"
|
||
},
|
||
{
|
||
id: "2", name: "Sarah Chen, Chen's Café", date: "Date: 28 October 2024", title: "Fast, professional, and they understood our business", quote: "As a café owner, I don't have time for complicated web stuff. The team understood what we needed instantly. We had a beautiful, working website in three weeks. Customers can now easily find us and book tables.", tag: "Hospitality", avatarSrc: "http://img.b2bpic.net/free-photo/confident-young-man-shirt-tie-adjusting-his-necktie_93675-135586.jpg", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-man-shirt-tie-adjusting-his-necktie_93675-135586.jpg"
|
||
},
|
||
{
|
||
id: "3", name: "Jessica Rodriguez, Bella Beauty Studio", date: "Date: 20 September 2024", title: "Transparent pricing, zero surprises", quote: "I got three other quotes—they all wanted to charge me an arm and a leg for ongoing costs. Perth Site Studio was upfront about everything. Professional design, fair price, and they delivered on time.", tag: "Beauty & Wellness", avatarSrc: "http://img.b2bpic.net/free-photo/attractive-woman-romatic-mood-smiling-happiness-sitting-table-wearing-pink-jacket-stylish-apparel-waiting-boyfriend-date-cafe-drinking-cappuccino-exited-face-expression_285396-4379.jpg", imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-romatic-mood-smiling-happiness-sitting-table-wearing-pink-jacket-stylish-apparel-waiting-boyfriend-date-cafe-drinking-cappuccino-exited-face-expression_285396-4379.jpg"
|
||
},
|
||
{
|
||
id: "4", name: "David Miller, Miller's Auto Services", date: "Date: 5 October 2024", title: "Local team that gets it", quote: "Working with a Perth-based team made all the difference. They understood the local market and what customers in WA are looking for. Website looks great and brings in steady enquiries.", tag: "Automotive", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-female-mechanic-standing-with-arms-crossed_1170-1200.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-female-mechanic-standing-with-arms-crossed_1170-1200.jpg"
|
||
},
|
||
{
|
||
id: "5", name: "Emma Watson, Bright Minds Childcare", date: "Date: 22 September 2024", title: "Professional result without the stress", quote: "We run a busy childcare centre—the last thing we needed was a complicated web project. Perth Site Studio handled everything smoothly. Parents can now easily see what we offer and book visits.", tag: "Childcare", avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-man-with-book_23-2147678951.jpg", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-man-with-book_23-2147678951.jpg"
|
||
},
|
||
{
|
||
id: "6", name: "Robert Green, Green Clean Services", date: "Date: 10 October 2024", title: "Best investment we made for the business", quote: "The website brought us more customers than we expected. Perth Site Studio's team was responsive, professional, and genuinely cared about our success. Would use them again in a heartbeat.", tag: "Cleaning Services", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-working-his-office-businessperson-professional-environment_482257-32721.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-working-his-office-businessperson-professional-environment_482257-32721.jpg"
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqBase
|
||
title="Frequently Asked Questions"
|
||
description="Everything you need to know about working with Perth Site Studio"
|
||
tag="Common Questions"
|
||
tagIcon={HelpCircle}
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqsAnimation="slide-up"
|
||
animationType="smooth"
|
||
faqs={[
|
||
{
|
||
id: "1", title: "How long does it really take to build a website?", content: "We typically deliver websites in 2–4 weeks from initial brief to launch. Speed is one of our key promises. The timeline depends on the complexity of your site and how quickly you can provide content (photos, copy, etc.). No long waits, no multi-month projects."
|
||
},
|
||
{
|
||
id: "2", title: "What if I don't have content ready yet?", content: "We can help you with copywriting and photography recommendations, or you can provide your own. We work with you to gather what's needed, but we also guide the process so you're not left wondering what happens next."
|
||
},
|
||
{
|
||
id: "3", title: "How much will my website cost?", content: "Pricing is transparent and based on what your business needs. We offer straightforward packages with no hidden costs. During your free demo, we'll discuss your specific requirements and provide a clear quote upfront."
|
||
},
|
||
{
|
||
id: "4", title: "Will I be able to update my website myself?", content: "Yes. Your site is built to be simple to manage. We provide straightforward training and documentation so you can make basic updates. For more complex changes, you can contact us for support."
|
||
},
|
||
{
|
||
id: "5", title: "What about ongoing support and hosting?", content: "Hosting, security, and backups are handled for you. Support varies by package—we'll discuss your support needs during the initial consultation so there are no surprises."
|
||
},
|
||
{
|
||
id: "6", title: "Why choose Perth Site Studio over a DIY builder or overseas agency?", content: "We combine professional design with local expertise, transparent pricing, and direct communication. DIY builders often look amateur; overseas agencies don't understand your market. We're Perth-based, we get your business, and we're accountable for results."
|
||
}
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
tag="Ready to Get Started?"
|
||
tagIcon={Rocket}
|
||
title="Book Your Free Website Demo"
|
||
description="Let's talk about what your business needs. No pressure, no obligation. Just a straightforward conversation about getting you online fast."
|
||
buttons={[
|
||
{ text: "Book Your Free Demo", href: "https://calendly.com" },
|
||
{ text: "Get in Touch", href: "mailto:hello@perthsitestudio.com" }
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
background={{ variant: "glowing-orb" }}
|
||
useInvertedBackground={false}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "Product", items: [
|
||
{ label: "How It Works", href: "#features" },
|
||
{ label: "Pricing", href: "#" },
|
||
{ label: "Features", href: "#features" }
|
||
]
|
||
},
|
||
{
|
||
title: "Company", items: [
|
||
{ label: "About Us", href: "#about" },
|
||
{ label: "Testimonials", href: "#testimonials" },
|
||
{ label: "Blog", href: "#" }
|
||
]
|
||
},
|
||
{
|
||
title: "Support", items: [
|
||
{ label: "FAQ", href: "#faq" },
|
||
{ label: "Contact", href: "#contact" },
|
||
{ label: "Help Center", href: "#" }
|
||
]
|
||
},
|
||
{
|
||
title: "Legal", items: [
|
||
{ label: "Privacy Policy", href: "#" },
|
||
{ label: "Terms of Service", href: "#" },
|
||
{ label: "Cookies", href: "#" }
|
||
]
|
||
}
|
||
]}
|
||
bottomLeftText="© 2025 Perth Site Studio. All rights reserved."
|
||
bottomRightText="Built for Perth small business."
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
} |