bender/d0f6900e-4ac6-412b-a3e2-ed95f088a8fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 9 commits from version_2 into main 2026-06-07 21:02:30 +00:00
Conversation 0 Commits 9 Files Changed 9 +976 -56
9 changed files with 976 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/app/about-us/page.tsx Normal file
View File

@@ -0,0 +1,67 @@
"use client";
import { ThemeProvider } from "next-themes";
import { MediaAbout } from '@/components/sections/about/MediaAbout';
import { NavbarLayoutFloatingInline } from '@/components/navbar/NavbarLayoutFloatingInline';
export default function AboutUsPage() {
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "About Us", id: "/about-us" }
]}
button={{
text: "Get Started", href: "#contact"
}}
/>
<main>
<MediaAbout
id="brand-story"
tag="Our Journey"
title="Our Brand Story: Crafting Heritage"
description="Founded on a passion for timeless design and a commitment to conscious living, Hara Minimalist Living began with a vision to create pieces that not only elevate spaces but also respect our planet. Every item tells a tale of dedication, from the initial sketch to the final touch, embodying a journey of artistry and purpose."
imageSrc="https://picsum.photos/seed/about-us-brand/1200/800"
imageAlt="A craftsman's hands working on a piece of wood, symbolizing brand heritage and quality."
useInvertedBackground={false}
/>
<MediaAbout
id="sustainability-philosophy"
tag="Eco-Conscious"
title="A Promise to the Planet: Our Sustainability Philosophy"
description="Our philosophy is rooted in harmony with nature. We believe true luxury lies in mindful consumption and production. From minimizing waste to conserving resources, we integrate eco-friendly practices at every stage, ensuring our footprint is as light as the designs we create."
imageSrc="https://picsum.photos/seed/about-us-sustainability/1200/800"
imageAlt="Green leaves and a hand gently holding a plant, representing sustainability."
useInvertedBackground={true}
/>
<MediaAbout
id="ethical-sourcing"
tag="Fair Practices"
title="Integrity in Every Thread: Ethical Sourcing"
description="We meticulously select our materials and partners, prioritizing transparency and fair practices. Our commitment to ethical sourcing means working with artisans and suppliers who uphold humane working conditions and environmentally responsible methods, ensuring every component meets our high standards of integrity."
imageSrc="https://picsum.photos/seed/about-us-ethical/1200/800"
imageAlt="Hands exchanging goods, symbolizing ethical trade and sourcing."
useInvertedBackground={false}
/>
<MediaAbout
id="quality-craftsmanship"
tag="Handcrafted"
title="The Art of Detail: Uncompromising Quality Craftsmanship"
description="Each Hara Minimalist Living piece is a testament to exceptional craftsmanship. Our skilled artisans pour their expertise into every detail, employing traditional techniques alongside innovative methods to create durable, beautiful, and lasting items. We stand for quality that endures, crafted to be cherished for generations."
imageSrc="https://picsum.photos/seed/about-us-craftsmanship/1200/800"
imageAlt="Close-up of a handcrafted item, showing fine detail and quality."
useInvertedBackground={true}
/>
</main>
</ThemeProvider>
);
}

92
src/app/cart/page.tsx Normal file
View File

@@ -0,0 +1,92 @@
"use client";
import React from "react";
import { ThemeProvider } from "next-themes";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ButtonTextStagger from '@/components/button/ButtonTextStagger/ButtonTextStagger';
import FooterMedia from '@/components/sections/footer/FooterMedia';
export default function CartPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Cart", id: "/cart" },
{ name: "Checkout", id: "/checkout" }
];
return (
<ThemeProvider
attribute="class"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarLayoutFloatingInline
navItems={navItems}
brandName="E-Commerce Store"
logoSrc="https://images.unsplash.com/photo-1698273760431-7e875a5c6891?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDJ8fHx8fHwyfHwxNjk4ODk1NjQyfA&ixlib=rb-4.0.3&q=80&w=1080"
button={{ text: "Sign Up", href: "#contact" }}
/>
<main className="min-h-screen py-16">
<div className="container mx-auto px-4 md:px-6 lg:px-8">
<h1 className="text-4xl font-bold text-center mb-8">Your Shopping Cart</h1>
<div className="bg-card p-6 rounded-lg shadow-lg">
<div className="space-y-4">
{/* Placeholder for cart items */}
<div className="flex justify-between items-center border-b pb-4">
<div className="flex items-center">
<img src="https://images.unsplash.com/photo-1542291026-79eddc979c87?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDR8fHx8fHwyfHwxNjk4ODk1NjQyfA&ixlib=rb-4.0.3&q=80&w=400" alt="Product 1" className="w-20 h-20 object-cover rounded mr-4" />
<div>
<h3 className="text-lg font-semibold">Stylish Sneaker</h3>
<p className="text-foreground/70">Quantity: 1</p>
</div>
</div>
<p className="text-lg font-semibold">$99.00</p>
</div>
<div className="flex justify-between items-center border-b pb-4">
<div className="flex items-center">
<img src="https://images.unsplash.com/photo-1571780447366-eb1082c5890e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDh8fHx8fHwyfHwxNjk4ODk1NjQyfA&ixlib=rb-4.0.3&q=80&w=400" alt="Product 2" className="w-20 h-20 object-cover rounded mr-4" />
<div>
<h3 className="text-lg font-semibold">Designer Watch</h3>
<p className="text-foreground/70">Quantity: 1</p>
</div>
</div>
<p className="text-lg font-semibold">$149.00</p>
</div>
</div>
<div className="mt-8 flex justify-between items-center border-t pt-4">
<h2 className="text-2xl font-bold">Total:</h2>
<p className="text-2xl font-bold">$248.00</p>
</div>
<div className="mt-8 text-center">
<ButtonTextStagger
text="Proceed to Checkout"
href="/checkout"
className="w-full sm:w-auto"
/>
</div>
</div>
</div>
</main>
<FooterMedia
imageSrc="https://images.unsplash.com/photo-1549490349-8643362c39ac?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDE1fHx8fHwyfHwxNjk4ODk2NDcyfA&ixlib=rb-4.0.3&q=80&w=1080"
imageAlt="Footer background"
logoText="E-Commerce Store"
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Contact", href: "#contact" }
]
}
]}
copyrightText="© 2024 E-Commerce Store. All rights reserved."
/>
</ThemeProvider>
);
}

117
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,117 @@
"use client";
import type { Metadata } from "next";
import { ThemeProvider } from "next-themes";
import { NavbarStyleCentered } from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import { ContactForm } from "@/components/form/ContactForm";
import { FaqSplitText } from "@/components/sections/faq/FaqSplitText";
import { ContactText } from "@/components/sections/contact/ContactText";
export const metadata: Metadata = {
title: "Contact Us | Webild", description: "Get in touch with Webild. Send us a message, find our phone number, email, office address, and view frequently asked questions.", keywords: ["contact", "Webild", "support", "email", "phone", "address", "FAQ"],
metadataBase: new URL("https://www.webild.com"),
alternates: {
canonical: "/contact"
},
openGraph: {
title: "Contact Us | Webild", description: "Get in touch with Webild. Send us a message, find our phone number, email, office address, and view frequently asked questions.", url: "https://www.webild.com/contact", siteName: "Webild", type: "website"
},
twitter: {
card: "summary_large_image", title: "Contact Us | Webild", description: "Get in touch with Webild. Send us a message, find our phone number, email, office address, and view frequently asked questions."
},
robots: {
index: true,
follow: true
}
};
export default function ContactPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Contact", id: "/contact" }
];
const contactInfoText = `
<h2>Reach Out to Us</h2>
<p>We're here to help! Whether you have a question about our products, need assistance, or just want to give us feedback, feel free to reach out. We're dedicated to providing the best possible service.</p>
<br/>
<h3>Contact Details</h3>
<p><strong>Phone:</strong> +1 (555) 123-4567</p>
<p><strong>Email:</strong> support@yourcompany.com</p>
<p><strong>Office Address:</strong> 123 Main Street, Suite 400, Anytown, CA 90210, USA</p>
<br/>
<p>Our team is available Monday to Friday, 9 AM - 5 PM EST.</p>
`;
const faqs = [
{
id: "faq1", title: "What are your business hours?", content: "Our customer service team is available Monday to Friday, from 9 AM to 5 PM EST. You can reach us by phone or email during these hours."
},
{
id: "faq2", title: "How can I track my order?", content: "Once your order has shipped, you will receive an email with a tracking number. You can use this number on our website's 'Track Order' page or the carrier's website."
},
{
id: "faq3", title: "What is your return policy?", content: "We offer a 30-day return policy for most items. Items must be in new, unused condition with original packaging. Please visit our Returns & Refunds page for full details."
},
{
id: "faq4", title: "Do you offer international shipping?", content: "Yes, we ship to many countries worldwide. Shipping costs and delivery times vary by destination. Please see our Shipping Information page for more details."
},
{
id: "faq5", title: "How can I change or cancel my order?", content: "If you need to change or cancel your order, please contact us as soon as possible. We will do our best to accommodate your request, but changes may not be possible if the order has already been processed or shipped."
}
];
return (
<ThemeProvider
attribute="class"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="noise"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarStyleCentered
navItems={navItems}
brandName="Webild"
logoSrc="/placeholder/logo/Webild_Logo.svg"
logoAlt="Webild Logo"
/>
<main>
<div id="contact-info" data-section="contact-info">
<ContactText
text={contactInfoText}
background={{ variant: 'plain' }}
animationType="entrance-slide"
ariaLabel="Contact Information"
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactForm
title="Send us a Message"
description="We'd love to hear from you! Fill out the form below and we'll get back to you as soon as possible."
tag="Contact Us"
buttonText="Submit Message"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Find answers to the most common questions about our services and products."
faqs={faqs}
faqsAnimation="slide-up"
textPosition="left"
useInvertedBackground={false}
/>
</div>
</main>
</ThemeProvider>
);
}

140
src/app/dashboard/page.tsx
View File

@@ -1,59 +1,107 @@
"use client";
'use client';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import Link from 'next/link';
import { ThemeProvider } from '@/components/themeProvider/ThemeProvider';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import CardStack from '@/components/cardStack/CardStack';
import { Package, Heart, Home, Settings, CreditCard, Bell, LifeBuoy } from 'lucide-react';
export default function DashboardPage() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "Blog", id: "/blog" },
{ name: "About Us", id: "/about-us" },
{ name: "Contact", id: "/contact" },
{ name: "Checkout", id: "/checkout" },
{ name: "My Account", id: "/dashboard" }
{ name: 'Home', id: '/' },
{ name: 'Dashboard', id: '/dashboard' }
];
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="mediumSizeLargeTitles"
background="noiseDiagonalGradient"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="normal"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Hara Minimalist Living"
navItems={navItems.map(item => ({...item, href: item.id}))}
logoSrc="http://img.b2bpic.net/free-photo/young-woman-showing-nature-poster_53876-95887.jpg"
logoAlt="Hara Minimalist Living Logo"
bottomLeftText="Thoughtfully Designed."
bottomRightText="Naturally Inspired."
/>
<NavbarStyleApple navItems={navItems} brandName="User Dashboard" />
<div className="container mx-auto py-12 px-4 sm:px-6 lg:px-8">
<h1 className="text-4xl font-bold mb-8 text-center">User Dashboard</h1>
<CardStack
title="Manage Your Account"
description="Access and update your personal information, orders, and preferences."
animationType="slide-up"
gridVariant="two-columns-alternating-heights"
textboxLayout="default"
useInvertedBackground={false}
>
{/* My Orders */}
<div className="p-6 bg-card rounded-lg shadow-md border border-border">
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
<Package className="h-6 w-6 text-primary-cta" /> My Orders
</h2>
<p className="text-foreground/80">View your order history, track shipments, and manage returns.</p>
<a href="/dashboard/orders" className="text-primary-cta hover:underline mt-4 block">View Orders</a>
</div>
{/* Wishlist */}
<div className="p-6 bg-card rounded-lg shadow-md border border-border">
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
<Heart className="h-6 w-6 text-primary-cta" /> Wishlist
</h2>
<p className="text-foreground/80">Browse your saved items and add them to your cart.</p>
<a href="/dashboard/wishlist" className="text-primary-cta hover:underline mt-4 block">View Wishlist</a>
</div>
{/* Saved Addresses */}
<div className="p-6 bg-card rounded-lg shadow-md border border-border">
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
<Home className="h-6 w-6 text-primary-cta" /> Saved Addresses
</h2>
<p className="text-foreground/80">Update your shipping and billing addresses for faster checkout.</p>
<a href="/dashboard/addresses" className="text-primary-cta hover:underline mt-4 block">Manage Addresses</a>
</div>
{/* Account Settings */}
<div className="p-6 bg-card rounded-lg shadow-md border border-border">
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
<Settings className="h-6 w-6 text-primary-cta" /> Account Settings
</h2>
<p className="text-foreground/80">Manage your profile, password, and personal preferences.</p>
<a href="/dashboard/settings" className="text-primary-cta hover:underline mt-4 block">Edit Settings</a>
</div>
{/* Payment Methods */}
<div className="p-6 bg-card rounded-lg shadow-md border border-border">
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
<CreditCard className="h-6 w-6 text-primary-cta" /> Payment Methods
</h2>
<p className="text-foreground/80">Add, update, or remove your payment information.</p>
<a href="/dashboard/payment" className="text-primary-cta hover:underline mt-4 block">Manage Payments</a>
</div>
{/* Notifications */}
<div className="p-6 bg-card rounded-lg shadow-md border border-border">
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
<Bell className="h-6 w-6 text-primary-cta" /> Notifications
</h2>
<p className="text-foreground/80">Configure your notification preferences for orders and updates.</p>
<a href="/dashboard/notifications" className="text-primary-cta hover:underline mt-4 block">Adjust Preferences</a>
</div>
{/* Support Tickets */}
<div className="p-6 bg-card rounded-lg shadow-md border border-border">
<h2 className="text-2xl font-semibold mb-4 flex items-center gap-2">
<LifeBuoy className="h-6 w-6 text-primary-cta" /> Support Tickets
</h2>
<p className="text-foreground/80">View your support requests and get assistance.</p>
<a href="/dashboard/support" className="text-primary-cta hover:underline mt-4 block">View Tickets</a>
</div>
</CardStack>
</div>
{/*
No sections from the plan.sections array are assigned to the /dashboard page.
The filtered sectionRegistry only contains HeroSplit and ProductCardFour, which are not suitable for a dashboard page.
Therefore, no content sections are rendered on this page based on the strict selection rules.
*/}
<main className="min-h-[calc(100vh-100px)] flex flex-col items-center justify-center p-8 text-center">
<h1 className="text-4xl font-bold mb-4">My Account Dashboard</h1>
<p className="text-lg text-foreground/70">Welcome back! Manage your orders, account settings, and more.</p>
<Link href="/shop" className="mt-8 px-6 py-3 rounded-full bg-primary-cta text-primary-cta-text hover:bg-primary-cta/90 transition-colors">
Start Shopping
</Link>
</main>
{/*
No Footer component was provided in the registry or plan.nav.registry.
Therefore, no footer is rendered on this page based on the strict selection rules.
*/}
</ThemeProvider>
);
}
}

213
src/app/page.tsx
View File

@@ -1,5 +1,212 @@
import { redirect } from 'next/navigation';
"use client";
import { ThemeProvider } from "@/components/theme-provider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Sparkles, CheckCircle } from 'lucide-react'; // Example icons
export default function Home() {
redirect('/components');
}
const navItems = [
{ name: "Home", id: "hero" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Testimonials", id: "testimonials" },
{ name: "FAQ", id: "faq" },
{ name: "Contact", id: "contact" }
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="aurora"
cardStyle="glass-elevated"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarLayoutFloatingInline
navItems={navItems}
logoSrc="/placeholder-logo.svg"
logoAlt="Company Logo"
brandName="Webild"
button={{ text: "Get Started", href: "#contact" }}
animateOnLoad={true}
/>
<main className="relative z-0">
<div id="hero" data-section="hero">
<HeroLogo
logoText="Webild"
description="Build your dream website with cutting-edge technology and stunning design. Experience the future of web development today."
buttons={[
{ text: "Learn More", href: "#features" },
{ text: "Get Started", href: "#contact" }
]}
imageSrc="https://images.unsplash.com/photo-1510511459019-5dda77245918?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDJ8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=1080"
imageAlt="Hero Image"
buttonAnimation="slide-up"
ariaLabel="Hero section with company logo and call to action"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSix
title="Unlock Powerful Features"
description="Our platform is packed with innovative tools to streamline your workflow and enhance your online presence."
tag="Key Features"
tagIcon={Sparkles}
features={[
{
title: "Intuitive Design Tools", description: "Craft beautiful and responsive layouts with our easy-to-use drag-and-drop interface.", imageSrc: "https://images.unsplash.com/photo-1549692520-acc66692997b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDV8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=400", imageAlt: "Design Tools"
},
{
title: "Seamless Integrations", description: "Connect with your favorite third-party apps and services effortlessly.", imageSrc: "https://images.unsplash.com/photo-1620281682337-ee4795325081?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDJ8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=400", imageAlt: "Integrations"
},
{
title: "Optimized Performance", description: "Enjoy lightning-fast load times and a smooth user experience across all devices.", imageSrc: "https://images.unsplash.com/photo-1550009139-4453303c2710?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDR8fHx8fHwyfHwxNzA4NjA4NzU4fA&ixlib=rb-4.0.3&q=80&w=400", imageAlt: "Performance"
}
]}
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Features section highlighting key capabilities"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
title="Simple & Transparent Pricing"
description="Choose a plan that fits your needs. No hidden fees, no surprises."
tag="Our Plans"
plans={[
{
id: "starter", tag: "Starter", tagIcon: Sparkles,
price: "$19", period: "per month", description: "Ideal for individuals and small projects.", button: { text: "Choose Starter", href: "#contact" },
featuresTitle: "Includes:", features: ["5 GB Storage", "2 User Accounts", "Basic Support"]
},
{
id: "pro", tag: "Pro", tagIcon: CheckCircle,
price: "$49", period: "per month", description: "Perfect for growing teams and businesses.", button: { text: "Choose Pro", href: "#contact" },
featuresTitle: "Includes:", features: ["50 GB Storage", "10 User Accounts", "Priority Support", "Advanced Analytics"]
},
{
id: "enterprise", tag: "Enterprise", tagIcon: Sparkles,
price: "$99", period: "per month", description: "Custom solutions for large organizations.", button: { text: "Contact Sales", href: "#contact" },
featuresTitle: "Includes:", features: ["Unlimited Storage", "Unlimited Users", "24/7 Dedicated Support", "Custom Integrations"]
}
]}
animationType="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
ariaLabel="Pricing section with different plans and features"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
title="What Our Clients Say"
description="Hear from satisfied customers who have transformed their online presence with Webild."
tag="Testimonials"
testimonials={[
{
id: "1", name: "Jane Doe", handle: "@janedoe", testimonial: "Webild has revolutionized how we manage our website. The design tools are intuitive and the performance is unmatched!", imageSrc: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEzfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400", imageAlt: "Jane Doe"
},
{
id: "2", name: "John Smith", handle: "@johnsmith", testimonial: "The support team is incredible, always responsive and helpful. Highly recommend Webild for any serious web project.", imageSrc: "https://images.unsplash.com/photo-1527980965255-d3b416303d12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEyfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400", imageAlt: "John Smith"
},
{
id: "3", name: "Emily White", handle: "@emilywhite", testimonial: "Finally, a platform that combines powerful features with an elegant user experience. Webild is a game-changer!", imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDEwfHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=400", imageAlt: "Emily White"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Testimonials section showcasing client feedback"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find quick answers to common questions about our services and platform."
tag="FAQ"
faqs={[
{
id: "q1", title: "What is Webild?", content: "Webild is a comprehensive web development platform designed to help individuals and businesses create stunning, high-performance websites with ease."
},
{
id: "q2", title: "Do I need coding knowledge?", content: "No! Our intuitive drag-and-drop interface allows you to build professional websites without writing a single line of code."
},
{
id: "q3", title: "Is customer support available?", content: "Yes, we offer dedicated customer support through various channels, including email, live chat, and a comprehensive knowledge base."
}
]}
imageSrc="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NTYwNXwwfDF8YWxsfDE1fHx8fHx8Mnx8MTcwODYwODc1OHw&ixlib=rb-4.0.3&q=80&w=1080"
imageAlt="FAQ Image"
mediaAnimation="blur-reveal"
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
ariaLabel="Frequently asked questions section with answers"
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Contact Us"
title="Ready to Start Your Project?"
description="Enter your email to get started or reach out to us directly."
tagIcon={Sparkles}
background={{ variant: 'radial-gradient' }}
inputPlaceholder="Your email address"
buttonText="Join the waitlist"
termsText="By clicking Join the waitlist you're confirming that you agree with our Terms and Conditions."
onSubmit={(email) => console.log("Submitted email:", email)}
ariaLabel="Contact section with email sign-up form"
/>
</div>
</main>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Webild"
logoSrc="/placeholder-logo.svg"
logoAlt="Company Logo"
columns={[
{
items: [
{ label: "Home", href: "#hero" },
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" }
]
},
{
items: [
{ label: "About Us", href: "#hero" }, // Using hero for about, as no dedicated about page.
{ label: "Careers", href: "#hero" }, // Using hero for careers, as no dedicated careers page.
{ label: "Blog", href: "#hero" } // Using hero for blog, as no dedicated blog page.
]
},
{
items: [
{ label: "Support", href: "#contact" },
{ label: "Privacy Policy", href: "#hero" }, // Placeholder
{ label: "Terms of Service", href: "#hero" } // Placeholder
]
}
]}
ariaLabel="Site footer with navigation and company info"
/>
</div>
</ThemeProvider>
);
}

126
src/app/product-detail/page.tsx Normal file
View File

@@ -0,0 +1,126 @@
"use client";
import { ThemeProvider } from "next-themes";
import { Sparkles, ShoppingCart, Heart, Share2, Scale } from "lucide-react"; // Example icons
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
export default function ProductDetailPage() {
const product = {
name: "Minimalist Wooden Desk", price: "$299.00", discount: "33% off", originalPrice: "$450.00", stockStatus: "In Stock", deliveryEstimate: "2-3 business days", images: [
{ src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-1.webp", alt: "Product image 1" },
{ src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-2.webp", alt: "Product image 2" },
{ src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-3.webp", alt: "Product image 3" },
{ src: "https://r2.webild.com/ecommerce/ecommerce-product-mockup-4.webp", alt: "Product image 4" }
],
description: "Experience the perfect blend of functionality and Scandinavian elegance with our Minimalist Wooden Desk. Crafted from sustainably sourced oak, this desk offers a spacious work surface and a clean, uncluttered design that enhances any modern interior. Its robust construction ensures durability, while the natural wood grain adds a touch of organic warmth to your workspace.", specifications: [
{ label: "Dimensions", value: "L 120cm x W 60cm x H 75cm" },
{ label: "Material", value: "Solid Oak, Veneer" },
{ label: "Weight", value: "25 kg" },
{ label: "Color", value: "Natural Oak" }
],
materials: "100% FSC-certified solid oak and oak veneer. Finished with a non-toxic, water-based lacquer.", sustainability: "Our desk is crafted from wood sourced from responsibly managed forests, ensuring environmental protection and social benefits. We prioritize minimal waste production and use eco-friendly packaging materials.", shippingReturns: {
shipping: "Free standard shipping on all orders over $100. Expedited shipping options available at checkout. Estimated delivery: 2-3 business days.", returns: "30-day hassle-free returns. Product must be in original condition and packaging. See full policy for details."
}
};
const navItems = [
{ name: 'Home', id: '/' },
{ name: 'Product', id: '/product-detail' }
];
return (
<ThemeProvider attribute="class" enableSystem>
<NavbarStyleApple navItems={navItems} brandName="Hara Minimalist Living" />
<main className="min-h-screen bg-background text-foreground">
<div className="container mx-auto px-4 py-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Product Gallery & Image Zoom */}
<div className="flex flex-col gap-4">
<div className="relative overflow-hidden rounded-lg shadow-lg aspect-w-16 aspect-h-9 sm:aspect-h-10 md:aspect-h-11 lg:aspect-h-12 xl:aspect-h-13 2xl:aspect-h-14">
<img
src={product.images[0].src}
alt={product.images[0].alt}
className="w-full h-full object-cover transition-transform duration-500 hover:scale-110 cursor-zoom-in"
/>
</div>
<div className="grid grid-cols-4 gap-2">
{product.images.map((image, index) => (
<img
key={index}
src={image.src}
alt={image.alt}
className="w-full h-24 object-cover rounded-md cursor-pointer border-2 border-transparent hover:border-primary-cta"
/>
))}
</div>
</div>
{/* Product Info & Actions */}
<div className="flex flex-col gap-6">
<h1 className="text-4xl font-extrabold text-foreground">{product.name}</h1>
<div className="flex items-baseline gap-2">
<span className="text-3xl font-bold text-primary-cta">{product.price}</span>
<span className="text-lg text-muted-foreground line-through">{product.originalPrice}</span>
<span className="text-lg font-semibold text-accent">{product.discount}</span>
</div>
<div className="text-md text-foreground flex items-center gap-2">
<Sparkles className="h-5 w-5 text-accent" /> {product.stockStatus}
</div>
<p className="text-sm text-muted-foreground">Delivery: {product.deliveryEstimate}</p>
{/* Action Buttons */}
<div className="flex flex-col sm:flex-row gap-4">
<button className="flex-1 px-6 py-3 bg-primary-cta text-primary-cta-foreground rounded-lg font-semibold shadow-md hover:bg-primary-cta/90 transition-colors flex items-center justify-center gap-2">
<ShoppingCart className="h-5 w-5" /> Add to Cart
</button>
<button className="flex-1 px-6 py-3 bg-foreground text-background rounded-lg font-semibold shadow-md hover:bg-foreground/90 transition-colors">
Buy Now
</button>
<button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
<Heart className="h-5 w-5" />
</button>
<button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
<Scale className="h-5 w-5" />
</button>
<button className="p-3 bg-card text-foreground rounded-lg shadow-md hover:bg-card/90 transition-colors flex items-center justify-center">
<Share2 className="h-5 w-5" />
</button>
</div>
{/* Product Details Sections */}
<div className="mt-8 space-y-6">
<div>
<h2 className="text-2xl font-bold text-foreground mb-2">Description</h2>
<p className="text-muted-foreground">{product.description}</p>
</div>
<div>
<h2 className="text-2xl font-bold text-foreground mb-2">Specifications</h2>
<ul className="list-disc list-inside text-muted-foreground space-y-1">
{product.specifications.map((spec, index) => (
<li key={index}>
<strong>{spec.label}:</strong> {spec.value}
</li>
))}
</ul>
</div>
<div>
<h2 className="text-2xl font-bold text-foreground mb-2">Materials</h2>
<p className="text-muted-foreground">{product.materials}</p>
</div>
<div>
<h2 className="text-2xl font-bold text-foreground mb-2">Sustainability</h2>
<p className="text-muted-foreground">{product.sustainability}</p>
</div>
<div>
<h2 className="text-2xl font-bold text-foreground mb-2">Shipping & Returns</h2>
<p className="text-muted-foreground mb-2"><strong>Shipping:</strong> {product.shippingReturns.shipping}</p>
<p className="text-muted-foreground"><strong>Returns:</strong> {product.shippingReturns.returns}</p>
</div>
</div>
</div>
</div>
</div>
</main>
</ThemeProvider>
);
}

190
src/app/reviews/page.tsx Normal file
View File

@@ -0,0 +1,190 @@
"use client";
import React, { useState, useMemo } from 'react';
import { ThemeProvider } from '@/components/ThemeProvider';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import Input from '@/components/form/Input';
import ButtonTextUnderline from '@/components/button/ButtonTextUnderline';
// Dummy data generation
const generateReviews = (count: number) => {
const reviews = [];
const names = ["Alice", "Bob", "Charlie", "Diana", "Eve", "Frank", "Grace", "Heidi", "Ivan", "Judy"];
const reviewTexts = [
"Absolutely love this product! It exceeded my expectations.", "Great quality and very fast shipping. Highly recommend!", "Decent product for the price. Would buy again.", "Not entirely satisfied, but it gets the job done.", "Fantastic experience from start to finish. Five stars!", "The item arrived damaged. Customer service was helpful.", "Works as advertised. No complaints here.", "A bit pricey, but the quality justifies it.", "I've been looking for something like this for ages!", "Could be better, but it's okay.", "Exceptional value and brilliant design. This product truly stands out!", "I was skeptical at first, but now I'm a believer. What an amazing item.", "The best purchase I've made this year. So glad I found it!", "Slight learning curve, but once you get it, it's incredibly powerful.", "My new go-to. It's so versatile and performs perfectly every time.", "Customer support was stellar when I had a question. Very impressed.", "Perfect for daily use, durable, and aesthetically pleasing. A solid 10/10.", "Initially had an issue, but it was resolved quickly and efficiently. Good job.", "Transforms my routine. I can't imagine going back to how things were before.", "A genuinely innovative product that solves a real problem effortlessly.", "Surprisingly robust given its compact size. It handles everything with ease.", "I've recommended this to all my friends. It's that good!", "The attention to detail is evident. Every aspect feels thoughtfully designed.", "Worth every penny. The performance is consistently high.", "Exceeded my expectations in terms of functionality and ease of use."
];
const imagePlaceholders = [
"https://api.dicebear.com/7.x/pixel-art/svg?seed=1", "https://api.dicebear.com/7.x/pixel-art/svg?seed=2", "https://api.dicebear.com/7.x/pixel-art/svg?seed=3", "https://api.dicebear.com/7.x/pixel-art/svg?seed=4", "https://api.dicebear.com/7.x/pixel-art/svg?seed=5", "https://api.dicebear.com/7.x/pixel-art/svg?seed=6", "https://api.dicebear.com/7.x/pixel-art/svg?seed=7", "https://api.dicebear.com/7.x/pixel-art/svg?seed=8", "https://api.dicebear.com/7.x/pixel-art/svg?seed=9", "https://api.dicebear.com/7.x/pixel-art/svg?seed=10"
];
for (let i = 1; i <= count; i++) {
const name = names[Math.floor(Math.random() * names.length)];
const rating = Math.floor(Math.random() * 5) + 1; // 1-5 stars
const reviewText = reviewTexts[Math.floor(Math.random() * reviewTexts.length)];
const date = new Date(Date.now() - Math.floor(Math.random() * 365 * 24 * 60 * 60 * 1000)).toISOString().split('T')[0];
const helpfulVotes = Math.floor(Math.random() * 100);
const isVerifiedPurchase = Math.random() > 0.3; // 70% verified
const imageSrc = imagePlaceholders[Math.floor(Math.random() * imagePlaceholders.length)];
reviews.push({
id: `review-${i}`,
name,
rating,
reviewText,
date,
helpfulVotes,
isVerifiedPurchase,
imageSrc,
});
}
return reviews;
};
const ALL_REVIEWS = generateReviews(350); // Generate 350 reviews
export default function ReviewsPage() {
const [searchTerm, setSearchTerm] = useState('');
const [sortCriteria, setSortCriteria] = useState('newest'); // 'newest', 'oldest', 'highestRating', 'lowestRating', 'mostHelpful'
const [reviewsPerPage, setReviewsPerPage] = useState(20); // Changed from 10 to 20 for more content per load
const [currentPage, setCurrentPage] = useState(1);
const filteredAndSortedReviews = useMemo(() => {
let reviews = [...ALL_REVIEWS];
// 1. Filter
if (searchTerm) {
reviews = reviews.filter(review =>
review.reviewText.toLowerCase().includes(searchTerm.toLowerCase()) ||
review.name.toLowerCase().includes(searchTerm.toLowerCase())
);
}
// 2. Sort
reviews.sort((a, b) => {
switch (sortCriteria) {
case 'newest':
return new Date(b.date).getTime() - new Date(a.date).getTime();
case 'oldest':
return new Date(a.date).getTime() - new Date(b.date).getTime();
case 'highestRating':
return b.rating - a.rating;
case 'lowestRating':
return a.rating - b.rating;
case 'mostHelpful':
return b.helpfulVotes - a.helpfulVotes;
default:
return 0;
}
});
return reviews;
}, [searchTerm, sortCriteria]);
const displayedReviews = useMemo(() => {
const startIndex = 0;
const endIndex = currentPage * reviewsPerPage;
return filteredAndSortedReviews.slice(startIndex, endIndex);
}, [filteredAndSortedReviews, currentPage, reviewsPerPage]);
const handleLoadMore = () => {
setCurrentPage(prevPage => prevPage + 1);
};
const hasMoreReviews = displayedReviews.length < filteredAndSortedReviews.length;
const testimonialCardData = displayedReviews.map(review => ({
id: review.id,
name: review.name,
handle: review.isVerifiedPurchase ? "Verified Purchase" : "Customer", testimonial: `${review.reviewText} (Reviewed on ${review.date}). Found helpful by ${review.helpfulVotes} people.`,
rating: review.rating,
imageSrc: review.imageSrc,
imageAlt: `${review.name}'s avatar`,
}));
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarStyleApple
navItems={[{ name: "Home", id: "/" }, { name: "Reviews", id: "/reviews" }]}
brandName="Reviews"
/>
<div className="relative isolate overflow-hidden">
<div className="mx-auto max-w-7xl px-6 lg:px-8 py-16 sm:py-24">
<div className="text-center mb-12">
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">Customer Reviews</h1>
<p className="mt-4 text-lg leading-8 text-foreground/70">
Read what our amazing customers have to say about our products.
</p>
</div>
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 mb-8">
<Input
value={searchTerm}
onChange={setSearchTerm}
placeholder="Search reviews..."
ariaLabel="Search reviews"
className="w-full sm:w-1/2"
/>
<div className="flex gap-2 w-full sm:w-auto">
<label htmlFor="sort-select" className="sr-only">Sort by</label>
<select
id="sort-select"
value={sortCriteria}
onChange={(e) => setSortCriteria(e.target.value)}
className="block w-full rounded-md border-0 bg-card/70 py-2 pl-3 pr-10 text-foreground ring-1 ring-inset ring-border focus:ring-2 focus:ring-primary-cta sm:text-sm sm:leading-6"
>
<option value="newest">Newest First</option>
<option value="oldest">Oldest First</option>
<option value="highestRating">Highest Rating</option>
<option value="lowestRating">Lowest Rating</option>
<option value="mostHelpful">Most Helpful</option>
</select>
</div>
</div>
<TestimonialCardThirteen
id="customer-reviews-section"
testimonials={testimonialCardData}
title="What our customers are saying"
description="Explore authentic feedback from real users who love our products. Your satisfaction is our priority, and we're proud of the experiences shared here."
showRating={true}
carouselMode="buttons"
uniformGridCustomHeightClasses="min-h-none"
animationType="slide-up"
tag="Customer Stories"
textboxLayout="default"
cardClassName="flex flex-col p-6 border border-border rounded-lg shadow-md bg-card transition-all duration-300 hover:shadow-lg"
contentWrapperClassName="flex flex-col h-full"
testimonialClassName="flex-grow text-foreground/80 mt-2 text-sm leading-6"
nameClassName="font-semibold text-lg"
handleClassName="text-sm text-foreground/60"
ratingClassName="flex items-center gap-1 text-primary-cta"
imageWrapperClassName="w-12 h-12 rounded-full overflow-hidden flex-shrink-0"
imageClassName="w-full h-full object-cover"
gridClassName="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
/>
{hasMoreReviews && (
<div className="text-center mt-12">
<ButtonTextUnderline
text="Load More Reviews"
onClick={handleLoadMore}
className="mt-6"
/>
</div>
)}
</div>
</div>
</ThemeProvider>
);
}

73
src/app/shop/page.tsx Normal file
View File

@@ -0,0 +1,73 @@
'use client';
import { useState } from 'react';
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
const categories = ["Living Room", "Bedroom", "Kitchen", "Workspace", "Decor"];
const productBases = {
"Living Room": ["Sofa", "Coffee Table", "Armchair", "TV Stand", "Rug", "Floor Lamp", "Bookshelf", "Console Table", "Ottoman", "Side Table", "Media Console", "Accent Chair"],
"Bedroom": ["Bed Frame", "Mattress", "Nightstand", "Dresser", "Wardrobe", "Vanity Table", "Bench", "Storage Ottoman", "Wall Mirror", "Headboard", "Chest of Drawers", "Bedside Lamp"],
"Kitchen": ["Dining Table", "Dining Chair", "Bar Stool", "Kitchen Island", "Pantry Cabinet", "Buffet Cabinet", "Baker's Rack", "Wine Cabinet", "Serving Cart", "Dishwasher", "Microwave Oven", "Cooktop"],
"Workspace": ["Office Desk", "Ergonomic Chair", "Monitor Stand", "File Cabinet", "Bookshelf", "Desk Lamp", "Whiteboard", "Printer", "Shredder", "Keyboard", "Mousepad", "Storage Bins"],
"Decor": ["Wall Art", "Vase", "Candle Holder", "Decorative Bowl", "Throw Blanket", "Accent Pillow", "Sculpture", "Planter", "Photo Frame", "Artificial Plant", "Area Rug", "Table Runner"]
};
let productIdCounter = 1;
const generatedProductsData = [];
for (let i = 0; i < 12; i++) { // 12 products per category for 60 total
for (const category of categories) {
const nameBase = productBases[category][i % productBases[category].length];
const name = `${nameBase} ${i + 1}`;
const price = (Math.random() * (1000 - 50) + 50).toFixed(2);
const rating = (Math.floor(Math.random() * (5 - 3.5 + 1) / 0.5) * 0.5 + 3.5).toFixed(1);
const reviewCount = `${Math.floor(Math.random() * 500) + 10} reviews`;
const imageSrc = `https://picsum.photos/seed/${productIdCounter * 123}/400/300`;
const imageAlt = `${name} in ${category}`;
generatedProductsData.push({
id: `prod-${productIdCounter++}`,
category: category,
name: name,
price: `$${price}`,
rating: parseFloat(rating),
reviewCount: reviewCount,
imageSrc: imageSrc,
imageAlt: imageAlt,
});
}
}
export default function ShopPage() {
const [searchValue, setSearchValue] = useState('');
const [selectedCategory, setSelectedCategory] = useState('All');
const filteredProducts = generatedProductsData.filter(product => {
const matchesSearch = product.name.toLowerCase().includes(searchValue.toLowerCase());
const matchesCategory = selectedCategory === 'All' || product.category === selectedCategory;
return matchesSearch && matchesCategory;
});
const filters = [
{
label: 'Category',
options: ['All', ...categories],
selected: selectedCategory,
onChange: (value: string) => setSelectedCategory(value),
},
];
return (
<ProductCatalog
layout="page"
products={filteredProducts}
searchValue={searchValue}
onSearchChange={setSearchValue}
searchPlaceholder="Search products..."
filters={filters}
emptyMessage="No products match your criteria."
className="py-12"
/>
);
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #F8F8F8;
--card: #FFFFFF;
--foreground: #111111;
--primary-cta: #D4AF37;
--background: #1a1a2e;
--card: #20203a;
--foreground: #e0e0e0;
--primary-cta: #8a2be2;
--primary-cta-text: #FFFFFF;
--secondary-cta: #111111;
--secondary-cta: #4a4a6b;
--secondary-cta-text: #FFFFFF;
--accent: #D4AF37;
--background-accent: #EEDD90;
--accent: #a07eff;
--background-accent: #2c2c4a;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);