315 lines
16 KiB
TypeScript
315 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
|
import { Cloud, Lightbulb, Linkedin, Mail, Phone, ShoppingCart, Users, Video } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Skills", id: "skills"},
|
|
{
|
|
name: "Experience", id: "experience"},
|
|
{
|
|
name: "Education", id: "education"},
|
|
{
|
|
name: "Social Proof", id: "social-proof"},
|
|
{
|
|
name: "Testimonials", id: "testimonials"},
|
|
{
|
|
name: "Videos", id: "videos"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2xvbn1"
|
|
logoAlt="Mohammed Amine Belalia Logo"
|
|
brandName="Mohammed Amine Belalia"
|
|
bottomLeftText="Global Community"
|
|
bottomRightText="Mansourah, Tlemcen, Algeria"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Mohammed Amine Belalia (Amin)"
|
|
description="AI Solutions Architect | Professional Video Editor | Business Coach"
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Chen", handle: "@sarah_c", testimonial: "Amin's AI solutions transformed our operations, bringing efficiency we never thought possible. A true visionary!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022640.jpg", imageAlt: "Sarah Chen avatar"},
|
|
{
|
|
name: "David Lee", handle: "@david_l", testimonial: "The video content Amin produced was beyond exceptional. His cinematic eye and editing skills are unmatched.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cropped-image-black-woman-with-afro-haircut-uses-mobile-phone-satisfied-poses-outdoor-private-sector-near-her-house_273609-18705.jpg", imageAlt: "David Lee avatar"},
|
|
{
|
|
name: "Emily Rodriguez", handle: "@emily_r", testimonial: "As a business coach, Amin's guidance on digital product launches was invaluable. He truly understands market scaling.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-young-businessman-standing-against-grey-wall-clenching-his-fist_23-2148087510.jpg", imageAlt: "Emily Rodriguez avatar"},
|
|
{
|
|
name: "Michael Kim", handle: "@michael_k", testimonial: "Amin's expertise in prompt engineering and autonomous AI agents is groundbreaking. Highly recommend his services.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-with-headphones_23-2149005920.jpg", imageAlt: "Michael Kim avatar"},
|
|
{
|
|
name: "Jessica Wang", handle: "@jessica_w", testimonial: "From concept to final cut, Amin delivered stunning visuals that captivated our audience. A master of storytelling.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-groom-classy-black-suit-stands-dark-room_8353-7083.jpg", imageAlt: "Jessica Wang avatar"},
|
|
]}
|
|
testimonialRotationInterval={5000}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136890.jpg", alt: "Client avatar 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg", alt: "Client avatar 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "Client avatar 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153830.jpg", alt: "Client avatar 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/businesswoman-happy-be-back-work_23-2148727621.jpg", alt: "Businesswoman happy to be back at work"},
|
|
]}
|
|
avatarText="Trusted by leading innovators."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EoafwEysuIxqf4tA00y8twM2mh/uploaded-1780849545851-gshjk7ic.png"
|
|
imageAlt="Mohammed Amine Belalia working on AI solutions"
|
|
mediaAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "AI Automation", icon: Lightbulb,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Video Production", icon: Video,
|
|
},
|
|
{
|
|
type: "text", text: "E-commerce Strategy"},
|
|
{
|
|
type: "text-icon", text: "Business Coaching", icon: Users,
|
|
},
|
|
{
|
|
type: "text", text: "Digital Innovation"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text", content: "Forward-thinking AI Solutions Architect, Electrotechnical Engineer, and Professional Video Editor with a proven track record of blending rigorous technical innovation with cinematic storytelling. Expert in designing advanced AI automation workflows (n8n, API integrations) and producing high-end, hyper-realistic visual content. Experienced e-commerce strategist and business coach skilled in digital product launches, community management, and global market scaling."},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "View Portfolio", href: "#skills"
|
|
},
|
|
{
|
|
text: "Connect for a Project", href: "#contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
icon: Lightbulb,
|
|
title: "AI & Automation Architecture", description: "Expert in n8n Workflow Automation, Claude/Gemini API integration, Manychat, SocialBee, Loomsuite, Prompt Engineering, and Autonomous AI Agents."},
|
|
{
|
|
icon: Video,
|
|
title: "Cinematography & Video Editing", description: "Proficient in Adobe After Effects, CapCut, UGC Design, Cinematic Chiaroscuro Lighting, 8K Framing, Color Grading (LUTs), and Macro Realism."},
|
|
{
|
|
icon: ShoppingCart,
|
|
title: "E-Commerce & Digital Marketing", description: "Skilled in Storefront Optimization (YouCan, Whop), International Payment Gateways (PayPal, Wise, LBank), and Community Management (Skool Platform)."},
|
|
{
|
|
icon: Cloud,
|
|
title: "Cloud & Core Tech", description: "Foundational knowledge in Firebase, Google Cloud Platform (GCP), and Data Science principles."},
|
|
]}
|
|
title="Technical Expertise & Tools"
|
|
description="Blending rigorous technical innovation with cinematic storytelling across diverse domains."
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<TeamCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
members={[
|
|
{
|
|
id: "exp-1", name: "AI Solutions Architect & Business Coach", role: "Freelance / Self-employed", imageSrc: "http://img.b2bpic.net/free-photo/saas-concept-collage_23-2149399279.jpg", imageAlt: "AI Solutions Architect working"},
|
|
{
|
|
id: "exp-2", name: "Professional Video Editor & Content Creator", role: "Freelance", imageSrc: "http://img.b2bpic.net/free-photo/concentrated-young-lady-designer-night-using-computer_171337-15700.jpg", imageAlt: "Video editor at work"},
|
|
{
|
|
id: "exp-3", name: "Digital Product Publisher & E-Commerce Strategist", role: "Self-employed", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-pen-collection-icons_1134-285.jpg", imageAlt: "E-commerce strategist"},
|
|
]}
|
|
title="Professional Journey & Impact"
|
|
description="Leveraging AI, creativity, and strategic insights to drive transformative results for businesses and creators."
|
|
/>
|
|
</div>
|
|
|
|
<div id="education" data-section="education">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "edu-1", value: "State Engineer's Degree", description: "Electrotechnical Engineering - University of Tlemcen, Algeria"},
|
|
{
|
|
id: "edu-2", value: "Data Science & AI Pathways", description: "Continuous Professional Development - 365 Data Science"},
|
|
]}
|
|
title="Education & Continuous Growth"
|
|
description="Combining a strong engineering foundation with cutting-edge expertise in data science and artificial intelligence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"AI Innovators Inc.", "Cinematic Studios", "E-Commerce Solutions Hub", "Global Tech Leaders", "Digital Growth Partners", "Creative Media Corp", "Automation Experts"]}
|
|
title="Trusted Expertise & Collaboration"
|
|
description="Partnering with industry leaders and leveraging cutting-edge platforms to deliver excellence."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="Amin's unique blend of AI architecture and cinematic storytelling is revolutionary. His ability to streamline complex processes while delivering visually stunning results is truly exceptional. Working with him has elevated our projects to a new standard."
|
|
rating={5}
|
|
author="Dr. Anya Sharma, Lead Data Scientist"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-handsome-man-black-jacket_613910-2534.jpg", alt: "Anya Sharma avatar"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/older-woman-with-thumb-up_1149-1162.jpg", alt: "Robert Garcia avatar"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg", alt: "Sophia Miller avatar"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Chris Evans avatar"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/businesswoman-happy-be-back-work_23-2148727621.jpg", alt: "Businesswoman happy to be back at work"},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="videos" data-section="videos">
|
|
<TeamCardTen
|
|
useInvertedBackground={false}
|
|
title="Our Video Creations"
|
|
tag="Portfolio"
|
|
membersAnimation="slide-up"
|
|
memberVariant="card"
|
|
members={[
|
|
{
|
|
id: "video-1", name: "AI Solutions Explained", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/temp/ai_solutions_explained.mp4", videoAriaLabel: "Video explaining AI solutions"
|
|
},
|
|
{
|
|
id: "video-2", name: "Cinematic Product Showcase", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/temp/product_showcase.mp4", videoAriaLabel: "Cinematic product showcase video"
|
|
},
|
|
{
|
|
id: "video-3", name: "E-commerce Strategy Insights", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/temp/ecommerce_strategy.mp4", videoAriaLabel: "Video on e-commerce strategy insights"
|
|
},
|
|
{
|
|
id: "video-4", name: "Brand Storytelling through Video", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/temp/brand_storytelling.mp4", videoAriaLabel: "Video on brand storytelling"
|
|
},
|
|
{
|
|
id: "video-5", name: "Motion Graphics Demo Reel", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/temp/motion_graphics.mp4", videoAriaLabel: "Motion graphics demo reel video"
|
|
},
|
|
{
|
|
id: "video-6", name: "Tutorial: Advanced Video Editing", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/temp/video_editing_tutorial.mp4", videoAriaLabel: "Advanced video editing tutorial video"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Let's Connect"
|
|
description="Reach out for collaborations, coaching, or project inquiries. I'm always eager to explore new opportunities."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "text", placeholder: "Your Phone Number (Optional)"},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Your Message", rows: 5,
|
|
required: true,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/polygonal-abstract-shapes-network-connection-big-data-concept_90220-460.jpg"
|
|
imageAlt="Connect with Mohammed Amine Belalia"
|
|
mediaAnimation="none"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=2xvbn1"
|
|
logoAlt="Mohammed Amine Belalia Logo"
|
|
logoText="Mohammed Amine Belalia"
|
|
copyrightText="© 2024 Mohammed Amine Belalia. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Linkedin,
|
|
href: "#", ariaLabel: "LinkedIn profile"},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:amine1660belalia@gmail.com", ariaLabel: "Email"},
|
|
{
|
|
icon: Phone,
|
|
href: "tel:01017320011504", ariaLabel: "Phone number"},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |