|
|
|
@@ -36,7 +36,8 @@ export default function LandingPage() {
|
|
|
|
{ name: "Contact", id: "contact" },
|
|
|
|
{ name: "Contact", id: "contact" },
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
button={{
|
|
|
|
button={{
|
|
|
|
text: "Start Learning", href: "contact"}}
|
|
|
|
text: "Start Learning", href: "contact"
|
|
|
|
|
|
|
|
}}
|
|
|
|
brandName="WebBuild"
|
|
|
|
brandName="WebBuild"
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@@ -64,7 +65,8 @@ export default function LandingPage() {
|
|
|
|
heading={[
|
|
|
|
heading={[
|
|
|
|
{ type: "text", content: "Building the future of" },
|
|
|
|
{ type: "text", content: "Building the future of" },
|
|
|
|
{
|
|
|
|
{
|
|
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-professional-web-designer-s-workspace--1772764140391-ab846946.png", alt: "Designer workspace"},
|
|
|
|
type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-professional-web-designer-s-workspace--1772764140391-ab846946.png", alt: "Designer workspace"
|
|
|
|
|
|
|
|
},
|
|
|
|
{ type: "text", content: "web design education" },
|
|
|
|
{ type: "text", content: "web design education" },
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
buttons={[
|
|
|
|
buttons={[
|
|
|
|
@@ -85,13 +87,17 @@ export default function LandingPage() {
|
|
|
|
tagAnimation="blur-reveal"
|
|
|
|
tagAnimation="blur-reveal"
|
|
|
|
accordionItems={[
|
|
|
|
accordionItems={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "1", title: "Responsive Design Mastery", content: "Learn mobile-first approach, flexible grids, and media queries. Master breakpoints and create layouts that work perfectly on any device from smartwatches to large displays."},
|
|
|
|
id: "1", title: "Responsive Design Mastery", content: "Learn mobile-first approach, flexible grids, and media queries. Master breakpoints and create layouts that work perfectly on any device from smartwatches to large displays."
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "2", title: "Component-Driven Development", content: "Build reusable component systems that scale. Understand design tokens, component architecture, and how to structure projects for maximum maintainability and efficiency."},
|
|
|
|
id: "2", title: "Component-Driven Development", content: "Build reusable component systems that scale. Understand design tokens, component architecture, and how to structure projects for maximum maintainability and efficiency."
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "3", title: "Performance Optimization", content: "Create blazing-fast websites. Learn image optimization, code splitting, lazy loading, and critical rendering path optimization to keep users engaged and conversion rates high."},
|
|
|
|
id: "3", title: "Performance Optimization", content: "Create blazing-fast websites. Learn image optimization, code splitting, lazy loading, and critical rendering path optimization to keep users engaged and conversion rates high."
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "4", title: "Accessibility Standards", content: "Build inclusive websites for everyone. Master WCAG guidelines, semantic HTML, ARIA attributes, and keyboard navigation to ensure your sites are usable by all users."},
|
|
|
|
id: "4", title: "Accessibility Standards", content: "Build inclusive websites for everyone. Master WCAG guidelines, semantic HTML, ARIA attributes, and keyboard navigation to ensure your sites are usable by all users."
|
|
|
|
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-vibrant-illustration-showing-responsiv-1772764141721-5666e62b.png"
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-vibrant-illustration-showing-responsiv-1772764141721-5666e62b.png"
|
|
|
|
imageAlt="Responsive design across devices"
|
|
|
|
imageAlt="Responsive design across devices"
|
|
|
|
@@ -113,13 +119,16 @@ export default function LandingPage() {
|
|
|
|
products={[
|
|
|
|
products={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "1", brand: "TechStart", name: "E-commerce Platform", price: "$450K Revenue", rating: 5,
|
|
|
|
id: "1", brand: "TechStart", name: "E-commerce Platform", price: "$450K Revenue", rating: 5,
|
|
|
|
reviewCount: "2.3k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-beautiful-modern-e-commerce-website-sh-1772764140979-a7471a78.png", imageAlt: "E-commerce platform showcase"},
|
|
|
|
reviewCount: "2.3k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-beautiful-modern-e-commerce-website-sh-1772764140979-a7471a78.png", imageAlt: "E-commerce platform showcase"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "2", brand: "CloudSync", name: "SaaS Dashboard", price: "$1.2M ARR", rating: 5,
|
|
|
|
id: "2", brand: "CloudSync", name: "SaaS Dashboard", price: "$1.2M ARR", rating: 5,
|
|
|
|
reviewCount: "1.8k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-saas-platform-landing-page-featuring-c-1772764140436-42ece65a.png", imageAlt: "SaaS platform dashboard"},
|
|
|
|
reviewCount: "1.8k", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-saas-platform-landing-page-featuring-c-1772764140436-42ece65a.png", imageAlt: "SaaS platform dashboard"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "3", brand: "CreativeStudio", name: "Agency Portfolio", price: "6 Awards Won", rating: 5,
|
|
|
|
id: "3", brand: "CreativeStudio", name: "Agency Portfolio", price: "6 Awards Won", rating: 5,
|
|
|
|
reviewCount: "892", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-creative-agency-portfolio-website-disp-1772764144245-6d4acc26.png", imageAlt: "Creative agency portfolio"},
|
|
|
|
reviewCount: "892", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/a-creative-agency-portfolio-website-disp-1772764144245-6d4acc26.png", imageAlt: "Creative agency portfolio"
|
|
|
|
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
gridVariant="three-columns-all-equal-width"
|
|
|
|
animationType="slide-up"
|
|
|
|
animationType="slide-up"
|
|
|
|
@@ -140,17 +149,23 @@ export default function LandingPage() {
|
|
|
|
textboxLayout="default"
|
|
|
|
textboxLayout="default"
|
|
|
|
testimonials={[
|
|
|
|
testimonials={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "1", name: "Sarah Chen", handle: "@sarahdesigns", testimonial: "WebBuild transformed how I approach web design. The component-driven methodology has become my foundation for every project. Simply exceptional.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-confide-1772764140708-f95e1e29.png", imageAlt: "Sarah Chen"},
|
|
|
|
id: "1", name: "Sarah Chen", handle: "@sarahdesigns", testimonial: "WebBuild transformed how I approach web design. The component-driven methodology has become my foundation for every project. Simply exceptional.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-confide-1772764140708-f95e1e29.png", imageAlt: "Sarah Chen"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "2", name: "Marcus Rodriguez", handle: "@marcuscode", testimonial: "The performance optimization course alone saved our company thousands in infrastructure costs. The education quality is outstanding and practical.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-confide-1772764141091-4d3f255f.png", imageAlt: "Marcus Rodriguez"},
|
|
|
|
id: "2", name: "Marcus Rodriguez", handle: "@marcuscode", testimonial: "The performance optimization course alone saved our company thousands in infrastructure costs. The education quality is outstanding and practical.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-confide-1772764141091-4d3f255f.png", imageAlt: "Marcus Rodriguez"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "3", name: "Emma Thompson", handle: "@emmaweb", testimonial: "Finally, a platform that bridges the gap between design and development. The accessibility curriculum opened my eyes to inclusive design principles.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-woman-w-1772764139856-fabdd20a.png", imageAlt: "Emma Thompson"},
|
|
|
|
id: "3", name: "Emma Thompson", handle: "@emmaweb", testimonial: "Finally, a platform that bridges the gap between design and development. The accessibility curriculum opened my eyes to inclusive design principles.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-woman-w-1772764139856-fabdd20a.png", imageAlt: "Emma Thompson"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "4", name: "James Liu", handle: "@jamesdevelops", testimonial: "WebBuild's real-world projects and mentorship program gave me the confidence to launch my own design studio. Incredible community support.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-man-wit-1772764141745-b3ae71c9.png", imageAlt: "James Liu"},
|
|
|
|
id: "4", name: "James Liu", handle: "@jamesdevelops", testimonial: "WebBuild's real-world projects and mentorship program gave me the confidence to launch my own design studio. Incredible community support.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-man-wit-1772764141745-b3ae71c9.png", imageAlt: "James Liu"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "5", name: "Alex Patel", handle: "@alexfrontendr", testimonial: "The component library courses helped me standardize our design system at work. Team collaboration improved dramatically. Best investment I made.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-woman-w-1772764140174-cdab6212.png", imageAlt: "Alex Patel"},
|
|
|
|
id: "5", name: "Alex Patel", handle: "@alexfrontendr", testimonial: "The component library courses helped me standardize our design system at work. Team collaboration improved dramatically. Best investment I made.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-woman-w-1772764140174-cdab6212.png", imageAlt: "Alex Patel"
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "6", name: "Jessica Kim", handle: "@jessicaui", testimonial: "From beginner to freelancer in 6 months. The structured curriculum and hands-on projects gave me everything I needed to succeed in this industry.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-man-wit-1772764139809-c2c14f9b.png", imageAlt: "Jessica Kim"},
|
|
|
|
id: "6", name: "Jessica Kim", handle: "@jessicaui", testimonial: "From beginner to freelancer in 6 months. The structured curriculum and hands-on projects gave me everything I needed to succeed in this industry.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AYKTdgPKVar312MeWCA0usfjJ7/professional-headshot-photo-of-a-man-wit-1772764139809-c2c14f9b.png", imageAlt: "Jessica Kim"
|
|
|
|
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
animationType="slide-up"
|
|
|
|
animationType="slide-up"
|
|
|
|
useInvertedBackground={true}
|
|
|
|
useInvertedBackground={true}
|
|
|
|
@@ -174,7 +189,8 @@ export default function LandingPage() {
|
|
|
|
{ text: "Learn More", href: "#" },
|
|
|
|
{ text: "Learn More", href: "#" },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
features: [
|
|
|
|
features: [
|
|
|
|
"Access to 20+ courses", "Community forum access", "Project templates", "Email support"],
|
|
|
|
"Access to 20+ courses", "Community forum access", "Project templates", "Email support"
|
|
|
|
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "2", badge: "Professional", badgeIcon: Sparkles,
|
|
|
|
id: "2", badge: "Professional", badgeIcon: Sparkles,
|
|
|
|
@@ -183,7 +199,8 @@ export default function LandingPage() {
|
|
|
|
{ text: "Compare Plans", href: "#" },
|
|
|
|
{ text: "Compare Plans", href: "#" },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
features: [
|
|
|
|
features: [
|
|
|
|
"All Starter features", "100+ advanced courses", "Live mentorship sessions", "Priority email support", "Project code reviews"],
|
|
|
|
"All Starter features", "100+ advanced courses", "Live mentorship sessions", "Priority email support", "Project code reviews"
|
|
|
|
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "3", badge: "Team", badgeIcon: Award,
|
|
|
|
id: "3", badge: "Team", badgeIcon: Award,
|
|
|
|
@@ -192,7 +209,8 @@ export default function LandingPage() {
|
|
|
|
{ text: "Schedule Demo", href: "#" },
|
|
|
|
{ text: "Schedule Demo", href: "#" },
|
|
|
|
],
|
|
|
|
],
|
|
|
|
features: [
|
|
|
|
features: [
|
|
|
|
"All Professional features", "Team workspace", "Custom curriculum", "Dedicated support", "Team analytics dashboard"],
|
|
|
|
"All Professional features", "Team workspace", "Custom curriculum", "Dedicated support", "Team analytics dashboard"
|
|
|
|
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
animationType="blur-reveal"
|
|
|
|
animationType="blur-reveal"
|
|
|
|
@@ -216,7 +234,7 @@ export default function LandingPage() {
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
mediaPosition="right"
|
|
|
|
mediaPosition="right"
|
|
|
|
inputPlaceholder="your@email.com"
|
|
|
|
inputPlaceholder="your@email.com"
|
|
|
|
buttonText="Subscribe"
|
|
|
|
buttonText="Get Free Resources"
|
|
|
|
termsText="We respect your inbox. Unsubscribe anytime. No spam, ever."
|
|
|
|
termsText="We respect your inbox. Unsubscribe anytime. No spam, ever."
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
