This is a premium mineral and crystal website built with Next.js, Tailwind CSS, and Framer Motion. The design focuses on showcasing the beauty of minerals while providing an exceptional user experience.
- Typography Scale: Implemented a comprehensive typography system with serif fonts for headings and improved readability
- Color System: Enhanced color palette with amber accents, stone gradients, and better contrast ratios
- Spacing System: Consistent spacing using Tailwind's spacing scale (py-32, gap-16, etc.)
- Framer Motion: Smooth scroll-triggered animations with staggered delays
- Hover Effects: Enhanced hover states with scale transforms, shadow changes, and color transitions
- Loading States: Progressive reveal animations for better perceived performance
- Glassmorphism: Backdrop blur effects and semi-transparent backgrounds
- Gradient Backgrounds: Subtle gradients and background patterns for visual depth
- Rounded Corners: Consistent use of rounded-2xl for modern, friendly appearance
- Shadow System: Layered shadows with hover enhancements
- Mobile-First: Optimized for all screen sizes with responsive grids
- Touch-Friendly: Appropriate touch targets and mobile navigation
- Flexible Layouts: Adaptive grid systems that work across devices
- Interactive Elements: Hover states, focus indicators, and smooth transitions
- Visual Feedback: Loading states, hover animations, and micro-interactions
- Accessibility: Proper contrast ratios, focus management, and semantic HTML
- Current:
/images/hero-crystal.jpg- High-quality crystal formation - Recommendation: ✅ Excellent - Shows stunning mineral beauty
- Current:
/images/geologist.jpg- Professional geologist examining specimens - Recommendation: ✅ Good - Professional and relevant
- Current:
/images/mining-innovation.jpg- Modern mining technology - Recommendation: ✅ Good - Shows technological advancement
Current images need enhancement:
/images/minerals/amethyst.jpg- Beautiful purple crystals/images/minerals/fluorite.jpg- Geometric crystal structure/images/minerals/labradorite.jpg- Iridescent feldspar
/images/minerals/rose-quartz.jpg- Replace with high-quality rose quartz cluster/images/minerals/green-fluorite.jpg- Replace with vibrant green fluorite specimen/images/minerals/spectrolite.jpg- Replace with premium spectrolite showing iridescence
- Resolution: Minimum 1200x800px, preferably 1920x1080px
- Format: WebP with JPEG fallback for compatibility
- Quality: High-quality professional photography
- Style: Clean backgrounds, good lighting, showing crystal details
- File Size: Optimized for web (under 500KB per image)
- Next.js Image Component: Automatic optimization and lazy loading
- Responsive Images: Proper sizing for different screen sizes
- WebP Support: Modern image formats for better compression
- GPU Acceleration: Transform and opacity animations
- Reduced Motion: Respects user preferences
- Efficient Transitions: Optimized animation durations
- Full-screen immersive experience
- Gradient overlays for text readability
- Smooth scroll-to-section functionality
- Animated elements with staggered timing
- Feature cards with hover effects
- Icon integration with Lucide React
- Progressive reveal animations
- Interactive elements
- Technology showcase with floating badges
- Enhanced card designs with statistics
- Background decorative elements
- Improved visual hierarchy
- Environmental commitment display
- Interactive feature cards
- Floating sustainability badges
- Enhanced imagery integration
- Premium product cards
- Rarity and origin badges
- Hover effects and animations
- Professional presentation
- Enhanced form design
- Better visual feedback
- Improved contact information display
- Social media integration
- Next.js 15: Latest React framework with App Router
- Tailwind CSS: Utility-first CSS framework
- Framer Motion: Animation library for React
- Lucide React: Icon library
- Radix UI: Accessible component primitives
app/
├── page.tsx # Main homepage
├── layout.tsx # Root layout
└── globals.css # Global styles
components/
├── ui/ # UI components
└── theme-provider.tsx # Theme management
public/
└── images/
├── minerals/ # Mineral specimens
├── hero-crystal.jpg
├── geologist.jpg
└── mining-innovation.jpg
- Primary: Amber (#f59e0b) - Warm, inviting
- Secondary: Stone (#78716c) - Natural, earthy
- Accent: Blue/Cyan - Technology and innovation
- Background: Stone gradients with subtle patterns
- Headings: Serif font for elegance and authority
- Body: Sans-serif for readability
- Hierarchy: Clear size progression (4xl → 6xl)
- Section Padding: py-32 (128px) for breathing room
- Grid Gaps: gap-16 (64px) for content separation
- Component Spacing: Consistent internal spacing
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px
- Large Desktop: > 1280px
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Lint code
npm run lint- Dark Mode Toggle: Theme switching capability
- Advanced Filtering: Mineral search and filtering
- 3D Product Views: Interactive mineral specimens
- AR Integration: Virtual try-on for mineral specimens
- Advanced Animations: More sophisticated motion design
- Performance Monitoring: Core Web Vitals optimization
- High Priority: Replace placeholder mineral images
- Medium Priority: Add more mineral variety
- Low Priority: Background and decorative images
For questions about the design system or implementation:
- Design: UI/UX best practices and visual improvements
- Development: Technical implementation and optimization
- Content: Mineral information and image recommendations
Built with ❤️ for Earth's natural treasures