Update src/app/rings-collection/page.tsx

src/app/about/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Diamond } from 'lucide-react';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'About Hala Diamonds',
+  description: "Learn about Hala Diamonds' commitment to craftsmanship, quality, and customer satisfaction."
+};
+
+export default function AboutUs() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about' },
+    { name: 'Contact Us', id: '/contact' },
+    { name: 'Bracelets', id: '/bracelets' },
+    { name: 'Earrings', id: '/earrings' },
+    { name: 'Necklaces', id: '/necklaces' },
+    { name: 'Rings', id: '/rings-collection' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
+      </div>
+
+      <div id="about-us" data-section="about-us">
+        <TestimonialAboutCard
+          tag="Our Story"
+          title="About Hala Diamonds"
+          description="Hala Diamonds is a family-owned business with over 50 years of experience in crafting exquisite jewelry. We are committed to ethical sourcing, unparalleled craftsmanship, and creating timeless pieces that celebrate life's most precious moments."
+          subdescription="Our team of GIA-certified gemologists and master artisans ensures every diamond is hand-selected and meticulously set, reflecting our dedication to quality and customer satisfaction."
+          icon={Diamond}
+          imageSrc="https://images.unsplash.com/photo-1621323863459-d8e23df37233?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          imageAlt="Hala Diamonds Craftsmanship"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <AnimatedAuroraBackground invertColors={false} className="-z-10" />
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            { title: 'Company', items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
+            { title: 'Support', items: [{ label: 'Contact Us', href: '/contact' }] }
+          ]}
+          bottomLeftText="© 2024 Hala Diamonds. All rights reserved."
+          bottomRightText="Privacy Policy  Terms of Service"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/bracelets/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Bracelets - Hala Diamonds',
+  description: 'Explore exquisite diamond bracelets from Hala Diamonds.'
+};
+
+export default function BraceletsPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about' },
+    { name: 'Contact Us', id: '/contact' },
+    { name: 'Bracelets', id: '/bracelets' },
+    { name: 'Earrings', id: '/earrings' },
+    { name: 'Necklaces', id: '/necklaces' },
+    { name: 'Rings', id: '/rings-collection' }
+  ];
+
+  const products = [
+    { id: '1', brand: 'Hala', name: 'Delicate Diamond Bracelet', price: '$2,500', rating: 4.8, reviewCount: '120', imageSrc: 'https://images.unsplash.com/photo-1582294132371-331215b3a628?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Delicate Diamond Bracelet' },
+    { id: '2', brand: 'Hala', name: 'Tennis Bracelet Classic', price: '$5,000', rating: 4.9, reviewCount: '95', imageSrc: 'https://images.unsplash.com/photo-1596489397395-8e7c1f8d4e1f?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Tennis Bracelet Classic' },
+    { id: '3', brand: 'Hala', name: 'Baguette Diamond Bangle', price: '$3,800', rating: 4.7, reviewCount: '78', imageSrc: 'https://images.unsplash.com/photo-1582294132371-331215b3a628?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Baguette Diamond Bangle' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardTwo
+          title="Exquisite Diamond Bracelets"
+          description="Discover our stunning collection of diamond bracelets, perfect for every occasion."
+          products={products}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <AnimatedAuroraBackground invertColors={false} className="-z-10" />
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            { title: 'Company', items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
+            { title: 'Support', items: [{ label: 'Contact Us', href: '/contact' }] }
+          ]}
+          bottomLeftText="© 2024 Hala Diamonds. All rights reserved."
+          bottomRightText="Privacy Policy  Terms of Service"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ButtonIconArrow from '@/components/button/ButtonIconArrow';
+import { Instagram } from 'lucide-react';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Contact Hala Diamonds',
+  description: "Reach out to Hala Diamonds for inquiries, custom orders, or any assistance. We're here to help you find the perfect diamond."
+};
+
+export default function ContactUs() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about' },
+    { name: 'Contact Us', id: '/contact' },
+    { name: 'Bracelets', id: '/bracelets' },
+    { name: 'Earrings', id: '/earrings' },
+    { name: 'Necklaces', id: '/necklaces' },
+    { name: 'Rings', id: '/rings-collection' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
+      </div>
+
+      <div id="contact-us" data-section="contact-us">
+        <ContactSplitForm
+          title="Get in Touch"
+          description="Reach out to us for inquiries, custom orders, or any assistance. We're here to help you find the perfect diamond."
+          inputs={[
+            { name: 'name', type: 'text', placeholder: 'Your Name', required: true },
+            { name: 'email', type: 'email', placeholder: 'Your Email', required: true }
+          ]}
+          textarea={{
+            name: 'message',
+            placeholder: 'Your Message',
+            rows: 5,
+            required: true
+          }}
+          useInvertedBackground={false}
+          imageSrc="https://images.unsplash.com/photo-1542601901-b28670725a3a?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" // Placeholder, elegant contact image
+          imageAlt="Contact Us"
+          mediaPosition="left"
+          buttonText="Send Message"
+          onSubmit={(data) => console.log('Contact form submitted:', data)}
+        />
+        <div className="flex flex-col md:flex-row gap-4 items-center justify-center py-10 px-4 max-w-7xl mx-auto">
+            <ButtonIconArrow
+                text="Chat on WhatsApp"
+                href="https://wa.me/1234567890" // Placeholder WhatsApp number
+                className="bg-green-500 hover:bg-green-600 text-white rounded-md px-6 py-3 flex items-center justify-center gap-2"
+                ariaLabel="Chat with us on WhatsApp"
+            />
+            <a
+                href="https://www.instagram.com/haladiamonds" // Placeholder Instagram username
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-2 text-foreground hover:text-primary-cta transition-colors p-3 rounded-md border border-card"
+                aria-label="Follow us on Instagram"
+            >
+                <Instagram size={24} />
+                <span>Follow us on Instagram</span>
+            </a>
+        </div>
+      </div>
+
+      <AnimatedAuroraBackground invertColors={false} className="-z-10" />
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            { title: 'Company', items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
+            { title: 'Support', items: [{ label: 'Contact Us', href: '/contact' }] }
+          ]}
+          bottomLeftText="© 2024 Hala Diamonds. All rights reserved."
+          bottomRightText="Privacy Policy  Terms of Service"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/earrings/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Earrings - Hala Diamonds',
+  description: 'Discover sparkling diamond earrings from Hala Diamonds.'
+};
+
+export default function EarringsPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about' },
+    { name: 'Contact Us', id: '/contact' },
+    { name: 'Bracelets', id: '/bracelets' },
+    { name: 'Earrings', id: '/earrings' },
+    { name: 'Necklaces', id: '/necklaces' },
+    { name: 'Rings', id: '/rings-collection' }
+  ];
+
+  const products = [
+    { id: '1', brand: 'Hala', name: 'Solitaire Stud Earrings', price: '$1,800', rating: 4.7, reviewCount: '150', imageSrc: 'https://images.unsplash.com/photo-1599643447385-a7b3c2e1f2f0?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Solitaire Stud Earrings' },
+    { id: '2', brand: 'Hala', name: 'Diamond Hoop Earrings', price: '$3,200', rating: 4.9, reviewCount: '80', imageSrc: 'https://images.unsplash.com/photo-1621323863459-d8e23df37233?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Diamond Hoop Earrings' },
+    { id: '3', brand: 'Hala', name: 'Halo Drop Earrings', price: '$2,500', rating: 4.6, reviewCount: '65', imageSrc: 'https://images.unsplash.com/photo-1599643447385-a7b3c2e1f2f0?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Halo Drop Earrings' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardTwo
+          title="Dazzling Diamond Earrings"
+          description="Find the perfect pair of diamond earrings to complement your style."
+          products={products}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <AnimatedAuroraBackground invertColors={false} className="-z-10" />
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            { title: 'Company', items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
+            { title: 'Support', items: [{ label: 'Contact Us', href: '/contact' }] }
+          ]}
+          bottomLeftText="© 2024 Hala Diamonds. All rights reserved."
+          bottomRightText="Privacy Policy  Terms of Service"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/necklaces/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import AnimatedAuroraBackground from '@/components/background/AnimatedAuroraBackground';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Necklaces - Hala Diamonds',
+  description: 'Adorn your neck with beautiful diamond necklaces from Hala Diamonds.'
+};
+
+export default function NecklacesPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about' },
+    { name: 'Contact Us', id: '/contact' },
+    { name: 'Bracelets', id: '/bracelets' },
+    { name: 'Earrings', id: '/earrings' },
+    { name: 'Necklaces', id: '/necklaces' },
+    { name: 'Rings', id: '/rings-collection' }
+  ];
+
+  const products = [
+    { id: '1', brand: 'Hala', name: 'Classic Diamond Pendant', price: '$3,500', rating: 4.9, reviewCount: '110', imageSrc: 'https://images.unsplash.com/photo-1582294132371-331215b3a628?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Classic Diamond Pendant' },
+    { id: '2', brand: 'Hala', name: 'Tennis Necklace', price: '$8,000', rating: 4.8, reviewCount: '70', imageSrc: 'https://images.unsplash.com/photo-1596489397395-8e7c1f8d4e1f?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Tennis Necklace' },
+    { id: '3', brand: 'Hala', name: 'Emerald Cut Necklace', price: '$6,000', rating: 4.7, reviewCount: '55', imageSrc: 'https://images.unsplash.com/photo-1582294132371-331215b3a628?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Emerald Cut Necklace' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardTwo
+          title="Captivating Diamond Necklaces"
+          description="Discover our breathtaking range of diamond necklaces, perfect for making a statement."
+          products={products}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <AnimatedAuroraBackground invertColors={false} className="-z-10" />
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            { title: 'Company', items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }] },
+            { title: 'Support', items: [{ label: 'Contact Us', href: '/contact' }] }
+          ]}
+          bottomLeftText="© 2024 Hala Diamonds. All rights reserved."
+          bottomRightText="Privacy Policy  Terms of Service"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -1,5 +1,67 @@
-import { redirect } from 'next/navigation';
+'use client';
 
-export default function Home() {
-  redirect('/components');
-}
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+
+export default function HomePage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about' },
+    { name: 'Contact Us', id: '/contact' },
+    { name: 'Bracelets', id: '/bracelets' },
+    { name: 'Earrings', id: '/earrings' },
+    { name: 'Necklaces', id: '/necklaces' },
+    { name: 'Rings', id: '/rings-collection' }
+  ];
+
+  const testimonials = [
+    {
+      id: '1',
+      title: "Excellent Service",      name: 'Sarah M.',
+      role: 'Satisfied Customer',
+      quote: "Hala Diamonds truly exceeded my expectations! The quality of their rings is simply breathtaking.",      imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Sarah M."
+    },
+    {
+      id: '2',
+      title: "Highly Recommended",      name: 'David L.',
+      role: 'Happy Client',
+      quote: "The team at Hala Diamonds made my engagement ring purchase an absolute joy. Highly recommended!",      imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "David L."
+    },
+    {
+      id: '3',
+      title: "Unparalleled Craftsmanship",      name: 'Emily R.',
+      role: 'Loyal Customer',
+      quote: "I've purchased multiple pieces from Hala Diamonds, and each one is a masterpiece. Their craftsmanship is unparalleled.",      imageSrc: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=2788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",      imageAlt: "Emily R."
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="aurora"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
+      </div>
+
+      <div id="reviews" data-section="reviews">
+        <TestimonialCardTen
+          title="What Our Customers Say"
+          description="Hear from our happy clients about their experience with Hala Diamonds."
+          testimonials={testimonials}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/rings-collection/[productId]/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+
+export default function ProductDetailPage({ params }: { params: { productId: string } }) {
+  const { productId } = params;
+
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about' },
+    { name: 'Contact Us', id: '/contact' },
+    { name: 'Bracelets', id: '/bracelets' },
+    { name: 'Earrings', id: '/earrings' },
+    { name: 'Necklaces', id: '/necklaces' },
+    { name: 'Rings', id: '/rings-collection' }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
+      </div>
+
+      <main className="min-h-screen p-4">
+        <h1 className="text-3xl font-bold">Product Detail for {productId}</h1>
+        <p className="text-lg mt-2">Details about the ring with ID: {productId} will be displayed here.</p>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/rings-collection/page.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+
+export default function RingsCollectionPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About Us', id: '/about' },
+    { name: 'Contact Us', id: '/contact' },
+    { name: 'Bracelets', id: '/bracelets' },
+    { name: 'Earrings', id: '/earrings' },
+    { name: 'Necklaces', id: '/necklaces' },
+    { name: 'Rings', id: '/rings-collection' }
+  ];
+
+  const products = [
+    {
+      id: 'ring-1',
+      brand: 'Hala',
+      name: 'Diamond Solitaire Ring',
+      price: '$1,200',
+      rating: 4.8,
+      reviewCount: '120',
+      imageSrc: 'https://images.unsplash.com/photo-1589717173252-09c31498b813?q=80&w=2787&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Diamond Solitaire Ring'
+    },
+    {
+      id: 'ring-2',
+      brand: 'Hala',
+      name: 'Emerald Cut Ring',
+      price: '$2,500',
+      rating: 4.9,
+      reviewCount: '90',
+      imageSrc: 'https://images.unsplash.com/photo-1549419168-ee81bf9d968b?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Emerald Cut Ring'
+    },
+    {
+      id: 'ring-3',
+      brand: 'Hala',
+      name: 'Sapphire Halo Ring',
+      price: '$1,800',
+      rating: 4.7,
+      reviewCount: '150',
+      imageSrc: 'https://images.unsplash.com/photo-1601007801865-c35d978a3f85?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Sapphire Halo Ring'
+    },
+    {
+      id: 'ring-4',
+      brand: 'Hala',
+      name: 'Rose Gold Band',
+      price: '$900',
+      rating: 4.5,
+      reviewCount: '200',
+      imageSrc: 'https://images.unsplash.com/photo-1596767705128-4f8148b11c97?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Rose Gold Band'
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="large"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen navItems={navItems} brandName="Hala Diamonds" />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardTwo
+          title="Our Exquisite Ring Collection"
+          description="Discover a stunning array of diamond rings, from classic solitaires to modern halo designs, perfect for every occasion."
+          products={products}
+          carouselMode="buttons"
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #000000;
-  --card: #1a1a1a;
+  --card: #0c0c0c;
   --foreground: #ffffff;
-  --primary-cta: #e0e0e0;
+  --primary-cta: #cee7ff;
   --primary-cta-text: #000000;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #000000;
   --secondary-cta-text: #ffffff;
-  --accent: #a0a0a0;
-  --background-accent: #707070;
+  --accent: #535353;
+  --background-accent: #CEE7FF;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);