Update src/app/page.tsx
This commit is contained in:
293
src/app/page.tsx
293
src/app/page.tsx
@@ -20,27 +20,22 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "portfolio",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Portfolio", id: "portfolio" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Creative Studio"
|
||||
/>
|
||||
@@ -48,33 +43,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
title="Bringing Stories to Life"
|
||||
description="Expert video editor, motion animator, and graphic designer. I transform ideas into compelling visual narratives."
|
||||
tag="Portfolio Portfolio Portfolio"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/monitor-showing-ai-virtual-assistant-producing-clips_482257-112677.jpg?_wi=1",
|
||||
imageAlt: "video editor workspace monitor editing software",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/monitor-showing-ai-virtual-assistant-producing-clips_482257-112677.jpg", imageAlt: "video editor workspace monitor editing software"
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gradient-balloon-arrangement_23-2148935856.jpg?_wi=1",
|
||||
imageAlt: "motion graphics abstract shape animation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/creative-african-american-graphic-designer-editing-images-copy-space_482257-121500.jpg",
|
||||
imageAlt: "Creative african american graphic designer editing images next to copy space",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/asian-professional-video-editor-sitting-multi-monitor-workspace-while-enhancing-movie-footage-quality-using-advanced-software-post-production-house-team-leader-editing-film-frames_482257-42934.jpg",
|
||||
imageAlt: "Asian professional video editor sitting at multi monitor workspace while enhancing movie footage quality using advanced software.",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-processing-software-interface-computer-screens-creative-agency-studio_482257-82219.jpg",
|
||||
imageAlt: "Photo processing software interface on computer screens in creative agency studio",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gradient-balloon-arrangement_23-2148935856.jpg", imageAlt: "motion graphics abstract shape animation"
|
||||
}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
@@ -95,36 +74,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Video Editing",
|
||||
author: "Pro Suite",
|
||||
description: "Story-driven editing, color grading, and precise pacing.",
|
||||
tags: [
|
||||
"Editing",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-long-blonde-hair-red-jacket_23-2149020131.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Motion Graphics",
|
||||
author: "After Effects",
|
||||
description: "Engaging animations, infographics, and dynamic typography.",
|
||||
tags: [
|
||||
"Animation",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photographer-filming-daily-vlog-his-work-using-mobile-phone_482257-82185.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Graphic Design",
|
||||
author: "Creative Suite",
|
||||
description: "Visual branding, print layouts, and digital assets.",
|
||||
tags: [
|
||||
"Design",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg?_wi=1",
|
||||
},
|
||||
{ id: "1", title: "Video Editing", author: "Pro Suite", description: "Story-driven editing, color grading, and precise pacing.", tags: ["Editing"], imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-long-blonde-hair-red-jacket_23-2149020131.jpg" },
|
||||
{ id: "2", title: "Motion Graphics", author: "After Effects", description: "Engaging animations, infographics, and dynamic typography.", tags: ["Animation"], imageSrc: "http://img.b2bpic.net/free-photo/photographer-filming-daily-vlog-his-work-using-mobile-phone_482257-82185.jpg" },
|
||||
{ id: "3", title: "Graphic Design", author: "Creative Suite", description: "Visual branding, print layouts, and digital assets.", tags: ["Design"], imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg" }
|
||||
]}
|
||||
title="Creative Services"
|
||||
description="Offering a full suite of post-production and creative design services."
|
||||
@@ -138,60 +90,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Design",
|
||||
name: "Motion Graphics Reel",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-small-decorative-objects-with-vivid-colors_23-2149732954.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Design",
|
||||
name: "Brand Identity Animation",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "8",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-power-washing-cartoon-illustration_23-2151088033.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Design",
|
||||
name: "UI/UX Branding Kit",
|
||||
price: "Featured",
|
||||
rating: 4,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-stationery-business-visiting-cards_23-2148500530.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Design",
|
||||
name: "Short Form Video",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/videographer-recording-tutorial-using-smartphone-selfie-camera-talking-about-elevating-video-quality-with-skillful-editing-techniques-influencer-films-post-production-guide-with-phone-pov-shot_482257-73772.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Design",
|
||||
name: "Typographic Motion Set",
|
||||
price: "Featured",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/number-14-valentines-day-with-3d-hearts_23-2149917502.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Design",
|
||||
name: "Digital Marketing Assets",
|
||||
price: "Featured",
|
||||
rating: 4,
|
||||
reviewCount: "19",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/modern-marketing-background_23-2147740931.jpg",
|
||||
},
|
||||
{ id: "1", brand: "Design", name: "Motion Graphics Reel", price: "Featured", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/still-life-small-decorative-objects-with-vivid-colors_23-2149732954.jpg" },
|
||||
{ id: "2", brand: "Design", name: "Brand Identity Animation", price: "Featured", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-power-washing-cartoon-illustration_23-2151088033.jpg" },
|
||||
{ id: "3", brand: "Design", name: "UI/UX Branding Kit", price: "Featured", rating: 4, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/minimalist-stationery-business-visiting-cards_23-2148500530.jpg" }
|
||||
]}
|
||||
title="Selected Work"
|
||||
description="A glimpse into my recent design and motion projects."
|
||||
@@ -203,61 +104,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
date: "Jan 2024",
|
||||
title: "CEO, TechNode",
|
||||
quote: "Exceptional eye for detail and pacing. My videos look professional and clean.",
|
||||
tag: "Editor",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/monitor-showing-ai-virtual-assistant-producing-clips_482257-112677.jpg?_wi=2",
|
||||
imageAlt: "business portrait professional female",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark Jensen",
|
||||
date: "Dec 2023",
|
||||
title: "Marketing Dir",
|
||||
quote: "The motion graphics added a new level of professionalism to our brand.",
|
||||
tag: "Animator",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gradient-balloon-arrangement_23-2148935856.jpg?_wi=2",
|
||||
imageAlt: "business portrait professional female",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Chen",
|
||||
date: "Nov 2023",
|
||||
title: "Founder, StudioX",
|
||||
quote: "Highly efficient designer. Delivered exactly what I needed on time.",
|
||||
tag: "Designer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-posing-with-blue-jacket_23-2149020770.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-wearing-headphones-answering-hr-interview-questions-videoconference_482257-101028.jpg",
|
||||
imageAlt: "business portrait professional female",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Ross",
|
||||
date: "Oct 2023",
|
||||
title: "Content Mgr",
|
||||
quote: "Talented individual who understands visual storytelling perfectly.",
|
||||
tag: "Editor",
|
||||
avatarSrc: "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",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-long-blonde-hair-red-jacket_23-2149020131.jpg?_wi=2",
|
||||
imageAlt: "business portrait professional female",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Lisa Wang",
|
||||
date: "Sep 2023",
|
||||
title: "Art Lead",
|
||||
quote: "Creative, reliable, and incredibly technical. A true asset to any project.",
|
||||
tag: "Animator",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/people-technology-close-up-shot-happy-face-attractive-bearded-man-sitting-front-laptop-screen-smiling-joyfully-while-messaging-friends-online-via-social-networks_273609-6655.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_52683-68958.jpg?_wi=2",
|
||||
imageAlt: "business portrait professional female",
|
||||
},
|
||||
{ id: "1", name: "Sarah Miller", date: "Jan 2024", title: "CEO, TechNode", quote: "Exceptional eye for detail and pacing. My videos look professional and clean.", tag: "Editor", avatarSrc: "http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg" },
|
||||
{ id: "2", name: "Mark Jensen", date: "Dec 2023", title: "Marketing Dir", quote: "The motion graphics added a new level of professionalism to our brand.", tag: "Animator", avatarSrc: "http://img.b2bpic.net/free-photo/successful-businessman-imagines-great-career_1163-5478.jpg" }
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="What partners say about the creative process."
|
||||
@@ -270,54 +118,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
price: "$150",
|
||||
name: "Essential Edit",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"1 Video Edit",
|
||||
"Color Grading",
|
||||
"Social Sizing",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
price: "$400",
|
||||
name: "Pro Motion",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Advanced Animation",
|
||||
"Visual Assets",
|
||||
"Priority Turnaround",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
price: "$800",
|
||||
name: "Creative Suite",
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Full Brand Package",
|
||||
"Motion & Edit",
|
||||
"24/7 Support",
|
||||
],
|
||||
},
|
||||
{ id: "basic", price: "$150", name: "Essential Edit", buttons: [{ text: "Get Started", href: "#contact" }], features: ["1 Video Edit", "Color Grading", "Social Sizing"] },
|
||||
{ id: "pro", price: "$400", name: "Pro Motion", buttons: [{ text: "Get Started", href: "#contact" }], features: ["Advanced Animation", "Visual Assets", "Priority Turnaround"] }
|
||||
]}
|
||||
title="Service Packages"
|
||||
description="Choose a plan that fits your creative needs."
|
||||
@@ -330,21 +132,8 @@ export default function LandingPage() {
|
||||
title="My Impact"
|
||||
tag="Data Driven"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "150+",
|
||||
description: "Projects Completed",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "45+",
|
||||
description: "Happy Clients",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "3+",
|
||||
description: "Years Experience",
|
||||
},
|
||||
{ id: "1", value: "150+", description: "Projects Completed" },
|
||||
{ id: "2", value: "45+", description: "Happy Clients" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -355,21 +144,8 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What is your turnaround time?",
|
||||
content: "Depending on project complexity, usually 3-5 days.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you provide raw files?",
|
||||
content: "Yes, raw source files are provided upon final delivery.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Can you handle bulk projects?",
|
||||
content: "Yes, I offer bulk pricing for continuous content creators.",
|
||||
},
|
||||
{ id: "1", title: "What is your turnaround time?", content: "Depending on project complexity, usually 3-5 days." },
|
||||
{ id: "2", title: "Do you provide raw files?", content: "Yes, raw source files are provided upon final delivery." }
|
||||
]}
|
||||
title="Frequently Asked"
|
||||
description="Common questions about my creative process and workflow."
|
||||
@@ -380,16 +156,9 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
text="Ready to bring your vision to life? Let's talk about your next project."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Me",
|
||||
href: "mailto:hello@example.com",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Contact Me", href: "mailto:hello@example.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user