532 lines
18 KiB
TypeScript
532 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||
import { Briefcase, CalendarCheck, CheckCircle, Coffee, Key, Mail, MapPin, Repeat, Smile, Users, Wifi } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="bounce-effect"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="compact"
|
||
sizing="mediumLargeSizeMediumTitles"
|
||
background="floatingGradient"
|
||
cardStyle="inset"
|
||
primaryButtonStyle="radial-glow"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="normal"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "Home",
|
||
id: "#hero",
|
||
},
|
||
{
|
||
name: "Offices",
|
||
id: "#offers",
|
||
},
|
||
{
|
||
name: "Hot Desks",
|
||
id: "#offers",
|
||
},
|
||
{
|
||
name: "Meeting Room",
|
||
id: "#offers",
|
||
},
|
||
{
|
||
name: "Pricing",
|
||
id: "#pricing",
|
||
},
|
||
{
|
||
name: "Virtual Office",
|
||
id: "#pricing",
|
||
},
|
||
{
|
||
name: "Contact",
|
||
id: "#contact",
|
||
},
|
||
]}
|
||
brandName="St Albans Office Space"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitTestimonial
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "plain",
|
||
}}
|
||
imagePosition="right"
|
||
title="Office space in St Albans from £75/week."
|
||
description="Bills included. Flexible leases. City centre location."
|
||
testimonials={[
|
||
{
|
||
name: "Sarah J.",
|
||
handle: "@MarketingPro",
|
||
testimonial: "St Albans Office Space transformed my workday. The hot-desking is perfect for my flexible schedule, and the environment is incredibly supportive and productive. Highly recommend for freelancers!",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/agency-office-worker-virtual-remote-video-conference-with-accounting-manager-talking-about-business-plan-asian-team-leader-internet-online-call-conversation-with-agency-colleague_482257-38745.jpg",
|
||
imageAlt: "Professional woman smiling",
|
||
},
|
||
{
|
||
name: "Mark D.",
|
||
handle: "@TechInnovate",
|
||
testimonial: "Our private office here is ideal. All bills included means no surprises, and the 24/7 access gives us the flexibility we need. Plus, the city centre location is a huge bonus for client meetings.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/keyboard-near-tablet-cup-smartphone-plant-monitor-cooling-fan_23-2148036906.jpg",
|
||
imageAlt: "Man working at a desk",
|
||
},
|
||
{
|
||
name: "Emily P.",
|
||
handle: "@CreativeHub",
|
||
testimonial: "The meeting room facilities are top-notch. We've used them for several client presentations and always received positive feedback. It’s professional, well-equipped, and easy to book.",
|
||
rating: 4,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-his-laptop_53876-49293.jpg",
|
||
imageAlt: "Woman in a meeting",
|
||
},
|
||
{
|
||
name: "David R.",
|
||
handle: "@LocalBizOwner",
|
||
testimonial: "Switching to a virtual office here was the best decision. A prestigious St Albans address and efficient mail handling has elevated our business presence without the overheads.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-desk-concept-with-copy-space_23-2148459721.jpg",
|
||
imageAlt: "Man looking thoughtfully",
|
||
},
|
||
{
|
||
name: "Chloe S.",
|
||
handle: "@StartupFounder",
|
||
testimonial: "The team here is incredibly friendly and responsive. Any issue is dealt with quickly, making it a truly hassle-free experience. A fantastic place to grow your business!",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-helping-center-design-icon_460848-8047.jpg",
|
||
imageAlt: "Woman on a laptop",
|
||
},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Book a viewing.",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
text: "See all pricing.",
|
||
href: "#pricing",
|
||
},
|
||
]}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/handshake-3d-icon-with-check-mark_107791-15088.jpg",
|
||
alt: "Profile picture of a professional",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/green-check-mark-gold-circle_84443-94487.jpg",
|
||
alt: "Profile picture of a business person",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/flat-lay-yellow-arrows-blue-background-with-copy-space_23-2148459905.jpg",
|
||
alt: "Profile picture of an executive",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/still-life-illustrating-ethics-concept_23-2149412249.jpg",
|
||
alt: "Profile picture of an entrepreneur",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/domino-blocks-with-arrow_23-2148541995.jpg",
|
||
alt: "Profile picture of a team member",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/self-employed-analyst-working-financial-audits-budget-planning-laptop_482257-90911.jpg?_wi=1"
|
||
imageAlt="Modern office space in St Albans"
|
||
mediaAnimation="opacity"
|
||
fixedMediaHeight={true}
|
||
avatarText="Join our thriving community of businesses."
|
||
marqueeItems={[
|
||
{
|
||
type: "text-icon",
|
||
text: "High-Speed Wi-Fi",
|
||
icon: Wifi,
|
||
},
|
||
{
|
||
type: "text-icon",
|
||
text: "24/7 Access",
|
||
icon: Key,
|
||
},
|
||
{
|
||
type: "text-icon",
|
||
text: "Flexible Terms",
|
||
icon: CalendarCheck,
|
||
},
|
||
{
|
||
type: "text-icon",
|
||
text: "City Centre Location",
|
||
icon: MapPin,
|
||
},
|
||
{
|
||
type: "text-icon",
|
||
text: "Professional Community",
|
||
icon: Users,
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="offers" data-section="offers">
|
||
<FeatureCardNine
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
title: "Offices to Rent",
|
||
description: "Private, secure offices for individuals and teams, starting from £200/week.",
|
||
phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-wood-engraving-workshop_23-2149185403.jpg",
|
||
imageAlt: "Private office",
|
||
},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/city-lights-urban-scenic-view-buildings-concept_53876-139782.jpg",
|
||
imageAlt: "Private office",
|
||
},
|
||
imageSrc: "http://img.b2bpic.net/free-photo/self-employed-analyst-working-financial-audits-budget-planning-laptop_482257-90911.jpg?_wi=2",
|
||
imageAlt: "stylish modern private office desk",
|
||
},
|
||
{
|
||
title: "Hot Desks",
|
||
description: "Flexible drop-in desks for daily use, perfect for freelancers. From £75/week.",
|
||
phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/crop-laptop-near-cacti_23-2147768833.jpg",
|
||
imageAlt: "Hot desk area",
|
||
},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-office-stretching-work-day_23-2150468538.jpg",
|
||
imageAlt: "Hot desk area",
|
||
},
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-red-bag-successful-payment_1134-661.jpg",
|
||
imageAlt: "stylish modern private office desk",
|
||
},
|
||
{
|
||
title: "Meeting Room",
|
||
description: "Professional meeting space available by the hour or day. Ideal for client meetings. From £30/hour.",
|
||
phoneOne: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/black-businesswoman-having-conference-call-office_637285-12911.jpg",
|
||
imageAlt: "Meeting room",
|
||
},
|
||
phoneTwo: {
|
||
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-business-meeting-room-office-building_105762-2013.jpg",
|
||
imageAlt: "Meeting room",
|
||
},
|
||
imageSrc: "http://img.b2bpic.net/free-photo/settings-front-side-white-background_187299-40208.jpg",
|
||
imageAlt: "stylish modern private office desk",
|
||
},
|
||
]}
|
||
showStepNumbers={false}
|
||
title="Our Flexible Office Solutions"
|
||
description="Discover a range of options tailored to your needs, all with clear pricing and terms."
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-us" data-section="why-us">
|
||
<MetricCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{
|
||
id: "bills-included",
|
||
value: "All Bills",
|
||
title: "Always Included",
|
||
description: "No hidden fees, all utilities and internet included.",
|
||
icon: CheckCircle,
|
||
},
|
||
{
|
||
id: "flexible-leases",
|
||
value: "Flexible",
|
||
title: "Short-Term Leases",
|
||
description: "Adapt your space as your business grows or changes.",
|
||
icon: Repeat,
|
||
},
|
||
{
|
||
id: "city-centre",
|
||
value: "Prime",
|
||
title: "City Centre Location",
|
||
description: "Conveniently located with easy access to amenities.",
|
||
icon: MapPin,
|
||
},
|
||
{
|
||
id: "friendly-landlords",
|
||
value: "Supportive",
|
||
title: "Friendly Landlords, 24/7",
|
||
description: "Dedicated support to ensure your workspace runs smoothly.",
|
||
icon: Smile,
|
||
},
|
||
]}
|
||
title="Why Choose St Albans Office Space?"
|
||
description="We provide a practical and supportive environment for your business to thrive."
|
||
/>
|
||
</div>
|
||
|
||
<div id="the-spaces" data-section="the-spaces">
|
||
<ProductCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="four-items-2x2-equal-grid"
|
||
useInvertedBackground={true}
|
||
products={[
|
||
{
|
||
id: "space-1",
|
||
name: "Private Office",
|
||
price: "Spacious & Bright",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/empty-home-office-belonging-small-business-owner-with-data-sales-reports_482257-90829.jpg",
|
||
imageAlt: "Clean private office with desk",
|
||
},
|
||
{
|
||
id: "space-2",
|
||
name: "Flexible Hot Desks",
|
||
price: "Collaborative & Dynamic",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/indoor-portrait-young-web-developers-international-company-having-coffee-break_197531-4959.jpg",
|
||
imageAlt: "Hot desking area",
|
||
},
|
||
{
|
||
id: "space-3",
|
||
name: "Modern Meeting Room",
|
||
price: "Equipped for Success",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/person-presenting-information-meeting-white-board_23-2149085958.jpg",
|
||
imageAlt: "Professional meeting room",
|
||
},
|
||
{
|
||
id: "space-4",
|
||
name: "Welcoming Reception",
|
||
price: "Your First Impression",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-desk-hotel-reception-lobby_482257-76228.jpg",
|
||
imageAlt: "Office reception area",
|
||
},
|
||
{
|
||
id: "space-5",
|
||
name: "Quiet Work Zones",
|
||
price: "Focus & Productivity",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/focused-woman-using-laptop-while-sitting-spherical-chair_74855-4232.jpg",
|
||
imageAlt: "Quiet work zone",
|
||
},
|
||
{
|
||
id: "space-6",
|
||
name: "Ergonomic Setups",
|
||
price: "Comfort All Day",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/designer-work-office_158595-1207.jpg",
|
||
imageAlt: "Ergonomic desk setup",
|
||
},
|
||
]}
|
||
title="Our Inviting Workspaces"
|
||
description="Explore our modern offices, comfortable hot desking areas, and fully equipped meeting rooms designed for productivity."
|
||
/>
|
||
</div>
|
||
|
||
<div id="location" data-section="location">
|
||
<FaqSplitMedia
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "loc-1",
|
||
title: "City Centre St Albans",
|
||
content: "Strategically positioned in the vibrant heart of the city.",
|
||
},
|
||
{
|
||
id: "loc-2",
|
||
title: "Minutes from the Maltings",
|
||
content: "Enjoy immediate access to shopping, dining, and leisure facilities.",
|
||
},
|
||
{
|
||
id: "loc-3",
|
||
title: "20–30 mins to London by Rail",
|
||
content: "Fast and frequent train services connect you to central London.",
|
||
},
|
||
{
|
||
id: "loc-4",
|
||
title: "M1 and M25 Nearby",
|
||
content: "Excellent road links for easy travel by car.",
|
||
},
|
||
{
|
||
id: "loc-5",
|
||
title: "Luton Airport Under 20 Miles",
|
||
content: "Quick access for national and international travel.",
|
||
},
|
||
{
|
||
id: "contact-phone",
|
||
title: "Call Us Today",
|
||
content: "Phone: 01727 400550 / Mobile: 07711 633987",
|
||
},
|
||
{
|
||
id: "contact-email",
|
||
title: "Email Us",
|
||
content: "Email: info@stalbansofficespace.co.uk",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/aerial-view-from-helicopter-dubai-skyline-united-arab-emirates_231208-12526.jpg"
|
||
imageAlt="Map showing St Albans city centre"
|
||
mediaAnimation="opacity"
|
||
mediaPosition="left"
|
||
title="Find Us in the Heart of St Albans"
|
||
description="Our city centre locations offer unparalleled convenience and connectivity, making your daily commute and business operations seamless."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardFive
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
plans={[
|
||
{
|
||
id: "hot-desk",
|
||
tag: "Flexible",
|
||
tagIcon: Coffee,
|
||
price: "£75",
|
||
period: "/week",
|
||
description: "Ideal for freelancers and those needing occasional workspace.",
|
||
button: {
|
||
text: "Get a Hot Desk",
|
||
href: "#contact",
|
||
},
|
||
featuresTitle: "Includes:",
|
||
features: [
|
||
"Access during business hours",
|
||
"High-speed Wi-Fi",
|
||
"Shared amenities",
|
||
"Flexible booking",
|
||
"City centre access",
|
||
],
|
||
},
|
||
{
|
||
id: "private-office",
|
||
tag: "Dedicated",
|
||
tagIcon: Briefcase,
|
||
price: "£200",
|
||
period: "/week",
|
||
description: "Your own private, lockable office for maximum privacy and productivity.",
|
||
button: {
|
||
text: "Book a Private Office",
|
||
href: "#contact",
|
||
},
|
||
featuresTitle: "Includes:",
|
||
features: [
|
||
"Private, secure office",
|
||
"24/7 access",
|
||
"Dedicated high-speed internet",
|
||
"All bills included",
|
||
"Cleaning services",
|
||
],
|
||
},
|
||
{
|
||
id: "virtual-office",
|
||
tag: "Professional",
|
||
tagIcon: Mail,
|
||
price: "£50",
|
||
period: "/month",
|
||
description: "Establish a professional presence without the need for a physical office.",
|
||
button: {
|
||
text: "Setup Virtual Office",
|
||
href: "#contact",
|
||
},
|
||
featuresTitle: "Includes:",
|
||
features: [
|
||
"Prestigious St Albans address",
|
||
"Mail handling & forwarding",
|
||
"Dedicated phone number",
|
||
"Message taking service",
|
||
"Discount on meeting rooms",
|
||
],
|
||
},
|
||
]}
|
||
title="Flexible Pricing to Suit Your Business"
|
||
description="Choose the perfect plan for your office space, hot desk, or virtual office needs. Transparent pricing, no surprises."
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "St Albans Office Space",
|
||
items: [
|
||
{
|
||
label: "24 The Maltings",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "St Albans",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "AL1 3HL",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Phone: 01727 400550",
|
||
href: "tel:+441727400550",
|
||
},
|
||
{
|
||
label: "Mobile: 07711 633987",
|
||
href: "tel:+447711633987",
|
||
},
|
||
{
|
||
label: "Email: info@stalbansofficespace.co.uk",
|
||
href: "mailto:info@stalbansofficespace.co.uk",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Quick Links",
|
||
items: [
|
||
{
|
||
label: "Home",
|
||
href: "#hero",
|
||
},
|
||
{
|
||
label: "Offices",
|
||
href: "#offers",
|
||
},
|
||
{
|
||
label: "Hot Desks",
|
||
href: "#offers",
|
||
},
|
||
{
|
||
label: "Meeting Room",
|
||
href: "#offers",
|
||
},
|
||
{
|
||
label: "Pricing",
|
||
href: "#pricing",
|
||
},
|
||
{
|
||
label: "Virtual Office",
|
||
href: "#pricing",
|
||
},
|
||
{
|
||
label: "Contact Us",
|
||
href: "#contact",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
bottomLeftText="St Albans Office Space"
|
||
bottomRightText="© 2023 St Albans Office Space. All rights reserved."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|