Merge version_2 into main #4
@@ -1,67 +1,52 @@
|
||||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { MediaAbout } from '@/components/sections/about/MediaAbout';
|
||||
import { NavbarLayoutFloatingInline } from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function AboutUsPage() {
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About Us', id: '/about-us' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Reviews', id: '/reviews' },
|
||||
{ name: 'Dashboard', id: '/dashboard' },
|
||||
{ name: 'Product Detail', id: '/product-detail' }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About Us", id: "/about-us" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get Started", href: "#contact"
|
||||
}}
|
||||
/>
|
||||
<main>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="My Website"
|
||||
logoSrc="/placeholder-logo.svg"
|
||||
logoAlt="Company Logo"
|
||||
/>
|
||||
</div>
|
||||
<div id="about-us-section" data-section="about-us">
|
||||
<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."
|
||||
title="About Our Company"
|
||||
description="We are a company dedicated to providing excellent services and products."
|
||||
useInvertedBackground={false}
|
||||
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="About Us Image"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,92 +1,45 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ButtonTextStagger from '@/components/button/ButtonTextStagger/ButtonTextStagger';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function CartPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" }
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About Us', id: '/about-us' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Reviews', id: '/reviews' },
|
||||
{ name: 'Dashboard', id: '/dashboard' },
|
||||
{ name: 'Product Detail', id: '/product-detail' }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<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."
|
||||
/>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="My Website"
|
||||
logoSrc="/placeholder-logo.svg"
|
||||
logoAlt="Company Logo"
|
||||
/>
|
||||
</div>
|
||||
<div className="container mx-auto py-12 px-4">
|
||||
<h1 className="text-3xl font-bold mb-6">Your Shopping Cart</h1>
|
||||
<p>Your cart is currently empty.</p>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,117 +1,73 @@
|
||||
"use client";
|
||||
'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
|
||||
}
|
||||
};
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
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';
|
||||
import Link from 'next/link';
|
||||
|
||||
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."
|
||||
}
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About Us', id: '/about-us' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Reviews', id: '/reviews' },
|
||||
{ name: 'Dashboard', id: '/dashboard' },
|
||||
{ name: 'Product Detail', id: '/product-detail' }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="solid"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<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>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
brandName="My Website"
|
||||
logoSrc="/placeholder-logo.svg"
|
||||
logoAlt="Company Logo"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact-form" data-section="contact-form">
|
||||
<ContactForm
|
||||
title="Get in touch"
|
||||
description="Fill out the form below to contact us."
|
||||
onSubmit={(data) => console.log(data)}
|
||||
/>
|
||||
</div>
|
||||
<div id="faq-section" data-section="faq-section">
|
||||
<FaqSplitText
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions."
|
||||
faqs={[
|
||||
{ id: 'q1', title: 'Question 1', content: 'Answer 1' },
|
||||
{ id: 'q2', title: 'Question 2', content: 'Answer 2' }
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact-text-section" data-section="contact-text-section">
|
||||
<ContactText
|
||||
tag="Contact Info"
|
||||
title="Our Location"
|
||||
description="Visit us at our office or call us."
|
||||
background={{ variant: 'plain' }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,7 +9,12 @@ import { Package, Heart, Home, Settings, CreditCard, Bell, LifeBuoy } from 'luci
|
||||
export default function DashboardPage() {
|
||||
const navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'Dashboard', id: '/dashboard' }
|
||||
{ name: 'Dashboard', id: '/dashboard' },
|
||||
{ name: 'About Us', id: '/about-us' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Reviews', id: '/reviews' },
|
||||
{ name: 'Product Detail', id: '/product-detail' }
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -25,7 +30,9 @@ export default function DashboardPage() {
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<NavbarStyleApple navItems={navItems} brandName="User Dashboard" />
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="User Dashboard" />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -1,189 +1,75 @@
|
||||
"use client";
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { ThemeProvider } from '@/components/ThemeProvider';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
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
|
||||
import Link from 'next/link';
|
||||
|
||||
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 navItems = [
|
||||
{ name: 'Home', id: '/' },
|
||||
{ name: 'About Us', id: '/about-us' },
|
||||
{ name: 'Cart', id: '/cart' },
|
||||
{ name: 'Contact', id: '/contact' },
|
||||
{ name: 'Reviews', id: '/reviews' },
|
||||
{ name: 'Dashboard', id: '/dashboard' },
|
||||
{ name: 'Product Detail', id: '/product-detail' }
|
||||
];
|
||||
|
||||
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`,
|
||||
}));
|
||||
const testimonialsData = [
|
||||
{
|
||||
id: "1", name: "Alice Johnson", handle: "@alicej", testimonial: "This product changed my life! Absolutely fantastic.", rating: 5,
|
||||
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: "Alice Johnson"},
|
||||
{
|
||||
id: "2", name: "Bob Williams", handle: "@bobw", testimonial: "Great service and quality. Highly recommend!", rating: 4,
|
||||
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: "Bob Williams"},
|
||||
{
|
||||
id: "3", name: "Charlie Brown", handle: "@charlieb", testimonial: "The customer support is excellent and the product exceeds expectations.", rating: 5,
|
||||
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: "Charlie Brown"}
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<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 id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={navItems}
|
||||
brandName="My Website"
|
||||
logoSrc="/placeholder-logo.svg"
|
||||
logoAlt="Company Logo"
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews-section" data-section="reviews">
|
||||
<TestimonialCardThirteen
|
||||
testimonials={testimonialsData.map(t => ({
|
||||
id: t.id,
|
||||
name: t.name,
|
||||
handle: t.handle,
|
||||
testimonial: t.testimonial,
|
||||
rating: t.rating,
|
||||
imageSrc: t.imageSrc,
|
||||
imageAlt: t.imageAlt
|
||||
}))}
|
||||
title="What Our Customers Say"
|
||||
description="Read genuine feedback from our happy clients."
|
||||
showRating={true}
|
||||
carouselMode="buttons"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
ariaLabel="Customer reviews and testimonials"
|
||||
gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user