RailDevHub Landing Page

A modern, single-page landing website for a railway technology company built with React (Vite) and Tailwind CSS.

🚀 Features

• Modern Design: Dark theme with vibrant accent colors (blue, cyan, teal, orange)
• Fully Responsive: Mobile-first design that works on all devices
• Smooth Animations: Engaging hover effects and transitions
• Component-Based: Clean, modular React components
• Performance Optimized: Built with Vite for lightning-fast development and builds

📦 Tech Stack

• React 18 - UI library
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• Google Fonts (Inter) - Modern typography

🛠️ Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation Steps

1. Install Dependencies

   npm install

2. Start Development Server

   npm run dev

   The site will be available at http://localhost:5173

3. Build for Production

   npm run build

4. Preview Production Build

   npm run preview

📁 Project Structure

raildevhub-landing/
├── src/
│   ├── components/
│   │   ├── Header.jsx        # Navigation bar with logo and menu
│   │   ├── Hero.jsx          # Hero section with headline and CTAs
│   │   ├── Values.jsx        # Core values section with cards
│   │   ├── InnovationLab.jsx # Innovation projects showcase
│   │   ├── TechStack.jsx     # Technology stack display
│   │   └── Footer.jsx        # Footer with links and contact
│   ├── App.jsx               # Main app component
│   ├── main.jsx              # React entry point
│   └── index.css             # Global styles and Tailwind imports
├── index.html                # HTML template
├── tailwind.config.js        # Tailwind configuration
├── vite.config.js            # Vite configuration
└── package.json              # Project dependencies

🎨 Design System

Colors

• Background: Gray-900, Blue-950 (dark theme)
• Accents:
  • Primary Blue: #3b82f6 to #06b6d4
  • Orange: #f97316
  • Teal: #14b8a6
  • Cyan: #06b6d4

Typography

• Font Family: Inter (Google Fonts)
• Headings: Bold, large sizes (text-4xl to text-7xl)
• Body: Regular weight, comfortable reading size

Components

Header

• Fixed navigation bar with scroll effect
• Responsive mobile menu
• Smooth hover animations

Hero

• Full-screen hero section
• Animated background gradients
• Two prominent CTA buttons
• Statistics display

Values

• 4-column grid (responsive)
• Icon-based cards
• Hover effects with gradient borders

Innovation Lab

• Project cards with progress bars
• Technology badges
• Status indicators

Tech Stack

• Categorized technology display
• Icon-based tech items
• Hover animations

Footer

• Multi-column layout
• Social media links
• Contact information
• Legal links

🚀 Customization

Changing Colors

Edit tailwind.config.js:

theme: {
  extend: {
    colors: {
      primary: { /* your colors */ },
      accent: { /* your accent colors */ }
    }
  }
}

Updating Content

Each component is self-contained. Update the content directly in the component files:

• Header.jsx - Navigation links
• Hero.jsx - Headline and description
• Values.jsx - Core values content
• InnovationLab.jsx - Project cards
• TechStack.jsx - Technologies list
• Footer.jsx - Footer links and contact info

📱 Responsive Breakpoints

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

🎯 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

This project is created for educational purposes.

🤝 Contributing

Feel free to customize and extend this template for your own projects!

---

Built with ❤️ using React, Vite, and Tailwind CSS