Award-winning-website

A Vite + React single-page website built with Tailwind CSS and GSAP animations.

Quick overview

• Framework: React 18 (Vite)
• Styling: Tailwind CSS + PostCSS + custom fonts
• Animations: GSAP (GreenSock)
• Build tool: Vite

Install & run

1. Ensure Node.js (>=16) and npm are installed.

2. Install dependencies:

   npm install

3. Run development server:

   npm run dev

4. Build for production:

   npm run build

5. Preview production build locally:

   npm run preview

6. Linting:

   npm run lint

Available npm scripts (from package.json)

• dev: vite
• build: vite build
• preview: vite preview
• lint: eslint .

Libraries used

Dependencies (runtime)

• @gsap/react ^2.1.1 — React bindings for GSAP
• gsap ^3.12.5 — animation library
• clsx ^2.1.1 — conditional classNames helper
• react ^18.3.1
• react-dom ^18.3.1
• react-icons ^5.3.0 — icon components
• react-use ^17.5.1 — useful React hooks

DevDependencies (development)

• vite ^5.4.10
• @vitejs/plugin-react ^4.3.3
• tailwindcss ^3.4.14
• postcss ^8.4.49
• autoprefixer ^10.4.20
• eslint ^9.14.0 and related plugins
• prettier ^3.3.3
• @types/react, @types/react-dom

(Exact versions in package.json)

Project structure (key files)

• index.html — app entry, mounts #root
• src/main.jsx — React bootstrap
• src/App.jsx — main layout composing components
• src/index.css — Tailwind + custom fonts + utility classes
• src/components/* — UI components (Navbar, Hero, About, Features, Story, Contact, Footer, etc.)
• vite.config.js — Vite config (uses @vitejs/plugin-react)
• tailwind.config.js — Tailwind content paths, theme extensions
• postcss.config.js — PostCSS setup (tailwindcss + autoprefixer)

Styling & fonts

• Tailwind configured to scan index.html and src/**/*.{js,ts,jsx,tsx}
• Custom fonts loaded from /fonts/*.woff2 and an external CDN for General Sans
• Many utility classes and custom components are defined in src/index.css using @layer utilities and base

Notes & tips

• package.json is the source of truth for dependencies and scripts.
• Use Node.js 16+ for compatibility with Vite 5.
• Fonts in /fonts should be present for exact typography; fallback to CDN font is included.
• .gitignore excludes node_modules and dist folders.

Contributing

Open an issue or submit a PR. Run npm run lint and ensure formatting with Prettier before committing.

---

If you want, a more detailed README can be generated that includes screenshots, a component map, or deployment steps (Netlify/Vercel).