294 lines
19 KiB
TypeScript
294 lines
19 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { BookOpen, Code, Compass, Heart, Lightbulb, Mail, MessageCircle, Palette, Sparkles, Users, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="About Me"
|
|
navItems={[
|
|
{ name: "Hero", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Journey", id: "journey" },
|
|
{ name: "Projects", id: "projects" },
|
|
{ name: "Content", id: "content" }
|
|
]}
|
|
button={{ text: "Get in Touch", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="A Young Creator Exploring Technology, Culture, and Creative Expression"
|
|
description="I'm a 12-year-old creator from Nichada, Bangkok, growing up in a vibrant family of seven. I blend my passion for technology, coding, and digital innovation with deep appreciation for Thai traditions, food, and art. Through Webild.io, I create engaging tutorials, videos, and guides to make digital learning accessible, fun, and inspiring for everyone."
|
|
tag="Young Creator & Content Producer"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Explore My Journey", href: "#about" },
|
|
{ text: "View My Work", href: "#projects" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-vibrant-portrait-of-a-young-12-year-ol-1774029292719-84d65e15.png", imageAlt: "Young creator portrait in Bangkok home workspace"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-modern-engaging-screenshot-of-the-webi-1774029292562-46959f8a.png", imageAlt: "Webild.io platform content creation interface"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Inspiring young creators and learners worldwide"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "My Story: From Nichada to Digital Creation" },
|
|
{
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-warm-inviting-scene-of-a-young-person--1774029292240-37bb2ff0.png", alt: "Home creative workspace with Thai cultural elements"
|
|
}
|
|
]}
|
|
buttons={[{ text: "Learn More About Me", href: "#journey" }]}
|
|
buttonAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="journey" data-section="journey">
|
|
<FeatureBorderGlow
|
|
title="My Journey: Curiosity, Creativity, and Connection"
|
|
description="Growing up in a vibrant family and exploring Bangkok's blend of tradition and modernity shaped who I am. From the golden temples to modern technologies, every experience fuels my creativity and desire to learn, create, and inspire others."
|
|
tag="Personal Growth & Exploration"
|
|
tagIcon={Compass}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
icon: Heart,
|
|
title: "Family Values", description: "Being part of a large family of 7 taught me teamwork, patience, empathy, and the power of supporting one another through every challenge and celebration."
|
|
},
|
|
{
|
|
icon: Code,
|
|
title: "Tech Passion", description: "From a young age, I've been fascinated by coding, computers, and digital tools. I love exploring how technology can solve problems and create beautiful, interactive experiences."
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "Cultural Heritage", description: "Thai traditions, food, and art inspire my creativity daily. I celebrate my roots while embracing modern digital innovation—finding harmony between tradition and technology."
|
|
},
|
|
{
|
|
icon: Lightbulb,
|
|
title: "Learning Philosophy", description: "I believe in learning by doing. Every project, every video, every guide is an opportunity to explore, experiment, and discover new possibilities in the digital world."
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Community Spirit", description: "Through Webild.io content, I aim to inspire others, share knowledge, and create meaningful digital experiences that help beginners understand complex ideas with joy."
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "Meet My Family", href: "#family" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="family" data-section="family">
|
|
<TeamCardOne
|
|
title="My Incredible Family: Seven Unique Souls"
|
|
description="Growing up with four siblings in Nichada, Bangkok created memories, lessons, and bonds that shape everything I do. Each family member brings their own energy, wisdom, and inspiration to my life and creative journey."
|
|
tag="Family Circle"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
members={[
|
|
{
|
|
id: "hof", name: "HOF (22 years old)", role: "The Protective Eldest", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/portrait-of-an-older-sibling-hof-age-22--1774029291201-fc126823.png", imageAlt: "Portrait of HOF, the protective eldest sibling"
|
|
},
|
|
{
|
|
id: "mayim", name: "MAYIM (18 years old)", role: "Creative & Adventurous", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/portrait-of-mayim-age-18-showing-creativ-1774029291492-1dd5d042.png", imageAlt: "Portrait of MAYIM, creative and adventurous"
|
|
},
|
|
{
|
|
id: "sea", name: "SEA (17 years old)", role: "Curious & Playful", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/portrait-of-sea-age-17-showing-curious-a-1774029291102-4c70bb69.png", imageAlt: "Portrait of SEA, curious and playful"
|
|
},
|
|
{
|
|
id: "kol", name: "KOL (5 years old)", role: "Energetic & Fun", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/portrait-of-kol-age-5-the-youngest-showi-1774029292292-f71a7157.png", imageAlt: "Portrait of KOL, energetic and fun"
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "See My Family Photo", href: "#projects" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardOne
|
|
title="My Creative Projects & Achievements"
|
|
description="Each project reflects my curiosity, problem-solving skills, and commitment to creating meaningful digital experiences. From web development to interactive content, I'm constantly learning, building, and innovating."
|
|
tag="Portfolio Showcase"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "webild-tutorials", name: "Webild.io Tutorials", price: "Educational Impact", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-screenshot-showing-webild-io-tutorial--1774029292648-f6ede268.png", imageAlt: "Webild.io tutorial interface"
|
|
},
|
|
{
|
|
id: "web-projects", name: "Web Development Projects", price: "Technical Skills", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-stunning-portfolio-showcase-displaying-1774029291660-f7a5fb15.png", imageAlt: "Web development projects portfolio"
|
|
},
|
|
{
|
|
id: "creative-content", name: "Creative Digital Content", price: "Storytelling Excellence", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-creative-illustration-blending-passion-1774029292680-0a0146d8.png", imageAlt: "Creative digital content illustration"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
buttons={[{ text: "Explore Full Portfolio", href: "#content" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="content" data-section="content">
|
|
<BlogCardTwo
|
|
title="Webild.io Content Creation & Guides"
|
|
description="Through planning, filming, editing, and writing, I transform complex digital concepts into simple, interactive, fun learning experiences. My goal is to inspire beginners and make technology accessible to everyone."
|
|
tag="Educational Content"
|
|
tagIcon={BookOpen}
|
|
tagAnimation="slide-up"
|
|
blogs={[
|
|
{
|
|
id: "tutorial-1", category: "Tutorial", title: "Getting Started with Web Development", excerpt: "A comprehensive guide to understanding the fundamentals of web development, from HTML basics to creating your first interactive page with Webild.io tools.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-modern-engaging-screenshot-of-the-webi-1774029292562-46959f8a.png", imageAlt: "Web development tutorial interface", authorName: "Me", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-vibrant-portrait-of-a-young-12-year-ol-1774029292719-84d65e15.png", date: "Recent"
|
|
},
|
|
{
|
|
id: "tutorial-2", category: "Guide", title: "Creative Problem-Solving in Digital Projects", excerpt: "Discover how to approach challenges with curiosity and creativity. Learn practical strategies for debugging, brainstorming solutions, and bringing your ideas to life.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/an-inspiring-uplifting-illustration-show-1774029292892-bf3afa64.png", imageAlt: "Learning journey progress illustration", authorName: "Me", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-vibrant-portrait-of-a-young-12-year-ol-1774029292719-84d65e15.png", date: "Recent"
|
|
},
|
|
{
|
|
id: "tutorial-3", category: "Tutorial", title: "Building Interactive Content with Webild.io", excerpt: "Learn how to create engaging, interactive educational content using Webild.io. From planning your video to editing and publishing, a complete step-by-step guide.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/an-illustration-showing-the-young-creato-1774029292668-37ec17b9.png", imageAlt: "Webild collaboration illustration", authorName: "Me", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-vibrant-portrait-of-a-young-12-year-ol-1774029292719-84d65e15.png", date: "Recent"
|
|
},
|
|
{
|
|
id: "tutorial-4", category: "Inspiration", title: "Blending Technology with Cultural Heritage", excerpt: "Explore how Thai traditions inspire modern digital creation. Discover ways to incorporate cultural elements, meaningful storytelling, and authentic values into your digital projects.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/beautiful-golden-thai-buddhist-temple-wi-1774029297771-aebe7f64.png", imageAlt: "Thai temple cultural heritage", authorName: "Me", authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-vibrant-portrait-of-a-young-12-year-ol-1774029292719-84d65e15.png", date: "Recent"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Subscribe for Updates", href: "#contact" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Others Say About My Work"
|
|
description="The impact and feedback from educators, peers, and mentors inspire me to keep creating, learning, and pushing boundaries in digital content creation."
|
|
tag="Community Voices"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Alex Chen", role: "Digital Education Mentor", company: "EdTech Community", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-professional-headshot-or-portrait-of-a-1774029291822-27563bac.png", imageAlt: "Digital education mentor portrait"
|
|
},
|
|
{
|
|
id: "testimonial-2", name: "Jamie Santos", role: "Young Learner", company: "Webild.io Community", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-portrait-of-a-fellow-young-learner-or--1774029291352-11d29fee.png", imageAlt: "Young learner portrait"
|
|
},
|
|
{
|
|
id: "testimonial-3", name: "Dr. Lisa Wong", role: "Tech Professional", company: "Digital Innovation Lab", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/professional-portrait-of-a-tech-professi-1774029292104-4486d9ec.png", imageAlt: "Tech professional portrait"
|
|
},
|
|
{
|
|
id: "testimonial-4", name: "Parent", role: "Proud Family Member", company: "Home", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AY6OUkkDWDB9f8RXWuG5JkBXgc/a-parent-or-family-member-s-portrait-sho-1774029291519-36bea000.png", imageAlt: "Proud family member portrait"
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Let's Connect"
|
|
title="Get in Touch"
|
|
description="I'd love to hear from you! Whether you have questions about my projects, want to collaborate on something exciting, or just want to say hello, reach out. Let's create meaningful digital experiences together."
|
|
tagIcon={Mail}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "animated-grid" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email to stay updated"
|
|
buttonText="Connect With Me"
|
|
termsText="By connecting, you agree to hear about my latest projects, tutorials, and Webild.io content. I respect your privacy and will never share your information."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "About", items: [
|
|
{ label: "My Story", href: "#about" },
|
|
{ label: "My Family", href: "#family" },
|
|
{ label: "Bangkok Home", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Projects", items: [
|
|
{ label: "Portfolio", href: "#projects" },
|
|
{ label: "Webild.io Content", href: "#content" },
|
|
{ label: "Creative Work", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Learning Guides", href: "#content" },
|
|
{ label: "Web Development", href: "#" },
|
|
{ label: "Digital Tutorials", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Get in Touch", href: "#contact" },
|
|
{ label: "Social Media", href: "#" },
|
|
{ label: "Collaborate", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2024 Young Creator | Built with passion and curiosity from Nichada, Bangkok"
|
|
bottomRightText="Celebrating creativity, technology, and Thai heritage"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|