428 lines
14 KiB
TypeScript
428 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||
import { BarChart, Cloud, Shield } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="entrance-slide"
|
||
borderRadius="soft"
|
||
contentWidth="mediumSmall"
|
||
sizing="mediumLarge"
|
||
background="noiseDiagonalGradient"
|
||
cardStyle="solid"
|
||
primaryButtonStyle="shadow"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="light"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleFullscreen
|
||
navItems={[
|
||
{
|
||
name: "Home",
|
||
id: "hero",
|
||
},
|
||
{
|
||
name: "About",
|
||
id: "about",
|
||
},
|
||
{
|
||
name: "Services",
|
||
id: "services",
|
||
},
|
||
{
|
||
name: "Contact",
|
||
id: "contact",
|
||
},
|
||
]}
|
||
brandName="MARCOSE"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitDoubleCarousel
|
||
background={{
|
||
variant: "sparkles-gradient",
|
||
}}
|
||
title="Hi, I'm Marcus – Technical Consultant and Senior Engineer"
|
||
description="I help small businesses and charities optimize their infrastructure and navigate complex technical challenges with confidence."
|
||
leftCarouselItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119894.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-modern-man-holding-his-laptop-notebook_23-2148728890.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/modern-man-using-laptop-urban-environment_23-2147961078.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-caucasian-happy-teacher-glasses_74855-9736.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-laptop-posing-coworker_23-2148746260.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg",
|
||
},
|
||
]}
|
||
rightCarouselItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/3d-digital-data-background-with-abstract-plexus-design_1048-16831.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-engineer-his-home-office-working-developing-new-turbine-software-interface_482257-25294.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-ai-data-visualization_23-2151977857.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/black-employee-checking-digital-blue-prints-analysing-project-company-looking-laptop-sitting-desk-living-room-office-late-night-overtime-busy-african-freelancer-using-modern-technology_482257-13612.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212553.jpg",
|
||
},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg",
|
||
},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Work With Me",
|
||
href: "#contact",
|
||
},
|
||
]}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg",
|
||
alt: "Client 1",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/young-handsome-smiling-man-sitting-open-space-office-working-laptop_285396-9046.jpg",
|
||
alt: "Client 2",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-laptop-coffee-cup_23-2149097902.jpg",
|
||
alt: "Client 3",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-business-man-smiling-male-dressed-blue-jeans-shirt-bearded-model-posing-office-near-paper-desk_158538-17485.jpg",
|
||
alt: "Client 4",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/happy-talking-phone-young-attractive-smiling-man-sitting-co-working-open-office_285396-1770.jpg",
|
||
alt: "Client 5",
|
||
},
|
||
]}
|
||
avatarText="Trusted by 50+ businesses"
|
||
marqueeItems={[
|
||
{
|
||
type: "image",
|
||
src: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212618.jpg",
|
||
alt: "Tech Logo 1",
|
||
},
|
||
{
|
||
type: "image",
|
||
src: "http://img.b2bpic.net/free-photo/fiber-optics-lights-abstract-background_23-2148241382.jpg",
|
||
alt: "Tech Logo 2",
|
||
},
|
||
{
|
||
type: "image",
|
||
src: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212617.jpg",
|
||
alt: "Tech Logo 3",
|
||
},
|
||
{
|
||
type: "image",
|
||
src: "http://img.b2bpic.net/free-photo/close-up-beautiful-optical-fiber-details_23-2149212552.jpg",
|
||
alt: "Tech Logo 4",
|
||
},
|
||
{
|
||
type: "image",
|
||
src: "http://img.b2bpic.net/free-photo/blue-vivid-optic-fiber_23-2148779320.jpg",
|
||
alt: "Tech Logo 5",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TextSplitAbout
|
||
useInvertedBackground={false}
|
||
title="My Approach"
|
||
description={[
|
||
"I bring over 10 years of engineering experience to solve real-world problems. My goal is to simplify technology, making it an asset rather than a burden.",
|
||
"Whether it's cloud migration or a large office move, I provide clear guidance and reliable execution to ensure business continuity.",
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureBorderGlow
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
icon: Cloud,
|
||
title: "Cloud Infrastructure",
|
||
description: "Seamless migration and management of your cloud environment.",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Cyber Security",
|
||
description: "Robust protection for your sensitive data and digital assets.",
|
||
},
|
||
{
|
||
icon: BarChart,
|
||
title: "Analytics Solutions",
|
||
description: "Turning raw data into actionable insights for your business.",
|
||
},
|
||
]}
|
||
title="Services I Provide"
|
||
description="Tailored technical solutions designed to meet your specific organizational goals."
|
||
/>
|
||
</div>
|
||
|
||
<div id="portfolio" data-section="portfolio">
|
||
<ProductCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "p1",
|
||
name: "Charity Cloud Migration",
|
||
price: "Completed",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/chrome-key-tablet-updating-ai-systems_482257-90828.jpg",
|
||
},
|
||
{
|
||
id: "p2",
|
||
name: "Office Security Setup",
|
||
price: "Completed",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-investigation-team-working-governmental-hacking-room_482257-110561.jpg",
|
||
},
|
||
{
|
||
id: "p3",
|
||
name: "Corporate Infrastructure Upgrade",
|
||
price: "Completed",
|
||
imageSrc: "http://img.b2bpic.net/free-vector/hosting-services-flowchart_1284-19423.jpg",
|
||
},
|
||
{
|
||
id: "p4",
|
||
name: "Data Analysis Platform",
|
||
price: "Completed",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-experts-working-spyware-malware-detection_482257-121536.jpg",
|
||
},
|
||
{
|
||
id: "p5",
|
||
name: "Retail POS Integration",
|
||
price: "Completed",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-governmental-cyber-security-room-without-staff-work_482257-94558.jpg",
|
||
},
|
||
{
|
||
id: "p6",
|
||
name: "Non-Profit Network Security",
|
||
price: "Completed",
|
||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-dark-mode-app-template_23-2150513319.jpg",
|
||
},
|
||
]}
|
||
title="Recent Work"
|
||
description="Showcasing technical solutions and successful project completions."
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-choose-me" data-section="why-choose-me">
|
||
<MetricCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={false}
|
||
metrics={[
|
||
{
|
||
id: "m1",
|
||
value: "100%",
|
||
description: "Client satisfaction across all past infrastructure migrations.",
|
||
},
|
||
{
|
||
id: "m2",
|
||
value: "24/7",
|
||
description: "Priority support availability for all office move projects.",
|
||
},
|
||
{
|
||
id: "m3",
|
||
value: "50+",
|
||
description: "Successfully completed technical projects for small businesses.",
|
||
},
|
||
]}
|
||
title="Why Choose Me"
|
||
description="Commitment to excellence in every technical engagement."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardSixteen
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1",
|
||
name: "Jane Doe",
|
||
role: "Director",
|
||
company: "Local Charity",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "John Smith",
|
||
role: "Manager",
|
||
company: "Tech Startup",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "Alice Green",
|
||
role: "CEO",
|
||
company: "Creative Studio",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1626.jpg",
|
||
},
|
||
{
|
||
id: "4",
|
||
name: "Bob Brown",
|
||
role: "Founder",
|
||
company: "Small Biz Inc",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
|
||
},
|
||
{
|
||
id: "5",
|
||
name: "Charlie White",
|
||
role: "Owner",
|
||
company: "Retail Group",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg",
|
||
},
|
||
]}
|
||
kpiItems={[
|
||
{
|
||
value: "99.9%",
|
||
label: "Uptime",
|
||
},
|
||
{
|
||
value: "500+",
|
||
label: "Devices Managed",
|
||
},
|
||
{
|
||
value: "20+",
|
||
label: "Industries Served",
|
||
},
|
||
]}
|
||
title="Client Feedback"
|
||
description="Trusted by businesses and organizations to get the job done right."
|
||
/>
|
||
</div>
|
||
|
||
<div id="faq" data-section="faq">
|
||
<FaqSplitMedia
|
||
textboxLayout="split"
|
||
useInvertedBackground={false}
|
||
faqs={[
|
||
{
|
||
id: "f1",
|
||
title: "How do you handle office move projects?",
|
||
content: "I manage the entire technical scope from hardware disconnect to re-installation, ensuring all connectivity remains stable.",
|
||
},
|
||
{
|
||
id: "f2",
|
||
title: "Can you work with small budgets?",
|
||
content: "Absolutely. I provide scalable solutions designed for growth and affordability.",
|
||
},
|
||
{
|
||
id: "f3",
|
||
title: "What is your typical turnaround time?",
|
||
content: "I assess each project individually, but prioritize efficiency and meeting agreed-upon deadlines.",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg"
|
||
mediaAnimation="slide-up"
|
||
title="Frequently Asked"
|
||
description="Clear answers to your most common questions about my consulting process."
|
||
faqsAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "sparkles-gradient",
|
||
}}
|
||
tag="Let's Get Started"
|
||
title="Ready to work together?"
|
||
description="Reach out to discuss your technical needs and how I can help your project succeed."
|
||
buttons={[
|
||
{
|
||
text: "Send Message",
|
||
href: "#",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBaseReveal
|
||
logoText="Marcus."
|
||
columns={[
|
||
{
|
||
title: "Connect",
|
||
items: [
|
||
{
|
||
label: "hello@marcus.dev",
|
||
href: "mailto:hello@marcus.dev",
|
||
},
|
||
{
|
||
label: "Twitter",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Legal",
|
||
items: [
|
||
{
|
||
label: "Privacy Policy",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Terms of Service",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
copyrightText="© 2024 Marcus Technical Consulting."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|