🎓 Creatives For You — Landing Page

A responsive, animated landing page built with HTML5, Tailwind CSS, and modern frontend utilities. Designed for seamless user engagement across devices — featuring smooth hover animations, mobile-optimized navigation, mission/vision storytelling, team showcase, and dynamic feature cards.

✨ Features

• Fully Responsive Design
  Fluid layouts from mobile to 4K screens using Tailwind’s responsive breakpoints (sm, md, lg, xl).

• Modern UI Components

  • Fixed navbar with animated underline hover effects + mobile hamburger toggle
  • Hero section with bold typographic hierarchy & call-to-action button
  • “Empower” grid: Students, Universities, Businesses cards with iconography
  • Mission & Vision timeline with floating image clusters and decorative dots
  • “Discover • Interact • Engage” feature pillars with oversized decorative numbers
  • Team section with profile cards, social links, and subtle hover animations
  • Structured footer with address, navigation links, and copyright

• Performance Optimized

  • Lazy-loaded images
  • Semantic HTML5 structure for SEO & accessibility
  • Minimal JavaScript (mobile menu toggle via main.js)
  • SVG illustrations embedded inline for crisp rendering

• Visual Polish

  • Subtle backdrop blur on navbar
  • Scale-on-hover micro-interactions
  • Decorative background shapes & gradients
  • Consistent green accent color (#00FF84) for brand identity

🛠️ Technologies Used

• HTML5 – Clean, semantic markup with ARIA labels
• Tailwind CSS – Utility-first styling with custom configuration
• Vanilla JavaScript – Lightweight DOM manipulation for mobile menu
• Google Fonts (Plus Jakarta Sans) – Modern, readable typography
• Inline SVGs – Icons and decorative elements for performance & scalability
• Vite – Blazing fast development server & build tool

📱 Design Philosophy

Built with a mobile-first, content-driven approach:

• Core experience designed for touch & small viewports
• Enhanced progressively with desktop interactions (hover states, wider grids)
• Typography scales responsively without breaking layout
• Color contrast meets WCAG standards for readability
• Navigation remains accessible via keyboard & screen readers

Benefits:

• ⚡ Instant load times thanks to optimized assets & minimal JS
• 🎨 Visually cohesive brand experience across all sections
• ♿ Accessible to users of all abilities
• 🔍 SEO-friendly semantic structure
• 🧩 Easy to extend or rebrand with Tailwind’s utility system

📦 Folder Structure

creatives-for-you-landing/
┣━ public/
┃ ┗━ (images)
┣━ src/
┃ ┣━ style.css
┃ ┗━ main.js
┣━ index.html
┗━ README.md

🚀 Getting Started

1. Clone the repository

git clone https://github.com/TOMJID/c4u-landing.git
cd c4u-landing

2.Install dependencies

 npm install

3. Run in development mode

npm run dev

👨‍💻 Author

Crafted with passion by Tomjid — Developer & Design Enthusiast

Found a bug or want to improve? Fork, tinker, and send a PR!