184 lines
9.3 KiB
TypeScript
184 lines
9.3 KiB
TypeScript
"use client";
|
|
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Code, Palette, Sparkles, Target, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="grid"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Work", id: "work" },
|
|
{ name: "Skills", id: "skills" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "View My Work", href: "work" }}
|
|
brandName="Kaled"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Kaled — Designer & Problem Solver"
|
|
description="Crafting thoughtful digital experiences with a focus on elegant design and meaningful interaction. Explore my work, background, and approach to design and technology."
|
|
background={{ variant: "plain" }}
|
|
tag="Designer & Creative Technologist"
|
|
tagAnimation="opacity"
|
|
buttons={[
|
|
{ text: "View My Work", href: "work" },
|
|
{ text: "Get In Touch", href: "contact" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67066.jpg", imageAlt: "Kaled - Designer Profile"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/gradient-colored-ui-kit-pack_23-2149193252.jpg?_wi=1", imageAlt: "UI Design Work"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page-template_23-2149050184.jpg?_wi=1", imageAlt: "UX Design Work"},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="About My Work"
|
|
description={[
|
|
"I'm a designer with a passion for solving complex problems through thoughtful design and strategic thinking. Over the years, I've worked with innovative teams to create digital experiences that resonate with users and drive meaningful business outcomes.", "My approach combines meticulous attention to detail with a deep understanding of user behavior and market dynamics. I believe that great design isn't just about aesthetics—it's about creating intuitive, elegant solutions that make people's lives better."]}
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Download Resume", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
showBorder={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="work" data-section="work">
|
|
<ProductCardFour
|
|
title="Featured Work"
|
|
description="A selection of my most impactful design projects across UI/UX, branding, and digital strategy."
|
|
tag="Portfolio"
|
|
tagAnimation="opacity"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="uniform-all-items-equal"
|
|
carouselMode="buttons"
|
|
products={[
|
|
{
|
|
id: "1", name: "E-Commerce Platform Redesign", price: "UI/UX", variant: "Full platform redesign focusing on conversion optimization", imageSrc: "http://img.b2bpic.net/free-vector/gradient-colored-ui-kit-pack_23-2149193252.jpg?_wi=2", imageAlt: "E-Commerce Platform"},
|
|
{
|
|
id: "2", name: "SaaS Dashboard Experience", price: "Product Design", variant: "Complex data visualization and analytics interface", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-landing-page-template_23-2149050184.jpg?_wi=2", imageAlt: "SaaS Dashboard"},
|
|
{
|
|
id: "3", name: "Brand Identity System", price: "Branding", variant: "Comprehensive visual identity and design system", imageSrc: "http://img.b2bpic.net/free-psd/modern-business-card-design-pan-cafe-bakery_23-2152033501.jpg", imageAlt: "Brand Identity"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<FeatureBorderGlow
|
|
title="Skills & Expertise"
|
|
description="A comprehensive overview of my professional capabilities and core competencies."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
icon: Palette,
|
|
title: "Visual Design", description: "Creating beautiful, cohesive visual systems with meticulous attention to typography, color, and composition."},
|
|
{
|
|
icon: Zap,
|
|
title: "Product Strategy", description: "Aligning design with business goals through research-driven strategy and user-centered problem solving."},
|
|
{
|
|
icon: Code,
|
|
title: "Design Systems", description: "Building scalable, maintainable design systems that enable efficient collaboration across teams."},
|
|
{
|
|
icon: Users,
|
|
title: "User Research", description: "Understanding user behaviors and needs through interviews, testing, and data-driven insights."},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Creative Direction", description: "Providing strategic vision and aesthetic leadership for digital and brand initiatives."},
|
|
{
|
|
icon: Target,
|
|
title: "UX/UI Design", description: "Crafting intuitive interfaces and seamless user experiences across digital platforms."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="Kaled's design approach is exceptional. He combines creative excellence with strategic thinking, delivering solutions that are both beautiful and effective. His attention to detail and collaborative spirit make him a invaluable partner."
|
|
rating={5}
|
|
author="Sarah Johnson, Creative Director at InnovateLab"
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Sarah Johnson"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Michael Chen"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Emily Rodriguez"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "David Kim"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/abstract-white-curving-surface_272375-26332.jpg"
|
|
imageAlt="Footer background"
|
|
logoText="Kaled"
|
|
copyrightText="© 2025 Kaled. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Work", items: [
|
|
{ label: "Featured Projects", href: "#work" },
|
|
{ label: "Case Studies", href: "#" },
|
|
{ label: "Portfolio", href: "#work" },
|
|
],
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Background", href: "#about" },
|
|
{ label: "Skills", href: "#skills" },
|
|
{ label: "Resume", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Email", href: "mailto:hello@kaled.design" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|