202 lines
12 KiB
TypeScript
202 lines
12 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||
import MediaAbout from "@/components/sections/about/MediaAbout";
|
||
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
|
||
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
|
||
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||
import { Mic2, Calendar, Phone } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="text-stagger"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="rounded"
|
||
contentWidth="small"
|
||
sizing="mediumLarge"
|
||
background="circleGradient"
|
||
cardStyle="solid"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="medium"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{ name: "Home", id: "home" },
|
||
{ name: "About", id: "about" },
|
||
{ name: "Booking", id: "booking" },
|
||
{ name: "Pricing", id: "pricing" },
|
||
{ name: "Contact", id: "contact" },
|
||
]}
|
||
brandName="SB Studio"
|
||
bottomLeftText="Professional Audio Recording"
|
||
bottomRightText="hello@sbstudio.com"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardScroll
|
||
title="Professional Recording Studio"
|
||
description="Book premium audio recording sessions with state-of-the-art equipment and experienced sound engineers. Capture your best work at SB Studio."
|
||
tag="Premier Audio Recording"
|
||
tagIcon={Mic2}
|
||
background={{ variant: "animated-grid" }}
|
||
imageSrc="http://img.b2bpic.net/free-photo/diverse-people-processing-mixing-sounds-audio-console_482257-122250.jpg"
|
||
imageAlt="recording studio audio professional music production"
|
||
buttons={[
|
||
{ text: "Book Now – Limited Slots", href: "#booking" },
|
||
{ text: "Learn More", href: "#about" },
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<MediaAbout
|
||
title="State-of-the-Art Recording Facilities"
|
||
description="Experience pristine audio quality with our professional-grade equipment, acoustically treated rooms, and expert engineering team. Whether you're recording music, podcasts, or voiceovers, we have the tools and expertise to bring your vision to life."
|
||
tag="About SB Studio"
|
||
imageSrc="http://img.b2bpic.net/free-photo/closeup-professional-microphone-swivel-boom-arm-stand-empty-vlog-broadcasting-studio-used-recording-social-media-content-detail-audio-live-broadcast-digital-mic_482257-36751.jpg"
|
||
imageAlt="recording equipment microphone studio setup audio gear"
|
||
useInvertedBackground={false}
|
||
buttons={[{ text: "View Our Services", href: "#booking" }]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="booking" data-section="booking">
|
||
<MetricCardTen
|
||
title="Book Your Recording Session"
|
||
description="Reserve your preferred date and time. A $50 deposit secures your booking. Available slots shown below with full session details."
|
||
tag="Booking"
|
||
tagIcon={Calendar}
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{
|
||
id: "1", title: "Monday, January 27", subtitle: "Morning Session", category: "Studio A", value: "$50 deposit", buttons: [{ text: "Book Now", href: "#contact" }],
|
||
},
|
||
{
|
||
id: "2", title: "Monday, January 27", subtitle: "Afternoon Session", category: "Studio B", value: "$50 deposit", buttons: [{ text: "Book Now", href: "#contact" }],
|
||
},
|
||
{
|
||
id: "3", title: "Tuesday, January 28", subtitle: "Morning Session", category: "Studio A", value: "$50 deposit", buttons: [{ text: "Book Now", href: "#contact" }],
|
||
},
|
||
{
|
||
id: "4", title: "Tuesday, January 28", subtitle: "Evening Session", category: "Studio B", value: "$50 deposit", buttons: [{ text: "Book Now", href: "#contact" }],
|
||
},
|
||
{
|
||
id: "5", title: "Wednesday, January 29", subtitle: "Morning Session", category: "Studio A", value: "$50 deposit", buttons: [{ text: "Book Now", href: "#contact" }],
|
||
},
|
||
{
|
||
id: "6", title: "Wednesday, January 29", subtitle: "Afternoon Session", category: "Studio B", value: "$50 deposit", buttons: [{ text: "Book Now", href: "#contact" }],
|
||
},
|
||
]}
|
||
carouselMode="buttons"
|
||
/>
|
||
</div>
|
||
|
||
<div id="pricing" data-section="pricing">
|
||
<PricingCardFive
|
||
title="Recording Session Packages"
|
||
description="Choose the perfect package for your recording needs. All sessions include professional engineering and mixing consultation."
|
||
tag="Pricing"
|
||
textboxLayout="default"
|
||
animationType="slide-up"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "basic", tag: "Basic Session", price: "$150", period: "/hour", description: "Perfect for voiceovers and solo recordings. Includes engineer and basic editing.", button: { text: "Book Session", href: "#booking" },
|
||
featuresTitle: "What's Included:", features: [
|
||
"1 hour studio time", "Professional engineer", "Basic editing", "File delivery"
|
||
],
|
||
},
|
||
{
|
||
id: "pro", tag: "Pro Session", price: "$250", period: "/hour", description: "Ideal for bands and complex productions. Full mixing included.", button: { text: "Book Session", href: "#booking" },
|
||
featuresTitle: "What's Included:", features: [
|
||
"1 hour studio time", "Professional engineer", "Full mixing", "Multiple instrument setup", "High-quality file delivery"
|
||
],
|
||
},
|
||
{
|
||
id: "premium", tag: "Premium Package", price: "$1,200", period: "/day", description: "Full-day recording with mastering services. Maximum flexibility and quality.", button: { text: "Book Session", href: "#booking" },
|
||
featuresTitle: "What's Included:", features: [
|
||
"8-hour studio access", "Experienced engineer", "Full mixing and mastering", "Multiple room access", "Equipment consultation", "Professional master files"
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardFifteen
|
||
testimonial="SB Studio delivered exceptional sound quality for our album. The team is professional, creative, and genuinely invested in getting the best results. Highly recommended for any serious recording project."
|
||
rating={5}
|
||
author="Marcus Chen, Artist"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-pensive-bearded-hipster-jacket-red-sweater-dark-background_613910-1834.jpg", alt: "professional portrait headshot musician artist"
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-pensive-bearded-hipster-jacket-red-sweater-dark-background_613910-1834.jpg", alt: "professional portrait headshot musician artist"
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-pensive-bearded-hipster-jacket-red-sweater-dark-background_613910-1834.jpg", alt: "professional portrait headshot musician artist"
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-pensive-bearded-hipster-jacket-red-sweater-dark-background_613910-1834.jpg", alt: "professional portrait headshot musician artist"
|
||
},
|
||
]}
|
||
ratingAnimation="slide-up"
|
||
avatarsAnimation="slide-up"
|
||
useInvertedBackground={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactFaq
|
||
faqs={[
|
||
{
|
||
id: "1", title: "How do I book a session?", content: "Browse our available time slots above, select your preferred date and time, and follow the booking process. A $50 deposit is required to confirm your reservation. Contact us if you need assistance."
|
||
},
|
||
{
|
||
id: "2", title: "Can I edit available booking times?", content: "Yes! Studio administrators can log into the backend dashboard to add, remove, or modify available booking slots based on studio schedules and maintenance needs."
|
||
},
|
||
{
|
||
id: "3", title: "What is the deposit policy?", content: "A $50 deposit is required to secure your booking. This deposit is applied toward your final session cost and is refundable with 48 hours notice."
|
||
},
|
||
{
|
||
id: "4", title: "Do you offer package deals?", content: "Yes! We offer Basic, Pro, and Premium packages with different pricing and features. Multi-session bookings may qualify for discounted rates. Contact us for custom pricing."
|
||
},
|
||
{
|
||
id: "5", title: "What equipment do you have?", content: "We feature professional-grade microphones, mixing consoles, outboard gear, and acoustic treatments. Our two studios accommodate different project sizes and requirements."
|
||
},
|
||
{
|
||
id: "6", title: "Can I reschedule my booking?", content: "Absolutely. Contact us at least 48 hours before your session to reschedule. Subject to availability, we'll find you a new time slot with no additional charges."
|
||
},
|
||
]}
|
||
ctaTitle="Get in Touch"
|
||
ctaDescription="Ready to book your session? Contact us to reserve your time slot and discuss your project requirements."
|
||
ctaButton={{ text: "Contact Us", href: "mailto:hello@sbstudio.com" }}
|
||
ctaIcon={Phone}
|
||
useInvertedBackground={false}
|
||
animationType="slide-up"
|
||
accordionAnimationType="smooth"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoReveal
|
||
logoText="SB Studio"
|
||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
}
|