# Drish Digital - Premium B2B SaaS Website

A world-class, ultra-advanced website for Drish Digital, a enterprise digital transformation agency. Built with Next.js 16, Tailwind CSS, and React for maximum performance and visual appeal.

## Overview

This is a comprehensive, multi-section landing page showcasing digital transformation services with:

- **15+ Premium Sections**: Hero, Trusted Brands, Services, Industries, Case Studies, Results, Testimonials, Blog, FAQ, and CTAs
- **30+ Reusable Components**: Organized UI components for cards, sections, and layouts
- **Dark-First Premium Design**: Sophisticated dark theme with cyan/indigo accents and glassmorphism effects
- **Fully Responsive**: Mobile-first design that works perfectly on all devices
- **Performance Optimized**: Lazy loading, code splitting, and Next.js 16 optimizations
- **Interactive Elements**: Animated counters, expandable FAQs, hover effects, and smooth transitions

## Technology Stack

- **Framework**: Next.js 16.2.6 with App Router
- **Styling**: Tailwind CSS 4.2 with custom utilities
- **Components**: React 19.2.4 with shadcn/ui Button
- **Icons**: Lucide React
- **Fonts**: Geist (sans) & Geist Mono
- **Animation**: CSS transitions and React animations
- **Bundler**: Turbopack (default in Next.js 16)

## Project Structure

```
/vercel/share/v0-project/
├── app/
│   ├── layout.tsx          # Root layout with metadata
│   ├── page.tsx            # Homepage combining all sections
│   └── globals.css         # Premium design system
├── components/
│   ├── layout/
│   │   ├── header.tsx      # Fixed sticky navigation
│   │   └── footer.tsx      # Comprehensive footer
│   ├── sections/
│   │   ├── hero.tsx        # Hero with animated background
│   │   ├── trusted-brands.tsx
│   │   ├── services.tsx    # Service offerings grid
│   │   ├── industries.tsx  # 12 industry solutions
│   │   ├── case-studies.tsx
│   │   ├── results.tsx     # Animated statistics
│   │   ├── testimonials.tsx
│   │   ├── blog.tsx
│   │   ├── faq.tsx         # Expandable FAQ
│   │   └── cta.tsx         # Call-to-action section
│   └── ui/
│       ├── button.tsx      # Shadcn Button
│       ├── service-card.tsx
│       ├── industry-card.tsx
│       ├── testimonial-card.tsx
│       ├── blog-card.tsx
│       └── stat-card.tsx   # Animated counter
├── public/                 # Static assets
├── package.json
├── tsconfig.json
├── next.config.mjs
└── tailwind.config.ts
```

## Design System

### Color Palette (5 colors)
- **Primary Brand**: `#00d9ff` (Vibrant Cyan)
- **Primary Dark**: `#0a0e27` (Deep Navy Background)
- **Accent**: `#6366f1` (Indigo/Purple)
- **Neutral**: `#1a1f3a` (Card backgrounds)
- **Text**: `#f0f2f5` (Light text on dark)

### Glassmorphism Effects
- Semi-transparent backgrounds with backdrop blur
- `bg-white/10 backdrop-blur-md border border-white/20`
- Subtle glow shadows: `shadow-cyan-500/20`

### Typography
- **Headings**: Geist Sans, bold, gradient text
- **Body**: Geist Sans, regular, with semantic sizing
- **Accent Text**: Gradient text using cyan-indigo

## Key Features

### 1. Hero Section
- Animated gradient background
- Split layout with call-to-action buttons
- Quick stats preview (500+ clients, $2.5B value, 99.9% success)
- Scroll entrance animations

### 2. Trusted Brands
- 6 placeholder brands showcasing partnership diversity
- Hover effects with glow and border highlighting
- Responsive grid (2-3-6 columns)

### 3. Services (6 offerings)
- Digital Transformation
- Cloud Solutions
- Product Development
- Data & Analytics
- Cybersecurity
- Consulting

### 4. Industries (12+ sectors)
- Financial Services, Healthcare, Retail, Manufacturing
- Education, Logistics, Media, Telecommunications
- Real Estate, Agriculture, Energy, SaaS
- Each with emoji icons and performance stats

### 5. Case Studies
- 3 featured success stories
- Client testimonials with quantified results
- Category tags (Cloud, FinTech, Scale, etc.)

### 6. Results Section
- Animated counter statistics (500+, 2.5B, 99.9%)
- Additional metrics: 98% success rate, 350% ROI, 92% retention
- Glassmorphic cards with cyan text

### 7. Testimonials
- 4 client quotes with 5-star ratings
- Author, title, and company attribution
- Clean, readable layout

### 8. Blog/Insights
- 3 featured articles
- Category badges
- Author and date information
- "View All Articles" CTA

### 9. FAQ Section
- 6 expandable questions
- Smooth accordion animations
- Persistent state management
- Contact prompt for unanswered questions

### 10. Call-to-Action
- Bold headline with gradient text
- Dual action buttons
- Benefit messaging ("30-minute free consultation")
- Background glow effects

### 11. Footer
- 5-column layout (brand + 4 link sections)
- Social media links
- Comprehensive sitemap
- Copyright and legal links

## Getting Started

### Prerequisites
- Node.js 18+ (pnpm preferred)
- Modern browser (Chrome, Firefox, Safari, Edge)

### Installation

1. **Install dependencies**:
   ```bash
   pnpm install
   ```

2. **Start development server**:
   ```bash
   pnpm dev
   ```

3. **Open in browser**:
   ```
   http://localhost:3000
   ```

### Available Scripts

```bash
# Development
pnpm dev                # Start dev server (Turbopack)

# Production
pnpm build             # Build for production
pnpm start             # Start production server

# Code Quality
pnpm lint              # Run ESLint
```

## Performance Optimizations

- **Next.js 16 Features**: App Router, Server Components, Streaming
- **Image Optimization**: Using Next.js Image component (when adding images)
- **Code Splitting**: Automatic with dynamic imports
- **CSS**: Tailwind v4 with minimal bundle size
- **Fonts**: Optimized font loading with `next/font`
- **Animations**: Hardware-accelerated CSS transforms
- **No Client-Side Rendering**: Server Components where possible

## Customization Guide

### Update Company Information
Edit these files to customize for your brand:

1. **Logo & Branding**: `components/layout/header.tsx` (lines 20-25)
2. **Hero Copy**: `components/sections/hero.tsx` (line 42)
3. **Services**: `components/sections/services.tsx` (services array)
4. **Industries**: `components/sections/industries.tsx` (industries array)
5. **Case Studies**: `components/sections/case-studies.tsx` (caseStudies array)
6. **Footer Links**: `components/layout/footer.tsx` (footerLinks object)

### Modify Colors
Edit `/app/globals.css`:
- Update `--primary` for main brand color
- Update `--accent` for secondary accent
- All colors cascade to components via Tailwind tokens

### Add Pages
Create new pages in `/app/[slug]/page.tsx`:
```tsx
import { Header } from '@/components/layout/header'
import { Footer } from '@/components/layout/footer'

export default function Page() {
  return (
    <main className="min-h-screen bg-background">
      <Header />
      {/* Your content */}
      <Footer />
    </main>
  )
}
```

## Deployment

### Deploy to Vercel (Recommended)
1. Push code to GitHub
2. Import project in Vercel dashboard
3. Deploy with one click
4. Connect custom domain

```bash
# Or use Vercel CLI
npm i -g vercel
vercel
```

### Environment Variables
No environment variables required for this static site.

## Browser Support

- Chrome/Edge: Latest 2 versions
- Firefox: Latest 2 versions
- Safari: Latest 2 versions
- Mobile browsers: iOS Safari 13+, Chrome Mobile 90+

## Accessibility

- Semantic HTML (main, header, section, footer)
- ARIA labels for icons
- Keyboard navigation support
- Color contrast ratios > 7:1 (AAA standard)
- Screen reader friendly component structure

## SEO

- Metadata optimized in `app/layout.tsx`
- Semantic HTML structure
- Fast Core Web Vitals (LCP < 2.5s)
- Mobile-first responsive design
- Schema-ready for structured data

## Future Enhancements

- [ ] Add blog integration (MDX or CMS)
- [ ] Customer case study management
- [ ] Team member showcase
- [ ] Newsletter signup integration
- [ ] Analytics dashboard
- [ ] Contact form with email backend
- [ ] Multi-language support (i18n)
- [ ] Dark/Light mode toggle (currently dark-first)

## License

Built by v0 for Drish Digital. All rights reserved.

## Support

For questions or customization needs:
1. Review the component structure in `/components`
2. Check Tailwind CSS documentation: tailwindcss.com
3. Check Next.js docs: nextjs.org
4. Check shadcn/ui: ui.shadcn.com

---

**Live at**: https://drish-digital.vercel.app (example deployment)
**Built with**: Next.js 16, Tailwind CSS, React 19, Lucide Icons
**Last Updated**: July 2026