A beautiful React clone of a luxury jewelry e-commerce website featuring elegant animations, premium design, and responsive layouts.
- Elegant Hero Section with animated typography and floating badges
- Interactive Navigation with scroll effects and mobile menu
- Product Showcase with hover animations and transitions
- Features Section with rotating circular frame animation
- Product Grid with various jewelry collections
- Collection Showcase with overlay effects
- Brand Logos with infinite scroll animation
- Design Collections with info cards
- Professional Footer with newsletter subscription
- Fully Responsive design for all devices
- Smooth Scroll Animations using Intersection Observer API
- Premium beige and cream color palette
- Elegant typography using Cormorant Garamond and Montserrat fonts
- Smooth animations and transitions throughout
- Glassmorphism effects
- Hover effects on all interactive elements
- Professional product photography integration
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository or navigate to the project directory:
cd /Users/vamshishetty/Desktop/stringtheory- Install dependencies (if not already installed):
npm install- Start the development server:
npm run dev- Open your browser and visit:
http://localhost:5173
stringtheory/
├── src/
│ ├── components/
│ │ ├── Navbar.jsx
│ │ ├── Navbar.css
│ │ ├── Hero.jsx
│ │ ├── Hero.css
│ │ ├── Features.jsx
│ │ ├── Features.css
│ │ ├── ProductGrid.jsx
│ │ ├── ProductGrid.css
│ │ ├── CollectionShowcase.jsx
│ │ ├── CollectionShowcase.css
│ │ ├── BrandLogos.jsx
│ │ ├── BrandLogos.css
│ │ ├── DesignCollections.jsx
│ │ ├── DesignCollections.css
│ │ ├── Footer.jsx
│ │ └── Footer.css
│ ├── App.jsx
│ ├── App.css
│ └── main.jsx
├── public/
│ └── images/
│ ├── hero-model.png
│ ├── features-model.png
│ ├── product-bracelet.png
│ ├── product-necklace.png
│ ├── product-brooch.png
│ └── collection-model.png
└── package.json
- Fixed position with scroll effect
- Mobile responsive menu
- Search, user, and cart icons
- Smooth hover animations
- Large hero image with elegant model
- Animated typography
- Floating "Chat with us" badge
- Sidebar product thumbnails
- Pagination controls
- Two-column layout
- Rotating circular frame animation
- Feature checklist with icons
- Call-to-action button
- 6 product cards with different layouts
- Hover effects and transitions
- Dark and light themed cards
- Product images and descriptions
- Grid layout with large featured image
- Overlay effects on hover
- Category navigation
- Infinite horizontal scroll animation
- Multiple brand names
- Hover effects
- Information grid with 4 cards
- Hover animations
- Professional model imagery
- 4-column layout
- Social media links
- Newsletter subscription
- Quick links and customer care
- React - UI library
- Vite - Build tool and dev server
- CSS3 - Styling with animations
- Intersection Observer API - Scroll animations
- Google Fonts - Cormorant Garamond & Montserrat
- Desktop: 1400px and above
- Tablet: 768px - 1400px
- Mobile: Below 768px
- Primary Background:
#f5f0e8(Beige) - Secondary Background:
#ffffff(White) - Dark Background:
#1a1a1a(Dark Gray) - Accent Gold:
#c9a961(Gold) - Text Dark:
#2d2d2d(Charcoal) - Text Light:
#666666(Gray)
- Fade in up
- Slide in left/right
- Scale in
- Float effect
- Rotate animation
- Hover transitions
- Scroll-triggered animations
This is a demonstration project created for educational purposes.
- Design inspired by modern luxury jewelry e-commerce websites
- Images generated using AI for demonstration purposes
- Built with React and modern web technologies
Developed with ❤️ using React and Vite