Nexus Design - Modern Landing Page

A responsive landing page showcasing modern design principles with Tailwind CSS, featuring a mobile-friendly navigation system and smooth animations.

Features

• Responsive Design: Fully optimized for mobile, tablet, and desktop
• Modern UI: Clean layout with attention to typography and spacing
• Interactive Elements:
  • Smooth scrolling navigation
  • Animated mobile menu
  • Scroll-triggered animations
• Performance Optimized:
  • Preloaded critical resources
  • Lazy-loaded images
  • Minimal JavaScript

Technologies Used

• Tailwind CSS - Utility-first CSS framework
• Intersection Observer API - For scroll animations
• Google Fonts - Using Inter and Space Grotesk
• SVG - For all icons and illustrations

File Structure

nexus-design/ ├── index.html # Main HTML file ├── styles/ │ └── main.css # Custom styles ├── scripts/ │ ├── main.js # Core functionality ├── images/ # All visual assets │ ├── icons/ # SVG icons │ ├── hero/ # Hero images │ └── showcase/ # Project showcase images

Installation

1. Clone the repository: git clone https://github.com/Horizon-hover/single-landing-page-tailwind_2.git

Install dependencies:

This current setup works without npm – it’s just HTML/CSS/JS.

npm is optional unless you need:

• Tailwind customization

• Advanced optimizations

• A dev server with hot-reloading

In which case:

Only run these if you need to modify Tailwind:

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

npm run build # Generates optimized CSS

Customization Colors Edit the Tailwind config in index.html:

tailwind.config = { theme: { extend: { colors: { primary: '#6D28D9', // Purple secondary: '#059669', // Emerald accent: '#EA580C' // Orange } } } } Navigation Update menu items in both sections:

Desktop:

Mobile:

Run HTML

Best Practices Implemented ✅ Semantic HTML5

✅ Accessible navigation (ARIA labels)

✅ Responsive images (srcset)

✅ CSS transitions for smooth animations

✅ JavaScript event delegation

✅ Mobile-first approach

License MIT License - See LICENSE for details.