bender/43f558f7-3f2a-4b6c-8b89-829b1d574828
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main

Browse Source 
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-06-02 16:47:13 +00:00
parent 3642e80e58 87c1c66c02
commit 0f73e4e1b7
1 changed files with 83 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
src/app/page.tsx
View File

@@ -12,7 +12,7 @@ import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Bell, Calendar, Camera, Code, Globe, Image, Mail, Map, MessageSquare, Rocket, Settings, Signal } from "lucide-react";
import { Bell, Calendar, Camera, Code, Globe, Image, Mail, Map, MessageSquare, Rocket, Settings, Signal, GitBranch } from "lucide-react";
export default function LandingPage() {
return (
@@ -33,29 +33,17 @@ export default function LandingPage() {
<NavbarStyleApple
navItems={[
{
name: "Features",
id: "#features",
},
name: "Features", id: "#features"},
{
name: "Products",
id: "#products",
},
name: "Products", id: "#products"},
{
name: "Pricing",
id: "#pricing",
},
name: "Pricing", id: "#pricing"},
{
name: "Testimonials",
id: "#testimonials",
},
name: "Testimonials", id: "#testimonials"},
{
name: "FAQ",
id: "#faq",
},
name: "FAQ", id: "#faq"},
{
name: "Contact",
id: "#contact",
},
name: "Contact", id: "#contact"},
]}
brandName="Webuild UI"
/>
@@ -69,39 +57,25 @@ export default function LandingPage() {
tagAnimation="slide-up"
buttons={[
{
text: "Explore Components",
href: "#products",
},
text: "Explore Components", href: "#products"},
{
text: "View Demo",
href: "#",
},
text: "View Demo", href: "#"},
]}
buttonAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1028.jpg",
alt: "Sarah Johnson",
},
src: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1028.jpg", alt: "Sarah Johnson"},
{
src: "http://img.b2bpic.net/free-photo/portrait-woman-working-office-sitting-table-with-laptop-girl-programmer-coding-coworking_1258-195357.jpg",
alt: "Michael Chen",
},
src: "http://img.b2bpic.net/free-photo/portrait-woman-working-office-sitting-table-with-laptop-girl-programmer-coding-coworking_1258-195357.jpg", alt: "Michael Chen"},
{
src: "http://img.b2bpic.net/free-photo/indoor-shot-unhappy-female-student-fees-tired-studying-takes-off-glases-holds-textbook-notepad-sits-comfortably-chair-wears-casual-clothes-isolated-pink-wall_273609-55835.jpg",
alt: "Emily Rodriguez",
},
src: "http://img.b2bpic.net/free-photo/indoor-shot-unhappy-female-student-fees-tired-studying-takes-off-glases-holds-textbook-notepad-sits-comfortably-chair-wears-casual-clothes-isolated-pink-wall_273609-55835.jpg", alt: "Emily Rodriguez"},
{
src: "http://img.b2bpic.net/free-photo/amusement-browser-techie-wifi-cloud_53876-21331.jpg",
alt: "David Kim",
},
src: "http://img.b2bpic.net/free-photo/amusement-browser-techie-wifi-cloud_53876-21331.jpg", alt: "David Kim"},
{
src: "http://img.b2bpic.net/free-photo/portrait-business-executive-using-digital-tablet_1170-1828.jpg",
alt: "Portrait of business executive using digital tablet",
},
src: "http://img.b2bpic.net/free-photo/portrait-business-executive-using-digital-tablet_1170-1828.jpg", alt: "Portrait of business executive using digital tablet"},
]}
avatarText="Trusted by over 10,000 developers."
imageSrc="http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg?_wi=1"
imageSrc="http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg"
imageAlt="Web UI dashboard showing various components"
showDimOverlay={true}
showBlur={true}
@@ -114,14 +88,10 @@ export default function LandingPage() {
useInvertedBackground={false}
title="Simplify Your Development Workflow"
description={[
"Webuild UI offers a meticulously crafted set of React components designed for consistency, performance, and accessibility. Accelerate your product development with a robust foundation.",
"From atomic elements to complex patterns, our library empowers designers and developers to create stunning, production-ready interfaces without reinventing the wheel. Focus on innovation, not implementation details.",
]}
"Webuild UI offers a meticulously crafted set of React components designed for consistency, performance, and accessibility. Accelerate your product development with a robust foundation.", "From atomic elements to complex patterns, our library empowers designers and developers to create stunning, production-ready interfaces without reinventing the wheel. Focus on innovation, not implementation details."]}
buttons={[
{
text: "Learn More",
href: "#",
},
text: "Learn More", href: "#"},
]}
buttonAnimation="blur-reveal"
/>
@@ -134,90 +104,55 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
title: "Global Ready Components",
description: "Components designed with internationalization and localization in mind, ensuring your product reaches a global audience effortlessly.",
bentoComponent: "globe",
imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-analyst-monitoring-global-data-futuristic-command-center_23-2151997010.jpg",
imageAlt: "digital globe network connection",
title: "Global Ready Components", description: "Components designed with internationalization and localization in mind, ensuring your product reaches a global audience effortlessly.", bentoComponent: "globe", imageAlt: "digital globe network connection"
},
{
title: "Data-Driven Insights",
description: "Integrate powerful data visualization components to turn complex data into actionable insights.",
bentoComponent: "animated-bar-chart",
imageSrc: "http://img.b2bpic.net/free-photo/businessman-studying-infographics-performance-metrics_482257-122632.jpg?_wi=2",
imageAlt: "digital globe network connection",
title: "Data-Driven Insights", description: "Integrate powerful data visualization components to turn complex data into actionable insights.", bentoComponent: "animated-bar-chart", imageAlt: "digital globe network connection"
},
{
title: "Intuitive Mobile Experience",
description: "Deliver exceptional user experiences across all devices with our mobile-first responsive components.",
bentoComponent: "phone",
statusIcon: Signal,
title: "Intuitive Mobile Experience", description: "Deliver exceptional user experiences across all devices with our mobile-first responsive components.", bentoComponent: "phone", statusIcon: Signal,
alertIcon: Bell,
alertTitle: "New Notification",
alertMessage: "Your daily report is ready.",
apps: [
alertTitle: "New Notification", alertMessage: "Your daily report is ready.", apps: [
{
name: "Mail",
icon: Mail,
name: "Mail", icon: Mail,
},
{
name: "Calendar",
icon: Calendar,
name: "Calendar", icon: Calendar,
},
{
name: "Messages",
icon: MessageSquare,
name: "Messages", icon: MessageSquare,
},
{
name: "Photos",
icon: Image,
name: "Photos", icon: Image,
},
{
name: "Camera",
icon: Camera,
name: "Camera", icon: Camera,
},
{
name: "Settings",
icon: Settings,
name: "Settings", icon: Settings,
},
{
name: "Maps",
icon: Map,
name: "Maps", icon: Map,
},
{
name: "Browser",
icon: Globe,
name: "Browser", icon: Globe,
},
],
imageSrc: "http://img.b2bpic.net/free-photo/male-graphic-designer-using-digital-tablet_1170-1028.jpg",
imageAlt: "digital globe network connection",
imageAlt: "digital globe network connection"
},
{
title: "Seamless Development Flow",
description: "Accelerate your team's velocity with well-documented and easy-to-integrate UI components.",
bentoComponent: "3d-stack-cards",
items: [
title: "Seamless Development Flow", description: "Accelerate your team's velocity with well-documented and easy-to-integrate UI components.", bentoComponent: "3d-stack-cards", items: [
{
icon: Code,
title: "Clean Codebase",
subtitle: "Maintainable",
detail: "Modular and well-tested.",
},
title: "Clean Codebase", subtitle: "Maintainable", detail: "Modular and well-tested."},
{
icon: GitBranch,
title: "Version Control",
subtitle: "Track changes",
detail: "Integrated with Git.",
},
title: "Version Control", subtitle: "Track changes", detail: "Integrated with Git."},
{
icon: Rocket,
title: "Rapid Deployment",
subtitle: "Go live faster",
detail: "Optimized for speed.",
},
title: "Rapid Deployment", subtitle: "Go live faster", detail: "Optimized for speed."},
],
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-office-sitting-table-with-laptop-girl-programmer-coding-coworking_1258-195357.jpg",
imageAlt: "digital globe network connection",
imageAlt: "digital globe network connection"
},
]}
title="Unmatched Flexibility & Performance"
@@ -235,53 +170,17 @@ export default function LandingPage() {
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Responsive Card",
price: "$49",
variant: "Base",
imageSrc: "http://img.b2bpic.net/free-photo/web-design-online-technology-content-concept_53876-123927.jpg",
imageAlt: "Minimalist responsive UI card component",
},
id: "p1", name: "Responsive Card", price: "$49", variant: "Base", imageSrc: "http://img.b2bpic.net/free-photo/web-design-online-technology-content-concept_53876-123927.jpg", imageAlt: "Minimalist responsive UI card component"},
{
id: "p2",
name: "Dynamic Navbar",
price: "$79",
variant: "Pro",
imageSrc: "http://img.b2bpic.net/free-photo/finding-out-shortest-way-back_329181-13761.jpg",
imageAlt: "Dynamic navigation bar UI component",
},
id: "p2", name: "Dynamic Navbar", price: "$79", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/finding-out-shortest-way-back_329181-13761.jpg", imageAlt: "Dynamic navigation bar UI component"},
{
id: "p3",
name: "Validated Forms",
price: "$69",
variant: "Standard",
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-home-nursing-template-design_23-2150513580.jpg",
imageAlt: "Well-designed form input field UI component",
},
id: "p3", name: "Validated Forms", price: "$69", variant: "Standard", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-home-nursing-template-design_23-2150513580.jpg", imageAlt: "Well-designed form input field UI component"},
{
id: "p4",
name: "Engaging CTA Buttons",
price: "$39",
variant: "Essential",
imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements-collection_23-2149024130.jpg",
imageAlt: "Vibrant call-to-action (CTA) button component",
},
id: "p4", name: "Engaging CTA Buttons", price: "$39", variant: "Essential", imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-elements-collection_23-2149024130.jpg", imageAlt: "Vibrant call-to-action (CTA) button component"},
{
id: "p5",
name: "Testimonial Carousel",
price: "$59",
variant: "Plus",
imageSrc: "http://img.b2bpic.net/free-psd/flat-design-e-learning-template_23-2149699587.jpg",
imageAlt: "Responsive testimonial carousel UI component",
},
id: "p5", name: "Testimonial Carousel", price: "$59", variant: "Plus", imageSrc: "http://img.b2bpic.net/free-psd/flat-design-e-learning-template_23-2149699587.jpg", imageAlt: "Responsive testimonial carousel UI component"},
{
id: "p6",
name: "Pricing Tables",
price: "$89",
variant: "Premium",
imageSrc: "http://img.b2bpic.net/free-vector/modern-price-banners-flat-design_23-2147607001.jpg",
imageAlt: "Modern pricing table UI component",
},
id: "p6", name: "Pricing Tables", price: "$89", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-vector/modern-price-banners-flat-design_23-2147607001.jpg", imageAlt: "Modern pricing table UI component"},
]}
title="Our Component Library"
description="Explore a rich collection of production-ready UI components, each crafted with precision and designed for seamless integration into your projects."
@@ -297,62 +196,23 @@ export default function LandingPage() {
useInvertedBackground={false}
plans={[
{
id: "basic",
title: "Starter",
price: "$29",
period: "per month",
features: [
"Access to core components",
"Basic documentation",
"Community support",
"1 project license",
],
id: "basic", title: "Starter", price: "$29", period: "per month", features: [
"Access to core components", "Basic documentation", "Community support", "1 project license"],
button: {
text: "Get Started",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-photo/pair-athletic-running-shoes-line-art-color-vector_1308-186837.jpg",
imageAlt: "Starter plan icon",
},
text: "Get Started", href: "#"},
imageSrc: "http://img.b2bpic.net/free-photo/pair-athletic-running-shoes-line-art-color-vector_1308-186837.jpg", imageAlt: "Starter plan icon"},
{
id: "pro",
title: "Professional",
price: "$79",
period: "per month",
features: [
"Access to all components",
"Advanced documentation",
"Priority email support",
"5 project licenses",
"Component customization guide",
],
id: "pro", title: "Professional", price: "$79", period: "per month", features: [
"Access to all components", "Advanced documentation", "Priority email support", "5 project licenses", "Component customization guide"],
button: {
text: "Choose Pro",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-vector/cog-gear-puzzle-flat-style_78370-8284.jpg",
imageAlt: "Professional plan icon",
},
text: "Choose Pro", href: "#"},
imageSrc: "http://img.b2bpic.net/free-vector/cog-gear-puzzle-flat-style_78370-8284.jpg", imageAlt: "Professional plan icon"},
{
id: "enterprise",
title: "Enterprise",
price: "Custom",
period: "quote",
features: [
"Everything in Professional",
"Dedicated account manager",
"On-site training & support",
"Unlimited project licenses",
"SLA & uptime guarantee",
"Custom component development",
],
id: "enterprise", title: "Enterprise", price: "Custom", period: "quote", features: [
"Everything in Professional", "Dedicated account manager", "On-site training & support", "Unlimited project licenses", "SLA & uptime guarantee", "Custom component development"],
button: {
text: "Contact Sales",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-photo/international-kissing-day-celebration_23-2151185183.jpg",
imageAlt: "Enterprise plan icon",
},
text: "Contact Sales", href: "#"},
imageSrc: "http://img.b2bpic.net/free-photo/international-kissing-day-celebration_23-2151185183.jpg", imageAlt: "Enterprise plan icon"},
]}
title="Simple Pricing for Every Team"
description="Find the perfect plan that scales with your needs, from individual projects to large enterprise solutions."
@@ -368,45 +228,15 @@ export default function LandingPage() {
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah Chen",
role: "Lead Frontend Developer, Innovate Labs",
testimonial: "Webuild UI drastically cut down our development time. The components are robust, beautifully designed, and incredibly easy to integrate. A game-changer for our team!",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-engineer-using-computer-charts-design-desk-businesswoman-looking-camera-working-with-monitor-project-planning-person-with-corporate-job-company-office_482257-28209.jpg",
imageAlt: "Sarah Chen portrait",
},
id: "t1", name: "Sarah Chen", role: "Lead Frontend Developer, Innovate Labs", testimonial: "Webuild UI drastically cut down our development time. The components are robust, beautifully designed, and incredibly easy to integrate. A game-changer for our team!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-engineer-using-computer-charts-design-desk-businesswoman-looking-camera-working-with-monitor-project-planning-person-with-corporate-job-company-office_482257-28209.jpg", imageAlt: "Sarah Chen portrait"},
{
id: "t2",
name: "Alex Rodriguez",
role: "Product Manager, Apex Solutions",
testimonial: "The consistency and quality of Webuild UI components helped us ship features faster and maintain a cohesive brand identity across all our products. Highly recommend!",
imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg",
imageAlt: "Alex Rodriguez portrait",
},
id: "t2", name: "Alex Rodriguez", role: "Product Manager, Apex Solutions", testimonial: "The consistency and quality of Webuild UI components helped us ship features faster and maintain a cohesive brand identity across all our products. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg", imageAlt: "Alex Rodriguez portrait"},
{
id: "t3",
name: "Jessica Lee",
role: "CTO, GrowthTech",
testimonial: "From prototyping to production, Webuild UI is our go-to. The documentation is excellent, and the performance is top-notch. It truly empowers our developers.",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-caucasian-man-wearing-glasses-looking-camera-stretching-out-hand-towards-camera-doing-peace-sign-isolated-crimson-background-with-copy-space_141793-77253.jpg",
imageAlt: "Jessica Lee portrait",
},
id: "t3", name: "Jessica Lee", role: "CTO, GrowthTech", testimonial: "From prototyping to production, Webuild UI is our go-to. The documentation is excellent, and the performance is top-notch. It truly empowers our developers.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-handsome-caucasian-man-wearing-glasses-looking-camera-stretching-out-hand-towards-camera-doing-peace-sign-isolated-crimson-background-with-copy-space_141793-77253.jpg", imageAlt: "Jessica Lee portrait"},
{
id: "t4",
name: "David Miller",
role: "Senior UI/UX Designer, Visionary Digital",
testimonial: "As a designer, I appreciate the attention to detail and aesthetic quality. Webuild UI bridges the gap between design and development seamlessly.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg",
imageAlt: "David Miller portrait",
},
id: "t4", name: "David Miller", role: "Senior UI/UX Designer, Visionary Digital", testimonial: "As a designer, I appreciate the attention to detail and aesthetic quality. Webuild UI bridges the gap between design and development seamlessly.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-suit_23-2149705921.jpg", imageAlt: "David Miller portrait"},
{
id: "t5",
name: "Emily White",
role: "Co-founder, Startup Z",
testimonial: "Integrating Webuild UI allowed us to focus on our core product logic instead of spending countless hours on UI implementation. Essential for any startup!",
imageSrc: "http://img.b2bpic.net/free-photo/man-texting-cafe_53876-96947.jpg",
imageAlt: "Emily White portrait",
},
id: "t5", name: "Emily White", role: "Co-founder, Startup Z", testimonial: "Integrating Webuild UI allowed us to focus on our core product logic instead of spending countless hours on UI implementation. Essential for any startup!", imageSrc: "http://img.b2bpic.net/free-photo/man-texting-cafe_53876-96947.jpg", imageAlt: "Emily White portrait"},
]}
title="What Our Users Say"
description="Hear directly from developers and teams who have transformed their workflows with Webuild UI."
@@ -421,30 +251,15 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "What is Webuild UI?",
content: "Webuild UI is a comprehensive design system and component library for React, designed to help developers and designers build high-quality, responsive web interfaces faster and more efficiently.",
},
id: "q1", title: "What is Webuild UI?", content: "Webuild UI is a comprehensive design system and component library for React, designed to help developers and designers build high-quality, responsive web interfaces faster and more efficiently."},
{
id: "q2",
title: "What frameworks does it support?",
content: "Currently, Webuild UI primarily supports React, with plans to expand to other popular frontend frameworks like Vue and Angular in the near future.",
},
id: "q2", title: "What frameworks does it support?", content: "Currently, Webuild UI primarily supports React, with plans to expand to other popular frontend frameworks like Vue and Angular in the near future."},
{
id: "q3",
title: "Is Webuild UI open source?",
content: "While the core components are proprietary, we offer extensive documentation and examples openly. Some auxiliary tools and integrations may be open source.",
},
id: "q3", title: "Is Webuild UI open source?", content: "While the core components are proprietary, we offer extensive documentation and examples openly. Some auxiliary tools and integrations may be open source."},
{
id: "q4",
title: "How do I get support?",
content: "Our Professional and Enterprise plans include dedicated email support. Community support is available for all users via our forums and Discord channel.",
},
id: "q4", title: "How do I get support?", content: "Our Professional and Enterprise plans include dedicated email support. Community support is available for all users via our forums and Discord channel."},
{
id: "q5",
title: "Can I customize the components?",
content: "Absolutely! Webuild UI is designed for high customizability. You can easily theme components to match your brand's aesthetic, override styles, and extend functionality using our API.",
},
id: "q5", title: "Can I customize the components?", content: "Absolutely! Webuild UI is designed for high customizability. You can easily theme components to match your brand's aesthetic, override styles, and extend functionality using our API."},
]}
title="Frequently Asked Questions"
description="Have questions? We're here to help. Check out our most common inquiries below."
@@ -458,8 +273,7 @@ export default function LandingPage() {
<ContactSplit
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
variant: "gradient-bars"}}
tag="Stay Updated"
title="Join Our Newsletter"
description="Get exclusive updates on new components, features, and design tips directly to your inbox."
@@ -477,83 +291,49 @@ export default function LandingPage() {
<FooterBase
columns={[
{
title: "Product",
items: [
title: "Product", items: [
{
label: "Components",
href: "#products",
},
label: "Components", href: "#products"},
{
label: "Features",
href: "#features",
},
label: "Features", href: "#features"},
{
label: "Pricing",
href: "#pricing",
},
label: "Pricing", href: "#pricing"},
{
label: "Roadmap",
href: "#",
},
label: "Roadmap", href: "#"},
],
},
{
title: "Company",
items: [
title: "Company", items: [
{
label: "About Us",
href: "#about",
},
label: "About Us", href: "#about"},
{
label: "Careers",
href: "#",
},
label: "Careers", href: "#"},
{
label: "Blog",
href: "#",
},
label: "Blog", href: "#"},
{
label: "Contact",
href: "#contact",
},
label: "Contact", href: "#contact"},
],
},
{
title: "Resources",
items: [
title: "Resources", items: [
{
label: "Documentation",
href: "#",
},
label: "Documentation", href: "#"},
{
label: "Support",
href: "#faq",
},
label: "Support", href: "#faq"},
{
label: "Tutorials",
href: "#",
},
label: "Tutorials", href: "#"},
{
label: "API Reference",
href: "#",
},
label: "API Reference", href: "#"},
],
},
{
title: "Legal",
items: [
title: "Legal", items: [
{
label: "Privacy Policy",
href: "#",
},
label: "Privacy Policy", href: "#"},
{
label: "Terms of Service",
href: "#",
},
label: "Terms of Service", href: "#"},
{
label: "Cookie Policy",
href: "#",
},
label: "Cookie Policy", href: "#"},
],
},
]}