✨
💎
✨
✦
⚜️
24K PURE GOLD JEWELRY TEMPLATE | 2026 EDITION

Crafted with Elegance,
Designed for Eternity.

The premier React & Tailwind CSS experience crafted exclusively for high-end gold jewelers, diamond boutiques, and luxury heritage ateliers. Showcase opulent rings, necklaces, and bespoke pieces with flawless elegance.

Explore Collection Live Demos Purchase Now
Jeweler Jeweler Jeweler Jeweler
5.0
1,200+ Luxury Ateliers
24K Pure Gold UI
Tailwind CSS & React
Luxury Gold Jewelry Showcase
Royal Heritage
24K Royal Empress Set
$12,850
100% Certified 24K Pure Hallmark
Handcrafted Luxury Diamond & Gold Finish
✨ New 2026 Collection
24K Artisanal Gold

Pure luxury jewelry styling

10+ Unique Demos

Curated inner pages & layouts

Tailwind & React

Clean, modular & modern code

Lifetime Updates

Dedicated developer support

Explore Our Platform

Preview our pages and access documentation

Home & Inner Pages

Demo's
Home page

Home

Home 2 page

Home 2

Home 3 page

Home 3

Home 4 page

Home 4

About us page

About Us

Collections page

Collections

Contact us page

Contact Us

Auth Pages

Pages
Sign in page

Sign In

Coming soon page

Coming Soon

404 page

Not Found

Quick Links
1

Introduction

🛒 License Information

Standard License – Use this item in one end product for personal or business projects and client work.

Unlimited Projects Add-on – Allows use of this item in an unlimited number of end products and client projects.

Commercial Add-on – Allows the end products to be sold or offered with subscription or paid access.

Important Note – Please ensure you select the appropriate license / add-on for your project needs. For more details on WrapMarket license terms, please visit the Official License Page.

Welcome to GoldQ. This website presents a luxury jewelry collection with elegant home layouts, curated product showcases, collections, contact, and utility pages. It is built with React 19, modern styling, and reusable UI components for a polished shopping experience.

Luxury Home Views

Elegant home layouts that showcase featured jewelry with a premium editorial feel

Curated Product Pages

Showcase rings, collections, and featured pieces with refined product presentation

Contact & Support

Clear contact and utility pages for customer support, sign-in, and browsing assistance

2

Folder Structure

goldq/
├── public/                  # Static assets
│   ├── documentation/       # Documentation site
│   └── images/              # Project images                      
├── src/
│   ├── components/          # React components organized by feature
│   │   ├── aboutus/         # About page components
│   │   ├── collection/      # Collection/product components
│   │   ├── contactus/       # Contact page components
│   │   ├── home/            # Homepage components
│   │   ├── loader/          # Loading components
│   │   └── ui/              # Reusable UI components
│   ├── context/             # React Context for state management
│   │   └── LikeContext.jsx  # Favorites/Wishlist context
│   ├── hooks/               # Custom React hooks
│   │   └── useScrollAnimation.js
│   ├── layout/              # Layout components
│   │   ├── Header.jsx
│   │   ├── Footer.jsx
│   │   └── Layout.jsx
│   ├── pages/               # Page components
│   │   ├── Home.jsx
│   │   ├── Home2.jsx
│   │   ├── Home3.jsx
│   │   ├── Home4.jsx
│   │   ├── About.jsx
│   │   ├── Collection.jsx
│   │   ├── Contact.jsx
│   │   ├── SignIn.jsx
│   │   ├── ComingSoon.jsx
│   │   └── NotFound.jsx
│   ├── router/              # Routing configuration
│   │   └── RoutesPath.jsx
│   ├── data/                # Mock data
│   │   └── mockdata.json
│   ├── lib/                 # Utility functions
│   │   └── utils.js
│   ├── App.jsx              # Root component
│   ├── main.jsx             # Entry point
│   └── index.css            # Global styles
│
├── Configuration Files:
├── vite.config.js          # Vite configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── jsconfig.json           # JavaScript configuration
├── eslint.config.js        # ESLint configuration
├── components.json         # Component library config
├── package.json            # Dependencies & scripts
├── README.md               # Main documentation
├── package-lock.json       # Dependency lock file
│
├── Other:
├── .gitignore             # Git ignore rules
└── index.html             # Main HTML entry
Key Directories:
src/pages/

10 complete pages: Home, Home2, Home3, Home4, About, Collection, Contact, SignIn, ComingSoon, NotFound

src/components/

50+ reusable components organized by feature (aboutus, collection, contactus, home, loader, ui)

src/layout/

Header, Footer, and Layout components for consistent page structure

src/context/ & hooks/

LikeContext for favorites management and useScrollAnimation hook

public/images/

All product images: avatars, categories, collections, logos, promo, and more

Documentation Files

README.md, INSTALLATION.md, CONFIGURATION.md, COMPONENTS.md, and more

3

Changelog

1.2.0 01 September 2026 - Updates
  • Responsive Improvements - Optimized layout and responsiveness across all pages for mobile, tablet, and desktop
  • Documentation Hero Section - Updated and refined the documentation hero section with improved visuals
  • Minor UI Bug Fixes - Resolved minor UI issues, styling inconsistencies, and alignment tweaks
1.0.0 25 August 2026 - Initial Release
  • Luxury Home Demos - Multiple home variants with premium hero sections and elegant product storytelling
  • Product Collection Pages - Curated jewelry displays for rings, necklaces, bracelets, and featured items
  • Contact & Utility Pages - Contact, sign-in, coming soon, and not found pages for a complete experience
  • Modern UI/UX - Built with React, responsive design, and polished shared components
  • Reusable Layout System - Consistent header, footer, and page structure across the site
4

Installation Guide

Install Dependencies
npm install
Start Development Server
npm run dev
5

Tailwind CSS Setup

GoldQ is built with Tailwind CSS v4, a utility-first CSS framework for rapidly building custom user interfaces. This template uses Tailwind CSS for all styling, providing a flexible and efficient way to customize the design.

Configuration Files

Tailwind CSS is configured through the following files:

  • tailwind.config.js - Main Tailwind configuration file with theme customization, plugins, and content paths.
  • src/index.css - Global styles with Tailwind directives and CSS variables for theming.
  • vite.config.js - Vite configuration includes Tailwind CSS Vite plugin for fast compilation.
Utility-First CSS

Use pre-defined utility classes like flex, gap-4, text-primary to build responsive designs without writing custom CSS.

Theme Customization

Customize colors, fonts, spacing, and more in tailwind.config.js to match your brand identity.

Extending Tailwind Configuration

Example: Adding a custom color to the theme

// In tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-gold': '#E6C89A',
        'luxury-dark': '#1a1a1a',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

After updating the config, restart your development server to see changes.

Common Tailwind Utilities Used
Utility Class Purpose Example
flex, gap-* Layout and spacing flex gap-4 items-center
text-*, font-* Typography text-lg font-bold text-primary
bg-*, border-* Colors and borders bg-primary border-2 border-gray-200
p-*, m-* Padding and margin p-4 m-2 mb-8
rounded-*, shadow-* Styling and effects rounded-lg shadow-md hover:shadow-lg
responsive: Responsive design md:flex-row lg:p-8
Pro Tips
  • Use @apply: Extract repeating utility combinations into custom CSS classes using @apply directive.
  • Dark Mode: Tailwind supports dark mode with dark: prefix for responsive dark themes.
  • PurgeCSS: Tailwind automatically removes unused styles in production for smaller bundle sizes.
6

Package Dependencies

Here are the key dependencies and their versions used in the GoldQ project:

Package Version Description
@fontsource-variable/geist ^5.2.8 Variable font package
@gsap/react ^2.1.2 GSAP integration for React
@react-three/fiber ^9.6.1 React renderer for Three.js
@tailwindcss/vite ^4.2.2 Tailwind Vite integration
class-variance-authority ^0.7.1 Class variants helper
clsx ^2.1.1 Conditional className utility
framer-motion ^12.38.0 Animation library for React
gsap ^3.15.0 Professional animation library
lucide-react ^1.12.0 Icon library
react ^19.2.4 Core React library
react-dom ^19.2.4 React DOM rendering
react-icons ^5.6.0 Icon set for React
react-router-dom ^7.13.2 Routing for React applications
radix-ui ^1.4.3 Accessible UI primitives
swiper ^12.1.3 Touch slider and carousel library
tailwind-merge ^3.5.0 Merge Tailwind class names safely
tailwindcss ^4.2.2 Utility-first CSS framework
three ^0.167.1 3D graphics library
tw-animate-css ^1.4.0 Tailwind animation utilities
7

File Customization

Core Pages
  • pages/Home.jsx - Main home page
  • pages/Home2.jsx - Alternate home layout
  • pages/Home3.jsx - Third home layout
  • pages/Home4.jsx - Fourth home layout
  • pages/Collection.jsx - Jewelry collection page
Layout & Components
  • layout/header.tsx - Top navigation bar
  • layout/Footer.jsx - Footer component
  • layout/footer.tsx - Footer component
  • components/ui/ - Shared UI components
Configuration Files
  • src/index.css - Global styles & theme
  • vite.config.js - Vite configuration
  • src/router/RoutesPath.jsx - Route definitions
  • src/lib/utils.js - Utility functions
8

Color & Font Customization

Color Customization

Customize your theme colors by editing CSS variables in src/index.css

Theme Colors (OKLCH Format)
// In src/index.css
:root {
  --primary: oklch(49.706% 0.24691 293.51);
  --sidebar-primary: oklch(60.779% 0.2717 319.782);
  --background: oklch(13.558% 0.02475 282.596);
  --foreground: oklch(0.984 0.003 247.858);
  --card: oklch(100% 0.00011 271.152 / 0.06);
  --border: oklch(100% 0.00011 271.152 / 0.12);
  --accent: oklch(0.279 0.041 260.031);
  --muted: oklch(0.279 0.041 260.031);
  --destructive: oklch(0.704 0.191 22.216);
}
Font Customization

GoldQ uses your project’s styling system and reusable typography. Customize fonts and spacing from the shared CSS files.

Custom Font Setup
// In src/index.css
@font-face {
body {
  font-family: var(--font-jost);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-playfair-display);
}
9

Credits

Core Technologies
Styling & UI
Images & Photography
  • Unsplash - Premium royalty-free photography
  • Pexels - High-quality stock images
  • Freepik - Vector assets and jewelry photography
Typography
10

Support

Need Help?

We offer 6 months of support for any questions or issues you may encounter.

Contact Support Visit Website
Features

Our Core Features

Discover the powerful technologies and tools that make our platform exceptional

React
React Js

Dynamic UI Library

Bootstrap
Tailwind CSS

Utility-First CSS Framework

Bootstrap
Framer Motion

Smooth UI animations

HTML 5
HTML 5

Web Structure

CSS 3
CSS 3

Modern Styling

Responsive
Responsive

Mobile Friendly

Google Fonts
Google Fonts

Web Typography

Icons
Icons

Vector Graphics

Modern Design
Modern Design

Clean Aesthetics

Easy Customizable
Easy Customizable

Flexible Components

Clean Code
Clean Code

Optimized Structure

Well Documented
Well Documented

Clear Guides

24/7 Support
24/7 Support

Always Available

Get Started with GoldQ - Luxury Jewelry Website

Purchase Now!