473 lines
16 KiB
TypeScript
473 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import { Calendar, Globe, RefreshCw, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Portfolio",
|
|
id: "#portfolio",
|
|
},
|
|
{
|
|
name: "Process",
|
|
id: "#process",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
id: "#pricing",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="Studio Morocco"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Websites That Make Businesses Look Expensive — And Sell Better."
|
|
description="We design high-converting websites for restaurants, clinics, agencies, gyms and salons that want to look premium and turn visitors into customers."
|
|
buttons={[
|
|
{
|
|
text: "Get a Free Website Audit",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
text: "View Demo Projects",
|
|
href: "#portfolio",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/row-identical-laptops-monochrome-light-corporate-teams-digital-device-fleet_169016-70819.jpg?_wi=1"
|
|
imageAlt="Professional website agency mockup"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/web-design-user-interface-concept_53876-120767.jpg",
|
|
alt: "Client profile 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-it-remote-employee-writing-code-using-mockup-notebook_482257-116241.jpg",
|
|
alt: "Client profile 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/laptop-with-copy-space-display-empty-desk-performance-metrics_482257-126532.jpg",
|
|
alt: "Client profile 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/arabic-laptop-front-side_187299-38055.jpg",
|
|
alt: "Client profile 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/man-restaurant-concentrating-laptop_23-2147826852.jpg",
|
|
alt: "Client profile 5",
|
|
},
|
|
]}
|
|
avatarText="Trusted by 50+ local businesses"
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Miller",
|
|
handle: "@sarahsmiller",
|
|
testimonial: "The design quality is unmatched. My restaurant bookings doubled within the first month of the new site.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-restaurant-concentrating-laptop_23-2147826852.jpg",
|
|
},
|
|
{
|
|
name: "Dr. James Aris",
|
|
handle: "@drjamesaris",
|
|
testimonial: "Finally, a website that looks professional and builds trust with my patients. Seamless experience.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/health-specialist-showing-horizontal-greenscreen-tablet-patient-looking-display-mockup-isolated-template-with-blank-copyspace-chroma-key-background-gadget-close-up_482257-45685.jpg",
|
|
},
|
|
{
|
|
name: "Elena Rossi",
|
|
handle: "@elena_rossi",
|
|
testimonial: "Studio Morocco made my architecture portfolio look world-class. The attention to detail is superb.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/architecture-real-estate-building-concept_53876-124771.jpg",
|
|
},
|
|
{
|
|
name: "Mark Thornton",
|
|
handle: "@thorntonfitness",
|
|
testimonial: "High-converting, sleek, and fast. My gym sign-ups have increased significantly since launch.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/build-body-daily-workout-concept_53876-13877.jpg",
|
|
},
|
|
{
|
|
name: "Linda Vance",
|
|
handle: "@lvancebeauty",
|
|
testimonial: "The booking system integrated perfectly. My clients love the elegant, feminine aesthetic.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-beauty-women-elegent-enjoy-concept_53876-132577.jpg",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="problem" data-section="problem">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Most businesses lose customers before they even get a message."
|
|
description="Is your current website costing you potential clients? We fix outdated layouts, mobile-unfriendly experiences, and unclear calls to action that drive visitors away. We build digital assets that work 24/7."
|
|
imageSrc="http://img.b2bpic.net/free-photo/side-view-man-using-laptop-outdoors_23-2150747668.jpg"
|
|
imageAlt="Outdated website frustration"
|
|
/>
|
|
</div>
|
|
|
|
<div id="solution" data-section="solution">
|
|
<FeatureCardTwentyFive
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Business Website",
|
|
description: "Professional hub for your brand.",
|
|
icon: Globe,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-nutritional-counter-app-composition_23-2149880622.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/laptop-with-replaceable-screen-hospital-cabinet-doctor-wearing-coat-arriving-health-clinic-nurse-writing-prescription-notebook-with-green-screen-medic-clinic_482257-3034.jpg",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/row-identical-laptops-monochrome-light-corporate-teams-digital-device-fleet_169016-70819.jpg?_wi=2",
|
|
imageAlt: "cafe website mockup UI",
|
|
},
|
|
{
|
|
title: "Landing Page",
|
|
description: "High-conversion single page focus.",
|
|
icon: Zap,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-124687.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-laptop-seaside_23-2148968962.jpg",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994346.jpg",
|
|
imageAlt: "cafe website mockup UI",
|
|
},
|
|
{
|
|
title: "Booking Website",
|
|
description: "Seamless scheduling for your services.",
|
|
icon: Calendar,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beauty-salon-with-cosmetology-equipment-anime-style_23-2151500977.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-korean-woman-making-toast-watching-video-digital-tablet-looking-screen_1258-190989.jpg",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/dentist-pointing-digital-tablet-screen-female-patient-sitting-chair_23-2147879187.jpg",
|
|
imageAlt: "cafe website mockup UI",
|
|
},
|
|
{
|
|
title: "Website Redesign",
|
|
description: "Modernize your existing presence.",
|
|
icon: RefreshCw,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/coffee-relaxation-beverage-planning-data-digital-concept_53876-63189.jpg?_wi=1",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416731.jpg?_wi=1",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-127370.jpg?_wi=1",
|
|
imageAlt: "cafe website mockup UI",
|
|
},
|
|
]}
|
|
title="We turn your online presence into a sales asset."
|
|
description="Our solutions are tailored to local business needs, focusing on trust and conversion."
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Premium Café Redesign",
|
|
price: "Concept Project",
|
|
variant: "Hospitality",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/coffee-relaxation-beverage-planning-data-digital-concept_53876-63189.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Dental Clinic Landing",
|
|
price: "Demo Redesign",
|
|
variant: "Medical",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/homepage-seen-laptop-screen_23-2149416731.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Real Estate Agency",
|
|
price: "Concept Project",
|
|
variant: "Real Estate",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/real-estate-accommodation-property-investment-graphic-word_53876-127370.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Fitness Coach Booking",
|
|
price: "Sample Case Study",
|
|
variant: "Wellness",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-training-with-laptop_23-2150384088.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Architecture Portfolio",
|
|
price: "Concept Project",
|
|
variant: "Studio",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/architects-working-project_53876-46878.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Beauty Salon Booking",
|
|
price: "Demo Redesign",
|
|
variant: "Beauty",
|
|
imageSrc: "http://img.b2bpic.net/free-vector/appointment-booking-landing-page_23-2148552092.jpg",
|
|
},
|
|
]}
|
|
title="Concept Demo Projects"
|
|
description="Built to demonstrate our process and capabilities."
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "01",
|
|
title: "Audit",
|
|
items: [
|
|
"Deep dive into current site",
|
|
"Competitor research",
|
|
"Identify growth opportunities",
|
|
],
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "02",
|
|
title: "Strategy",
|
|
items: [
|
|
"Define business goals",
|
|
"Target audience analysis",
|
|
"Conversion path design",
|
|
],
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "03",
|
|
title: "Design",
|
|
items: [
|
|
"Premium interface mockups",
|
|
"Modern brand alignment",
|
|
"User experience focus",
|
|
],
|
|
},
|
|
{
|
|
id: "m4",
|
|
value: "04",
|
|
title: "Build",
|
|
items: [
|
|
"Responsive web development",
|
|
"Performance optimization",
|
|
"SEO foundations",
|
|
],
|
|
},
|
|
{
|
|
id: "m5",
|
|
value: "05",
|
|
title: "Launch",
|
|
items: [
|
|
"Deployment & testing",
|
|
"Quality assurance",
|
|
"Final handover & support",
|
|
],
|
|
},
|
|
]}
|
|
title="Simple process. Fast delivery."
|
|
description="Our five-step framework ensures quality, clarity, and speed."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "starter",
|
|
tag: "Starter",
|
|
period: "once",
|
|
price: "Starting from $999",
|
|
description: "Professional entry-level presence.",
|
|
button: {
|
|
text: "Get Quote",
|
|
href: "#contact",
|
|
},
|
|
featuresTitle: "Includes:",
|
|
features: [
|
|
"1-3 pages",
|
|
"Responsive design",
|
|
"Contact form",
|
|
"WhatsApp button",
|
|
],
|
|
},
|
|
{
|
|
id: "growth",
|
|
tag: "Growth",
|
|
period: "once",
|
|
price: "Starting from $1,999",
|
|
description: "Lead-focused digital growth.",
|
|
button: {
|
|
text: "Get Quote",
|
|
href: "#contact",
|
|
},
|
|
featuresTitle: "Everything in Starter, plus:",
|
|
features: [
|
|
"4-6 pages",
|
|
"SEO Basics",
|
|
"Booking/contact flow",
|
|
"Analytics setup",
|
|
],
|
|
},
|
|
{
|
|
id: "premium",
|
|
tag: "Premium",
|
|
period: "once",
|
|
price: "Starting from $3,499",
|
|
description: "Full-service digital system.",
|
|
button: {
|
|
text: "Get Quote",
|
|
href: "#contact",
|
|
},
|
|
featuresTitle: "Everything in Growth, plus:",
|
|
features: [
|
|
"Landing page strategy",
|
|
"Brand direction",
|
|
"SEO structure",
|
|
"Content guidance",
|
|
],
|
|
},
|
|
]}
|
|
title="Flexible Service Packages"
|
|
description="Professional web systems tailored to your needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Built for ambitious businesses."
|
|
description="I started this studio to help local businesses stop looking average online. With a background in design and digital strategy, I build websites that are beautiful, functional, and built to sell."
|
|
imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345417.jpg"
|
|
imageAlt="About the designer"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
tag="FREE AUDIT"
|
|
title="Want to know what your website is costing you?"
|
|
description="Get a custom audit to see how we can improve your conversion and customer trust."
|
|
buttons={[
|
|
{
|
|
text: "Get Free Website Audit",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="Studio Morocco"
|
|
columns={[
|
|
{
|
|
title: "Navigation",
|
|
items: [
|
|
{
|
|
label: "Portfolio",
|
|
href: "#portfolio",
|
|
},
|
|
{
|
|
label: "Process",
|
|
href: "#process",
|
|
},
|
|
{
|
|
label: "Pricing",
|
|
href: "#pricing",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact",
|
|
items: [
|
|
{
|
|
label: "WhatsApp",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Email",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Instagram",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Studio Morocco. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|