diff --git a/src/app/page.tsx b/src/app/page.tsx index f0da1aa..b4b106a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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() { @@ -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() {