Merge version_2 into main #1
285
src/app/page.tsx
285
src/app/page.tsx
@@ -31,29 +31,17 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
name: "Services", id: "#services"},
|
||||
{
|
||||
name: "Portfolio",
|
||||
id: "#portfolio",
|
||||
},
|
||||
name: "Portfolio", id: "#portfolio"},
|
||||
{
|
||||
name: "Skills",
|
||||
id: "#skills",
|
||||
},
|
||||
name: "Skills", id: "#skills"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="Kelyan Ndjock"
|
||||
/>
|
||||
@@ -62,35 +50,22 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Kelyan Ndjock: Graphic Designer"
|
||||
description="Shape. Space. Impact. Crafting compelling visual stories through contemporary art."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-acrylic-texture-with-frame-concept_23-2148132147.jpg",
|
||||
imageAlt: "Abstract contemporary graphic design",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-acrylic-texture-with-frame-concept_23-2148132147.jpg", imageAlt: "Abstract contemporary graphic design"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimal-surrealistic-abstract-background_23-2151896360.jpg",
|
||||
imageAlt: "Modern logo design concept",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimal-surrealistic-abstract-background_23-2151896360.jpg", imageAlt: "Modern logo design concept"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/upload-icon-front-side_187299-45737.jpg",
|
||||
imageAlt: "UI/UX design for a mobile app",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/upload-icon-front-side_187299-45737.jpg", imageAlt: "UI/UX design for a mobile app"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-abstract-3d-design-elements_23-2148996824.jpg",
|
||||
imageAlt: "Geometric brand identity elements",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-abstract-3d-design-elements_23-2148996824.jpg", imageAlt: "Geometric brand identity elements"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-model-posing-with-colorful-body-painting_23-2149668958.jpg",
|
||||
imageAlt: "Minimalist poster design",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-model-posing-with-colorful-body-painting_23-2149668958.jpg", imageAlt: "Minimalist poster design"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/abstract-blue-black-business-flyer-design_1017-9898.jpg",
|
||||
imageAlt: "Clean packaging design mockup",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/abstract-blue-black-business-flyer-design_1017-9898.jpg", imageAlt: "Clean packaging design mockup"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -100,9 +75,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="About Kelyan Ndjock"
|
||||
description={[
|
||||
"Hello! I'm Kelyan Ndjock, a Graphic Designer with 4 years of experience specializing in Contemporary Art. My design philosophy revolves around creating the most adequate designs for my clients while respecting my unique visual identity.",
|
||||
"I believe in the power of thoughtful design to transform ideas into impactful visuals, blending artistic vision with strategic communication. Let's create something extraordinary together.",
|
||||
]}
|
||||
"Hello! I'm Kelyan Ndjock, a Graphic Designer with 4 years of experience specializing in Contemporary Art. My design philosophy revolves around creating the most adequate designs for my clients while respecting my unique visual identity.", "I believe in the power of thoughtful design to transform ideas into impactful visuals, blending artistic vision with strategic communication. Let's create something extraordinary together."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -114,54 +87,34 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Brand Identity Design",
|
||||
description: "Crafting unique and memorable visual identities that resonate with your audience.",
|
||||
},
|
||||
title: "Brand Identity Design", description: "Crafting unique and memorable visual identities that resonate with your audience."},
|
||||
{
|
||||
icon: Type,
|
||||
title: "Logo Design",
|
||||
description: "Developing distinctive logos that embody your brand's essence and vision.",
|
||||
},
|
||||
title: "Logo Design", description: "Developing distinctive logos that embody your brand's essence and vision."},
|
||||
{
|
||||
icon: Share2,
|
||||
title: "Social Media Design",
|
||||
description: "Creating engaging visuals optimized for various social media platforms to capture attention.",
|
||||
},
|
||||
title: "Social Media Design", description: "Creating engaging visuals optimized for various social media platforms to capture attention."},
|
||||
{
|
||||
icon: Image,
|
||||
title: "Poster Design",
|
||||
description: "Designing striking posters that convey your message with visual impact and clarity.",
|
||||
},
|
||||
title: "Poster Design", description: "Designing striking posters that convey your message with visual impact and clarity."},
|
||||
{
|
||||
icon: FileText,
|
||||
title: "Flyer Design",
|
||||
description: "Producing informative and attractive flyers for effective communication.",
|
||||
},
|
||||
title: "Flyer Design", description: "Producing informative and attractive flyers for effective communication."},
|
||||
{
|
||||
icon: CalendarCheck,
|
||||
title: "Event Branding",
|
||||
description: "Developing cohesive visual themes for events, from invitations to on-site graphics.",
|
||||
},
|
||||
title: "Event Branding", description: "Developing cohesive visual themes for events, from invitations to on-site graphics."},
|
||||
{
|
||||
icon: Package,
|
||||
title: "Packaging Design",
|
||||
description: "Designing innovative and functional packaging that enhances product appeal and brand recognition.",
|
||||
},
|
||||
title: "Packaging Design", description: "Designing innovative and functional packaging that enhances product appeal and brand recognition."},
|
||||
{
|
||||
icon: Film,
|
||||
title: "Motion Graphics",
|
||||
description: "Bringing designs to life with dynamic animations and captivating visual effects.",
|
||||
},
|
||||
title: "Motion Graphics", description: "Bringing designs to life with dynamic animations and captivating visual effects."},
|
||||
{
|
||||
icon: Monitor,
|
||||
title: "UI/UX Design",
|
||||
description: "Creating intuitive and aesthetically pleasing user interfaces for digital products and experiences.",
|
||||
},
|
||||
title: "UI/UX Design", description: "Creating intuitive and aesthetically pleasing user interfaces for digital products and experiences."},
|
||||
{
|
||||
icon: Printer,
|
||||
title: "Print Design",
|
||||
description: "Expert design for print media, ensuring high-quality output for all your physical materials.",
|
||||
},
|
||||
title: "Print Design", description: "Expert design for print media, ensuring high-quality output for all your physical materials."},
|
||||
]}
|
||||
title="My Creative Services"
|
||||
description="Offering a comprehensive range of design solutions to bring your vision to life."
|
||||
@@ -173,22 +126,14 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "4+",
|
||||
description: "Years of Experience",
|
||||
},
|
||||
id: "1", value: "4+", description: "Years of Experience"},
|
||||
{
|
||||
id: "2",
|
||||
value: "100+",
|
||||
description: "Projects Completed",
|
||||
},
|
||||
id: "2", value: "100+", description: "Projects Completed"},
|
||||
{
|
||||
id: "3",
|
||||
value: "95%",
|
||||
description: "Client Satisfaction",
|
||||
},
|
||||
id: "3", value: "95%", description: "Client Satisfaction"},
|
||||
]}
|
||||
title="Experience & Expertise"
|
||||
description="Bringing years of dedicated practice and a unique design philosophy to every project."
|
||||
@@ -203,65 +148,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Brand Identity",
|
||||
name: "Future Corp Rebrand",
|
||||
price: "View Case Study",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/business-stationery-concept_23-2147725116.jpg",
|
||||
imageAlt: "Brand Identity Redesign for Future Corp",
|
||||
},
|
||||
id: "1", brand: "Brand Identity", name: "Future Corp Rebrand", price: "View Case Study", rating: 5,
|
||||
reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/business-stationery-concept_23-2147725116.jpg", imageAlt: "Brand Identity Redesign for Future Corp"},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Social Media",
|
||||
name: "Eco-Friendly Campaign",
|
||||
price: "View Project",
|
||||
rating: 5,
|
||||
reviewCount: "8",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/planning-strategy-marketing-startup-icon_53876-133749.jpg",
|
||||
imageAlt: "Social Media Campaign for an Eco-Friendly Brand",
|
||||
},
|
||||
id: "2", brand: "Social Media", name: "Eco-Friendly Campaign", price: "View Project", rating: 5,
|
||||
reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/planning-strategy-marketing-startup-icon_53876-133749.jpg", imageAlt: "Social Media Campaign for an Eco-Friendly Brand"},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Event Branding",
|
||||
name: "Annual Design Fest",
|
||||
price: "View Details",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/modern-gradient-music-festival-flyer_1421494-372.jpg",
|
||||
imageAlt: "Event Branding for Annual Design Festival",
|
||||
},
|
||||
id: "3", brand: "Event Branding", name: "Annual Design Fest", price: "View Details", rating: 5,
|
||||
reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-vector/modern-gradient-music-festival-flyer_1421494-372.jpg", imageAlt: "Event Branding for Annual Design Festival"},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Packaging Design",
|
||||
name: "Artisan Coffee Packaging",
|
||||
price: "View Details",
|
||||
rating: 5,
|
||||
reviewCount: "9",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/set-minimalist-social-post-banner-with-indian-style-light-colors_1017-59246.jpg",
|
||||
imageAlt: "Packaging Design for Artisan Coffee",
|
||||
},
|
||||
id: "4", brand: "Packaging Design", name: "Artisan Coffee Packaging", price: "View Details", rating: 5,
|
||||
reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-vector/set-minimalist-social-post-banner-with-indian-style-light-colors_1017-59246.jpg", imageAlt: "Packaging Design for Artisan Coffee"},
|
||||
{
|
||||
id: "5",
|
||||
brand: "UI/UX",
|
||||
name: "Creative Agency Website",
|
||||
price: "View Prototype",
|
||||
rating: 5,
|
||||
reviewCount: "10",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345422.jpg",
|
||||
imageAlt: "UI/UX Design for a Creative Agency Website",
|
||||
},
|
||||
id: "5", brand: "UI/UX", name: "Creative Agency Website", price: "View Prototype", rating: 5,
|
||||
reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-office_23-2151345422.jpg", imageAlt: "UI/UX Design for a Creative Agency Website"},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Motion Graphics",
|
||||
name: "Animated Brand Intro",
|
||||
price: "Watch Video",
|
||||
rating: 5,
|
||||
reviewCount: "7",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-view-letters-alphabet_23-2150499110.jpg",
|
||||
imageAlt: "Motion Graphics for an Animated Brand Introduction",
|
||||
},
|
||||
id: "6", brand: "Motion Graphics", name: "Animated Brand Intro", price: "Watch Video", rating: 5,
|
||||
reviewCount: "7", imageSrc: "http://img.b2bpic.net/free-photo/3d-view-letters-alphabet_23-2150499110.jpg", imageAlt: "Motion Graphics for an Animated Brand Introduction"},
|
||||
]}
|
||||
title="Selected Works & Projects"
|
||||
description="A showcase of contemporary art and brand-focused design solutions that push creative boundaries."
|
||||
@@ -276,69 +179,43 @@ export default function LandingPage() {
|
||||
features={[
|
||||
{
|
||||
icon: Crop,
|
||||
title: "Design Skills",
|
||||
description: "Typography, Layout Design, Brand Identity, Color Theory, Visual Communication.",
|
||||
},
|
||||
title: "Design Skills", description: "Typography, Layout Design, Brand Identity, Color Theory, Visual Communication."},
|
||||
{
|
||||
icon: Feather,
|
||||
title: "Typography",
|
||||
description: "Mastering fonts and text to create visual harmony and effective messaging.",
|
||||
},
|
||||
title: "Typography", description: "Mastering fonts and text to create visual harmony and effective messaging."},
|
||||
{
|
||||
icon: Grid,
|
||||
title: "Layout Design",
|
||||
description: "Structuring visual elements for clarity, balance, and aesthetic appeal.",
|
||||
},
|
||||
title: "Layout Design", description: "Structuring visual elements for clarity, balance, and aesthetic appeal."},
|
||||
{
|
||||
icon: Award,
|
||||
title: "Brand Identity",
|
||||
description: "Developing consistent and compelling brand visuals across all platforms.",
|
||||
},
|
||||
title: "Brand Identity", description: "Developing consistent and compelling brand visuals across all platforms."},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Color Theory",
|
||||
description: "Applying color psychology and principles for impactful visual experiences.",
|
||||
},
|
||||
title: "Color Theory", description: "Applying color psychology and principles for impactful visual experiences."},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: "Visual Communication",
|
||||
description: "Conveying messages effectively through strategic use of imagery and graphics.",
|
||||
},
|
||||
title: "Visual Communication", description: "Conveying messages effectively through strategic use of imagery and graphics."},
|
||||
{
|
||||
icon: Laptop,
|
||||
title: "Software Skills",
|
||||
description: "Expertise in industry-leading design software for professional output.",
|
||||
},
|
||||
title: "Software Skills", description: "Expertise in industry-leading design software for professional output."},
|
||||
{
|
||||
icon: Image,
|
||||
title: "Photoshop",
|
||||
description: "Advanced image manipulation, retouching, and digital painting.",
|
||||
},
|
||||
title: "Photoshop", description: "Advanced image manipulation, retouching, and digital painting."},
|
||||
{
|
||||
icon: PenTool,
|
||||
title: "Illustrator",
|
||||
description: "Vector graphics creation, logo design, and illustration.",
|
||||
},
|
||||
title: "Illustrator", description: "Vector graphics creation, logo design, and illustration."},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: "InDesign",
|
||||
description: "Professional layout design for print and digital publications.",
|
||||
},
|
||||
title: "InDesign", description: "Professional layout design for print and digital publications."},
|
||||
{
|
||||
icon: Square,
|
||||
title: "Canva",
|
||||
description: "Efficient design for quick projects and social media content.",
|
||||
},
|
||||
title: "Canva", description: "Efficient design for quick projects and social media content."},
|
||||
{
|
||||
icon: Layers,
|
||||
title: "Figma",
|
||||
description: "Collaborative UI/UX design, prototyping, and wireframing.",
|
||||
},
|
||||
title: "Figma", description: "Collaborative UI/UX design, prototyping, and wireframing."},
|
||||
{
|
||||
icon: Film,
|
||||
title: "After Effects",
|
||||
description: "Motion graphics, visual effects, and animation production.",
|
||||
},
|
||||
title: "After Effects", description: "Motion graphics, visual effects, and animation production."},
|
||||
]}
|
||||
title="My Skillset"
|
||||
description="Proficient in design principles and industry-standard software to deliver exceptional results."
|
||||
@@ -349,20 +226,15 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Get in Touch"
|
||||
title="Let's Create Together"
|
||||
description="Ready to transform your vision into impactful design? Contact Kelyan Ndjock today for a consultation or collaboration."
|
||||
buttons={[
|
||||
{
|
||||
text: "Email Me",
|
||||
href: "mailto:parfaitkelyan@gmaim.com",
|
||||
},
|
||||
text: "Email Me", href: "mailto:parfaitkelyan@gmaim.com"},
|
||||
{
|
||||
text: "Call Me",
|
||||
href: "tel:+237697328189",
|
||||
},
|
||||
text: "Call Me", href: "tel:+237697328189"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -372,54 +244,33 @@ export default function LandingPage() {
|
||||
logoText="Kelyan Ndjock"
|
||||
columns={[
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
title: "Social", items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://www.instagram.com/kelyan.ndjock/",
|
||||
},
|
||||
label: "Instagram", href: "https://www.instagram.com/kelyan.ndjock/"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
title: "Contact", items: [
|
||||
{
|
||||
label: "Email: parfaitkelyan@gmaim.com",
|
||||
href: "mailto:parfaitkelyan@gmaim.com",
|
||||
},
|
||||
label: "Email: parfaitkelyan@gmaim.com", href: "mailto:parfaitkelyan@gmaim.com"},
|
||||
{
|
||||
label: "Phone: (+237) 697 328 189",
|
||||
href: "tel:+237697328189",
|
||||
},
|
||||
label: "Phone: (+237) 697 328 189", href: "tel:+237697328189"},
|
||||
{
|
||||
label: "Location: Yaoundé, Cameroon",
|
||||
href: "#",
|
||||
},
|
||||
label: "Location: Yaoundé, Cameroon", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
label: "Home", href: "#hero"},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Services", href: "#services"},
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
label: "Portfolio", href: "#portfolio"},
|
||||
{
|
||||
label: "Skills",
|
||||
href: "#skills",
|
||||
},
|
||||
label: "Skills", href: "#skills"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user