304 lines
16 KiB
TypeScript
304 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import { Activity, Award, Box, Camera, Code, Lightbulb, Palette, Star, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="none"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Skills", id: "#skills"},
|
|
{
|
|
name: "Portfolio", id: "#portfolio"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Digital Creator"
|
|
bottomLeftText="Innovation in Digital Arts"
|
|
bottomRightText="hello@digitalcreator.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "glowing-orb"}}
|
|
imagePosition="right"
|
|
title="Digital Creator: Design, Code & Innovation"
|
|
description="Explore my work across 3D design, programming, and creative media. Each project demonstrates technical skill and creative vision."
|
|
buttons={[
|
|
{
|
|
text: "View My Work", href: "#portfolio"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/laptop-keyboard-blue-neon-glow-night-cyber-office_169016-70821.jpg"
|
|
imageAlt="Abstract digital art studio with glowing interfaces and geometric shapes"
|
|
mediaAnimation="slide-up"
|
|
fixedMediaHeight={true}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-african-american-girl-sitting-cafe_1262-3083.jpg", alt: "Smiling creative professional"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-portrait-caucasian-happy-teacher-glasses_74855-9736.jpg", alt: "Confident tech lead"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-long-hair-dressed-yellow-jacket-red-shirt_613910-10364.jpg", alt: "Expressive digital artist"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/thinking-business-ideas_1098-14443.jpg", alt: "Innovative project manager"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-glasses_23-2148766932.jpg", alt: "Collaborative designer"},
|
|
]}
|
|
avatarText="Trusted by creative professionals"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "3D Modeling", icon: Box,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Creative Code", icon: Code,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Visual Storytelling", icon: Camera,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Brand Identity", icon: Palette,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Interactive Experiences", icon: Activity,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={true}
|
|
title="Unlocking Creative Potential Across Digital Disciplines"
|
|
metrics={[
|
|
{
|
|
icon: Box,
|
|
label: "Years Experience", value: "8+"},
|
|
{
|
|
icon: Code,
|
|
label: "Projects Completed", value: "50+"},
|
|
{
|
|
icon: Users,
|
|
label: "Clients Served", value: "15+"},
|
|
{
|
|
icon: Zap,
|
|
label: "Innovations Delivered", value: "10+"},
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<FeatureCardTwentySeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "3d-design", title: "3D Design & Modeling", descriptions: [
|
|
"Expertise in creating complex 3D models, textures, and environments for games, animation, and visualization. Proficient in Maya, Blender, and ZBrush."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-concept-human_23-2150688619.jpg", imageAlt: "Abstract 3D rendering of geometric shapes"},
|
|
{
|
|
id: "programming", title: "Creative Coding & Development", descriptions: [
|
|
"Developing interactive art installations, web-based experiences, and custom tools using Python, JavaScript, and creative frameworks like p5.js and Three.js."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cyber-intelligence-secure-operations-center-with-usa-flag-big-screen_482257-105777.jpg", imageAlt: "Code snippets with syntax highlighting"},
|
|
{
|
|
id: "media-literacy", title: "Media Literacy & Storytelling", descriptions: [
|
|
"Crafting compelling narratives and visual content across various media platforms, with a strong understanding of audience engagement and impactful communication."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-process-goals-target-success-graph_53876-133766.jpg", imageAlt: "Collage of digital media types"},
|
|
{
|
|
id: "graphic-design", title: "Graphic Design & Branding", descriptions: [
|
|
"Designing captivating visuals, branding identities, and marketing materials that resonate with target audiences using Adobe Creative Suite."],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/abstract-multicolored-water-splashing-black-backdrop_23-2147837298.jpg", imageAlt: "Bold graphic design with typography"},
|
|
]}
|
|
title="My Diverse Digital Arts Skillset"
|
|
description="A comprehensive overview of my capabilities in the digital arts, combining technical proficiency with creative execution."
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="two-columns-alternating-heights"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "project-1", name: "Futuristic Robot Concept", price: "3D Design", variant: "Character Modeling", imageSrc: "http://img.b2bpic.net/free-photo/view-purple-female-robot-women-s-day-celebration_23-2151257683.jpg", imageAlt: "Realistic 3D render of a futuristic robot"},
|
|
{
|
|
id: "project-2", name: "Interactive Web Art", price: "Programming", variant: "Generative Animation", imageSrc: "http://img.b2bpic.net/free-vector/geometric-shapes-landing-page-gradient_23-2148266746.jpg", imageAlt: "Screenshot of an interactive web art experience"},
|
|
{
|
|
id: "project-3", name: "Data Visualization Infographic", price: "Graphic Design", variant: "Information Design", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-science-infographic_23-2149186854.jpg", imageAlt: "Visually compelling infographic design"},
|
|
{
|
|
id: "project-4", name: "Fantastical Landscape Painting", price: "Digital Painting", variant: "Concept Art", imageSrc: "http://img.b2bpic.net/free-photo/solitary-figure-cliff-overlooking-mountains_23-2151998937.jpg", imageAlt: "Digital painting of a fantastical landscape"},
|
|
{
|
|
id: "project-5", name: "Mobile App UI/UX Redesign", price: "UI/UX Design", variant: "Product Design", imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-picture-city_53876-104761.jpg", imageAlt: "Stylized user interface concept for a mobile app"},
|
|
{
|
|
id: "project-6", name: "Animated Short: 'The Wanderer'", price: "3D Animation", variant: "Character Rigging", imageSrc: "http://img.b2bpic.net/free-photo/customer-feedback-concept-with-hand-holding-balls_23-2150030252.jpg", imageAlt: "Animation loop of a character"},
|
|
]}
|
|
title="My Portfolio of Digital Art Projects"
|
|
description="Showcasing a curated selection of projects across various digital art disciplines, highlighting my creative vision and technical execution."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "disciplines-mastered", value: "4+", title: "Disciplines Mastered", description: "Proficiency across 3D, coding, media, & graphic design.", icon: Award,
|
|
},
|
|
{
|
|
id: "innovation-rate", value: "95%", title: "Innovation Rate", description: "Projects featuring novel techniques or concepts.", icon: Lightbulb,
|
|
},
|
|
{
|
|
id: "satisfaction-score", value: "4.9/5", title: "Client Satisfaction", description: "Average rating from past collaborations and projects.", icon: Star,
|
|
},
|
|
]}
|
|
title="Quantifying My Impact in Digital Arts"
|
|
description="Key metrics reflecting the breadth and quality of my work, demonstrating dedication to excellence and client success."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={true}
|
|
testimonial="\"Working with [Your Name] was an exceptional experience. Their ability to blend technical programming skills with stunning 3D design brought our project to life in ways we hadn't imagined. Truly a multidisciplinary talent!\""
|
|
rating={5}
|
|
author="Ava Sharma, Creative Director at Nexus Innovations"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-ethnic-executive-woman-looking-camera_1098-20037.jpg", alt: "Ava Sharma"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/development-agency-office-worker-analyzing-project-sales-fintech-startup-businessperson-sitting-desk-marketing-company-office-developing-financial-strategy-accounting-management_482257-40323.jpg", alt: "Ben Carter"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-smiley-man-darkroom_23-2149893830.jpg", alt: "Chloe Davis"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/plus-size-woman-working-professional-business-office_23-2150579596.jpg", alt: "Daniel Lee"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-business-woman_158595-4757.jpg", alt: "Jordan Alex"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "What tools do you primarily use for 3D design?", content: "For 3D design, I primarily use industry-standard software such as Maya and Blender for modeling and animation, and ZBrush for high-detail sculpting. I also integrate Substance Painter for texturing workflows."},
|
|
{
|
|
id: "faq-2", title: "Can you develop interactive web experiences?", content: "Absolutely! I specialize in creative coding using JavaScript with libraries like p5.js and Three.js to build engaging and interactive web-based digital art experiences and visualizations."},
|
|
{
|
|
id: "faq-3", title: "How do you approach media literacy in your projects?", content: "My approach to media literacy involves not only creating diverse media content but also critically analyzing its impact and effectiveness. This ensures my projects communicate clearly and resonate deeply with the intended audience."},
|
|
{
|
|
id: "faq-4", title: "Do you offer branding and graphic design services?", content: "Yes, I provide comprehensive graphic design services including brand identity development, logo design, marketing collateral, and visual communication strategies using the Adobe Creative Suite (Photoshop, Illustrator, InDesign)."},
|
|
{
|
|
id: "faq-5", title: "What is your process for a new project?", content: "My process typically starts with a discovery call to understand your vision, followed by concept development, iterative design, technical execution, and final delivery. Communication and collaboration are key at every stage."},
|
|
]}
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find quick answers to common questions about my digital arts expertise and project collaborations."
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
tag="Connect"
|
|
title="Ready to Create Something Amazing?"
|
|
description="Whether you have a project idea, a collaboration proposal, or just want to chat about digital arts, I'd love to hear from you. Let's bring your vision to life."
|
|
buttons={[
|
|
{
|
|
text: "Get in Touch", href: "mailto:hello@digitalcreator.com"},
|
|
{
|
|
text: "View My Résumé", href: "#"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigation", items: [
|
|
{
|
|
label: "Home", href: "#home"},
|
|
{
|
|
label: "About", href: "#about"},
|
|
{
|
|
label: "Portfolio", href: "#portfolio"},
|
|
{
|
|
label: "Skills", href: "#skills"},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{
|
|
label: "Email", href: "mailto:hello@digitalcreator.com"},
|
|
{
|
|
label: "LinkedIn", href: "https://linkedin.com/in/digitalcreator"},
|
|
{
|
|
label: "GitHub", href: "https://github.com/digitalcreator"},
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{
|
|
label: "Blog", href: "#"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
bottomLeftText="© 2024 Digital Creator. All rights reserved."
|
|
bottomRightText="Built with passion."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|