A high-end, dark-themed logistics landing page built with React, TypeScript, and Tailwind CSS v4. Features immersive video backgrounds, scroll-triggered animations, glassmorphism effects, and a cohesive brand identity with clipped-corner geometric buttons.
- Full-viewport hero section with auto-looping muted video background
- Smooth scroll navigation — all nav links, buttons, and CTAs scroll to their target sections
- Scroll-triggered animations — fade-in-up, fade-in-left/right, scale-in, and count-up effects powered by Intersection Observer
- Glassmorphism consultation card — backdrop blur, saturation, semi-transparent borders, and inner glow
- Clipped-corner buttons — consistent geometric shape across all CTAs using CSS
clip-pathpolygon - Responsive design — mobile-first with
lg:breakpoint at 1024px - Multiple video backgrounds — unique videos for Hero, About, Stats, CTA, and Footer sections
- Scroll-to-top button — fixed bottom-right arrow with hover glow effect
- Contact form — glassmorphism-styled form with dark theme inputs
- Rubik font — loaded from Google Fonts for consistent brand typography
| Section | Description |
|---|---|
| Hero | Full-screen video background, headline, Get Started CTA, glassmorphism consultation card |
| About | Two-column layout with video and brand story + feature icons |
| Services | Four service cards (Road, Air, Ocean, Warehousing) with hover effects |
| Stats | Video background with animated counters (50+ countries, 12K deliveries, 99.8% on-time, 24/7 support) |
| Testimonials | Three glassmorphism client testimonial cards with star ratings |
| CTA | Video background with "Ready to Move?" call-to-action and pulsing glow button |
| Contact | Contact info + glassmorphism form (first/last name, email, subject, message) |
| Footer | Video background with company info, service links, support links |
- React 19 — UI framework
- TypeScript 5.7 — type safety
- Tailwind CSS v4 — utility-first styling via
@tailwindcss/vite - Vite 6 — build tool and dev server
- lucide-react — icon library (Phone, Truck, Globe, Shield, etc.)
- Google Fonts — Rubik font family
- Node.js 18+
- npm
git clone https://github.com/singhaman18/Targo.git
cd Targo
npm installnpm run devOpens at http://localhost:5173 (or next available port).
npm run buildOutput goes to dist/.
npm run preview├── public/
│ └── videos/ # Video assets for each section
│ ├── 336725.mp4 # About section
│ ├── 338747.mp4 # Stats section
│ ├── 31405-386853472.mp4 # CTA section
│ └── 106722-673786473.mp4 # Footer section
├── src/
│ ├── components/
│ │ ├── HeroSection/ # Hero with video, header, headline, consultation card
│ │ ├── AboutSection/ # About with video + features
│ │ ├── ServicesSection/ # Service cards grid
│ │ ├── StatsSection/ # Stats with video background
│ │ ├── TestimonialsSection/ # Client testimonials
│ │ ├── CTASection/ # Call-to-action with video
│ │ ├── ContactSection/ # Contact form
│ │ ├── Footer/ # Footer with video background
│ │ └── ScrollToTop/ # Scroll-to-top arrow button
│ ├── hooks/
│ │ └── useScrollAnimation.ts # Intersection Observer hook
│ ├── index.css # Tailwind imports + custom animations
│ ├── main.tsx # App entry point
│ └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
| Token | Value |
|---|---|
| Brand Red | #EE3F2C |
| Background | #000000 |
| Text | #FFFFFF |
| Font | Rubik (400, 700) |
| Headline Desktop | 64px |
| Headline Mobile | 42px |
| Letter Spacing | -0.04em |
| Desktop Padding | 64px |
| Mobile Padding | 32px |
| Glass Blur | 40px |
| Glass Saturate | 180% |
| Clip Cut Size | 12px |
| Breakpoint | 1024px (lg) |
Place MP4 files in public/videos/ and update the VIDEO_URL constant in the corresponding component:
| Component | File |
|---|---|
VideoBackground.tsx |
Hero (uses CloudFront URL) |
AboutSection.tsx |
About section video |
StatsSection.tsx |
Stats background video |
CTASection.tsx |
CTA background video |
Footer.tsx |
Footer background video |
Free video sources: Pexels, Pixabay, Coverr
This project is open source and available under the MIT License.