389 lines
12 KiB
TypeScript
389 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="floatingGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "services",
|
|
},
|
|
{
|
|
name: "Portfolio",
|
|
id: "portfolio",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Issam Eddine Marhouj"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{
|
|
variant: "rotated-rays-static-grid",
|
|
}}
|
|
title="Cinematic Visual Storytelling"
|
|
description="Professional videographer, photographer, and editor with 10+ years of experience working with national and international institutions."
|
|
buttons={[
|
|
{
|
|
text: "View Portfolio",
|
|
href: "#portfolio",
|
|
},
|
|
{
|
|
text: "Book a Project",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "h1",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/long-view-studio-photo-art-concept_23-2148565537.jpg",
|
|
imageAlt: "Film set setup",
|
|
},
|
|
{
|
|
id: "h2",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-post-processing-photography-studio-with-editing-software-interface-pc-screens_482257-87241.jpg",
|
|
imageAlt: "Editing suite",
|
|
},
|
|
{
|
|
id: "h3",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/girl-roof-car-photographs-sunset-with-tripod_169016-14966.jpg",
|
|
imageAlt: "Drone capture",
|
|
},
|
|
{
|
|
id: "h4",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-holding-camera_23-2148503570.jpg",
|
|
imageAlt: "Videographer portrait",
|
|
},
|
|
{
|
|
id: "h5",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139302.jpg",
|
|
imageAlt: "Lens detail",
|
|
},
|
|
{
|
|
id: "h6",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-filming-with-professional-camera_23-2149066357.jpg",
|
|
imageAlt: "Event filming",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Crafting Stories That Resonate"
|
|
description={[
|
|
"With over 10 years of experience, I bring a refined, cinematic approach to every project. From high-end commercial advertising and international documentaries to intimate event coverage and branding, my goal is to translate your vision into a visual experience that captures the audience.",
|
|
"Working across Morocco and beyond, I collaborate with institutions, agencies, and brands that value technical excellence and artistic integrity. Whether it's the precision of video editing, the narrative depth of photography, or the strategic visual planning of a full-scale production, your vision is in professional hands.",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwelve
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "s1",
|
|
label: "Production",
|
|
title: "Videography",
|
|
items: [
|
|
"Commercial Ads",
|
|
"Documentaries",
|
|
"Drone Footage",
|
|
],
|
|
},
|
|
{
|
|
id: "s2",
|
|
label: "Visuals",
|
|
title: "Photography",
|
|
items: [
|
|
"Branding Photography",
|
|
"Event Coverage",
|
|
"Editorial Shoots",
|
|
],
|
|
},
|
|
{
|
|
id: "s3",
|
|
label: "Post",
|
|
title: "Editing & Color",
|
|
items: [
|
|
"Advanced Color Grading",
|
|
"Seamless Motion Design",
|
|
"Sound Design",
|
|
],
|
|
},
|
|
{
|
|
id: "s4",
|
|
label: "Strategy",
|
|
title: "Social Content",
|
|
items: [
|
|
"Short-form Verticals",
|
|
"Campaign Strategy",
|
|
"Platform Optimization",
|
|
],
|
|
},
|
|
]}
|
|
title="Premium Services"
|
|
description="Comprehensive creative production services tailored for brands and institutions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardThree
|
|
textboxLayout="default"
|
|
gridVariant="asymmetric-60-wide-40-narrow"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Fashion Editorial",
|
|
price: "Brand Campaign",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blond-girl-posing-with-loangboard_158595-2838.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Documentary Short",
|
|
price: "International Institutional",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/table-with-content-creator-stuff-camera-microphone-tripod-headphones-working-from-home_1268-17410.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Corporate Identity",
|
|
price: "High-End Branding",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/low-view-smiley-photographer-photography-umbrella_23-2148424404.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Event Cinematic",
|
|
price: "Luxury Coverage",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/aerial-shot-fireplace-surrounded-by-leafless-trees-grassy-field-daytime_181624-4250.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Product Ad",
|
|
price: "Commercial Edit",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/remotely-working-company-financial-advisor-analyzing-statistical-graphs_482257-92945.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Travel Series",
|
|
price: "Premium Content",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cinema-concept-with-reel_23-2147989036.jpg",
|
|
},
|
|
]}
|
|
title="Selected Works"
|
|
description="A curated collection of cinematic productions and photography."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
useInvertedBackground={false}
|
|
title="Experience by Numbers"
|
|
tag="Expertise"
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "10+",
|
|
description: "Years of professional experience",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "250+",
|
|
description: "Successful projects completed",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "100+",
|
|
description: "Clients worked with globally",
|
|
},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah Mansour",
|
|
role: "Creative Director",
|
|
testimonial: "Exceptional eye for detail and a truly professional workflow.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/empty-desk-luxurious-loft-apartment-with-modern-minimalist-design_482257-126418.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Omar Fassi",
|
|
role: "Brand Manager",
|
|
testimonial: "Issam understands the vision immediately. A pleasure to work with.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/confident-businesswoman-looking-away_23-2148452694.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Leila Benjelloun",
|
|
role: "Event Coordinator",
|
|
testimonial: "The best event coverage we've ever had. Highly recommended.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-business-woman-with-executive-job-working-with-management-marketing-statistics-computer-office-worker-analyzing-research-charts-data-reports_482257-41126.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Youssef Alami",
|
|
role: "CEO",
|
|
testimonial: "Reliable, high-quality production, and delivered on time.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/guy-black-suit-male-restaurant_1157-46268.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Hanae Kettani",
|
|
role: "Marketing Head",
|
|
testimonial: "The quality of work is world-class. Simply stunning results.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-confident-businesswoman-posing-with-arms-folded_1262-20950.jpg",
|
|
},
|
|
]}
|
|
title="Client Feedback"
|
|
description="Trusted by leaders across various industries."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "How do we start a project?",
|
|
content: "Simply reach out via email or the WhatsApp link. We will schedule a discovery call to discuss your objectives.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Do you travel for productions?",
|
|
content: "Yes, I work across Morocco and internationally for clients who value cinematic production standards.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "What is the typical turnaround time?",
|
|
content: "Depending on project scope, edits are typically delivered within 7-14 business days after shooting.",
|
|
},
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about starting your project."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Contact"
|
|
title="Let's Create Together"
|
|
description="Ready to bring your vision to life? Get in touch today for a professional consultation."
|
|
buttons={[
|
|
{
|
|
text: "WhatsApp Me",
|
|
href: "https://wa.me/212000000000",
|
|
},
|
|
{
|
|
text: "Send an Email",
|
|
href: "mailto:hello@issam-eddine.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Navigation",
|
|
items: [
|
|
{
|
|
label: "Portfolio",
|
|
href: "#portfolio",
|
|
},
|
|
{
|
|
label: "Services",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Socials",
|
|
items: [
|
|
{
|
|
label: "Instagram",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "LinkedIn",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Behance",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Issam Eddine Marhouj"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|