DevSolion - Modern Software Development Company Website

A complete, production-ready Next.js website built with TypeScript, Tailwind CSS, and modern web technologies.

🚀 Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: Zustand
• Theme: next-themes (dark/light mode)
• Animations: Framer Motion
• Icons: Lucide React
• Fonts: Inter (Google Fonts)

✨ Features

• 🎨 Modern, responsive design with dark mode support
• 📱 Mobile-first approach with hamburger menu
• ⚡ Optimized performance with Next.js App Router
• 🎭 Smooth animations with Framer Motion
• 🔍 SEO optimized with metadata API
• 📝 Contact form with Zustand state management
• 🎯 Type-safe with TypeScript
• 🌈 Custom color scheme (Primary: #2563EB, Accent: #A855F7)

📁 Project Structure

devsolion/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout with providers
│   │   ├── page.tsx             # Home page
│   │   ├── services/page.tsx    # Services page
│   │   ├── projects/page.tsx    # Projects page
│   │   ├── team/page.tsx        # Team page
│   │   └── contact/page.tsx     # Contact page
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Navbar.tsx       # Navigation with theme toggle
│   │   │   └── Footer.tsx       # Footer with social links
│   │   ├── sections/
│   │   │   └── Home/
│   │   │       ├── Hero.tsx
│   │   │       ├── ServicesPreview.tsx
│   │   │       ├── ProjectsPreview.tsx
│   │   │       ├── TeamPreview.tsx
│   │   │       └── ContactCTA.tsx
│   │   └── ui/
│   │       ├── Button.tsx       # Reusable button component
│   │       └── SectionHeading.tsx
│   ├── lib/
│   │   ├── data/
│   │   │   ├── services.ts      # Dummy services data
│   │   │   ├── projects.ts      # Dummy projects data
│   │   │   └── team.ts          # Dummy team data
│   │   ├── store/
│   │   │   └── ui.ts            # Zustand UI store
│   │   └── seo/
│   │       └── metadata.ts      # SEO configuration
│   ├── providers/
│   │   └── theme-provider.tsx   # Theme provider wrapper
│   ├── styles/
│   │   └── globals.css          # Global styles
│   └── types/
│       ├── service.ts           # Service type definition
│       ├── project.ts           # Project type definition
│       └── team.ts              # Team type definition
├── public/
│   └── favicon.ico
├── tailwind.config.ts           # Tailwind configuration
├── tsconfig.json                # TypeScript configuration
└── package.json

🛠️ Installation

Prerequisites

• Node.js 18.17 or higher
• npm or yarn package manager

Steps

1. Navigate to the project directory:

   cd devsolion

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open your browser: Navigate to http://localhost:3000

📦 Build for Production

npm run build

This creates an optimized production build in the .next folder.

To run the production build locally:

npm start

🚀 Deployment

Deploy to Vercel (Recommended)

Vercel is the recommended platform for deploying Next.js applications.

Method 1: Using Vercel CLI

1. Install Vercel CLI:

   npm install -g vercel

2. Deploy:

   vercel

3. Follow the prompts:

   • Login to your Vercel account
   • Select or create a new project
   • Confirm the settings
   • Deploy!

Method 2: Using GitHub

1. Push your code to GitHub:

   git add .
   git commit -m "Initial commit"
   git push origin main

2. Import to Vercel:

   • Go to vercel.com
   • Click "Add New" → "Project"
   • Import your GitHub repository
   • Configure project settings (usually auto-detected)
   • Click "Deploy"

Method 3: Using Vercel Dashboard

1. Visit vercel.com/new
2. Import your Git repository
3. Vercel will auto-detect Next.js and configure the build settings
4. Click "Deploy"

Environment Variables (if needed)

If you add any environment variables, create a .env.local file:

# Add your environment variables here
# NEXT_PUBLIC_API_URL=https://api.example.com

In Vercel, add these in: Project Settings → Environment Variables

🎨 Customization

Colors

Edit tailwind.config.ts to change the color scheme:

colors: {
  primary: "#2563EB",  // Change primary color
  accent: "#A855F7",   // Change accent color
  // ...
}

Content

• Services: Edit src/lib/data/services.ts
• Projects: Edit src/lib/data/projects.ts
• Team: Edit src/lib/data/team.ts

SEO Metadata

Edit src/lib/seo/metadata.ts to update:

• Site title
• Description
• Keywords
• Social media cards

📄 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm start	Run production server
npm run lint	Run ESLint

🌐 Pages

Route	Description
/	Home page with all sections
/services	Full services listing
/projects	Portfolio of projects
/team	Team members
/contact	Contact form

🎯 Features Breakdown

Home Page

• Hero section with gradient background and stats
• Services preview (6 services)
• Projects preview (6 projects)
• Team preview (6 members)
• Contact CTA section

Navbar

• Responsive design
• Mobile hamburger menu (Zustand controlled)
• Theme toggle (light/dark)
• Active link highlighting
• Sticky positioning

Dark Mode

• System preference detection
• Manual toggle
• Smooth transitions
• Persistent across pages

Contact Form

• Form validation
• Loading states (Zustand)
• Success feedback
• Auto-reset after submission

🔧 Technologies Explained

• Next.js App Router: Latest routing system for optimal performance
• TypeScript: Type safety and better developer experience
• Tailwind CSS: Utility-first CSS for rapid UI development
• Zustand: Lightweight state management (mobile menu, form status)
• next-themes: Theme management with system detection
• Framer Motion: Smooth, professional animations
• Lucide React: Modern, customizable icons

📱 Responsive Design

The website is fully responsive across:

• Mobile devices (320px+)
• Tablets (768px+)
• Desktops (1024px+)
• Large screens (1280px+)

🎨 Design Philosophy

• Clean & Minimal: Focus on content, not clutter
• Developer-focused: Tech-savvy aesthetic
• Premium Feel: High-quality visuals and interactions
• Fast Loading: Optimized images and code splitting
• Accessible: WCAG compliant color contrasts

📈 Performance

This site is optimized for:

• ✅ Fast page loads
• ✅ SEO best practices
• ✅ Core Web Vitals
• ✅ Image optimization (Next.js Image component)
• ✅ Code splitting
• ✅ Font optimization (Google Fonts)

📝 License

This project is created for DevSolion. All rights reserved.

🤝 Support

For questions or issues:

• Email: hello@devsolion.com
• GitHub: Open an issue

---

Built with ❤️ using Next.js, TypeScript, and Tailwind CSS