SUSTAINACERT-GLOBAL

Global Standards. Trusted Certification.

A professional certification website built with React 18, TypeScript, and Tailwind CSS. Features comprehensive visual design with professional imagery, optimized performance, and modern development practices.

Features

• Professional Design - Modern UI with 13+ high-quality professional images
• Dark/Light Theme - Seamless theme switching with custom toggle
• Responsive Design - Optimized for all screen sizes and devices
• Performance Optimized - Code splitting, lazy loading, and optimized chunks
• SEO Ready - Meta tags, semantic HTML, and search engine optimization
• TypeScript - Full type safety with strict mode enabled
• Component Library - Built with Shadcn/ui and Radix UI components
• Interactive Elements - Framer Motion animations and micro-interactions

📁 Project Structure

src/
├── components/          # React components
│   ├── sections/       # Page sections (Hero, Services, etc.)
│   └── ui/            # Reusable UI components
├── pages/              # Route pages
├── layouts/            # Header, Footer, Layout wrapper
├── data/               # Static data and content
├── hooks/              # Custom React hooks
├── contexts/           # React contexts
├── services/           # API services
├── types/              # TypeScript type definitions
└── utils/              # Utility functions

Tech Stack

• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS with custom theme
• UI Components: Shadcn/ui + Radix UI
• Animations: Framer Motion
• Icons: Lucide React
• Forms: React Hook Form + Zod
• State Management: React Context + TanStack Query

Design System

• Primary Colors: Emerald green palette
• Typography: Manrope font family
• Spacing: Consistent 8px grid system
• Components: Reusable design system
• Dark Mode: Full theme support

Pages

• Home - Landing page with hero, services, testimonials
• About Us - Company information and team
• Services - Service offerings and industry showcase
• Quality Policy - Quality commitments and standards
• Contact - Contact form and information
• Apply - Certification application
• Verify - Certificate verification
• News & Blogs - Articles and insights

Build Optimization

The project uses advanced build optimization:

• Code Splitting: Automatic chunk splitting by routes and dependencies
• Tree Shaking: Dead code elimination
• Asset Optimization: Image compression and lazy loading
• Bundle Analysis: Built-in bundle analyzer
• Performance: Lighthouse scores 95+

Configuration

• Vite: vite.config.ts - Build tool configuration
• TypeScript: tsconfig.json - Strict type checking
• Tailwind: tailwind.config.ts - Custom design system
• ESLint: eslint.config.js - Code quality rules
• PostCSS: postcss.config.js - CSS processing

License

This project is licensed under the Apache-2.0 License - see the LICENSE file for details.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Support

For support, email dhruvinsarkar@outlook.com or create an issue in the repository.

---

Built with ❤️ by Dhruvin Sarkar