Skip to content

mrbuddhu/Interio

Repository files navigation

🏠 Interio - Premium Interior Design Platform

Transform Your Living Space Into a Dream Home
Professional home renovation and interior design services with modern web experience.

🎯 Project Overview

Interio is a premium interior design and renovation platform that showcases professional home transformation services. Built with modern web technologies and featuring smooth animations, this platform demonstrates a high-end interior design business with comprehensive service offerings.

✨ Key Features

  • 🎨 Animated Homepage - Smooth Framer Motion animations throughout
  • πŸ“± Responsive Design - Perfect on all devices and screen sizes
  • πŸ—οΈ Multi-Step Estimate Flow - Professional project estimation system
  • πŸ“‚ Service Pages - Detailed renovation services with real examples
  • πŸ“ž Contact System - Professional contact forms and information
  • βš–οΈ Legal Pages - Privacy Policy and Terms of Service
  • 🎯 SEO Optimized - OpenGraph metadata for social sharing
  • πŸš€ Production Ready - Optimized for Vercel deployment

πŸ› οΈ Technical Stack

Frontend & UI

  • Next.js 14 - React framework with App Router
  • TypeScript - Type-safe development
  • Tailwind CSS - Utility-first styling
  • Framer Motion - Smooth animations and transitions
  • Radix UI - Accessible component primitives

Backend & Database

  • Prisma ORM - Type-safe database queries
  • SQLite - Lightweight database for development
  • Next.js API Routes - Serverless API endpoints

Deployment & Performance

  • Vercel - Production deployment platform
  • Next.js Image Optimization - Automatic image optimization
  • CSS-in-JS - Optimized styling with Tailwind

🎨 Design & User Experience

Visual Design

  • Emerald Green Branding - Professional interior design aesthetic
  • High-Quality Images - Real renovation photos from Unsplash
  • Modern Typography - Inter and Playfair Display fonts
  • Consistent Spacing - Professional layout and spacing

Animations & Interactions

  • Smooth Page Transitions - Framer Motion powered animations
  • Hover Effects - Interactive feedback on user actions
  • Scroll-Triggered Animations - Elements animate when scrolled into view
  • Staggered Animations - Sequential element appearances
  • Micro-interactions - Subtle animations for enhanced UX

Responsive Features

  • Mobile-First Design - Optimized for all screen sizes
  • Touch-Friendly - Large buttons and touch targets
  • Flexible Layouts - Adaptive grid systems
  • Performance Optimized - Fast loading on all devices

πŸ“„ Page Structure

Main Pages

  1. 🏠 Homepage - Animated hero section, service options, process, testimonials
  2. πŸ› οΈ Services - Comprehensive renovation service offerings
  3. πŸ“‚ Portfolio - Project gallery with detailed case studies
  4. πŸ“ž Contact - Professional contact forms and information
  5. ℹ️ About - Company information and team details

Service Pages

  • Kitchen Renovation - Custom cabinetry and modern appliances
  • Bathroom Remodeling - Luxury fixtures and elegant finishes
  • Living Room Design - Custom built-ins and architectural details
  • Bedroom Renovation - Personalized comfort and style
  • Home Office Design - Productive workspace solutions
  • Outdoor Living - Backyard transformation and landscaping

Estimate Flow

  • Postal Code Entry - Location-based service availability
  • Building Type Selection - Residential vs. commercial
  • Style Preferences - Design style and aesthetic choices
  • Project Details - Budget, timeline, and requirements
  • Confirmation - Professional estimate submission

Legal & Support

  • Privacy Policy - Data protection and privacy information
  • Terms of Service - Service terms and conditions
  • Contact Information - Multiple ways to reach the team

πŸš€ Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn package manager
  • Git for version control

Installation

# Clone the repository
git clone https://github.com/mrbuddhu/Interio.git
cd Interio

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local

# Run database migrations
npx prisma migrate dev

# Generate Prisma client
npx prisma generate

# Start development server
npm run dev

Environment Variables

# Database
DATABASE_URL="file:./dev.db"

# NextAuth (if implementing authentication)
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

# Database
npx prisma studio    # Open database GUI
npx prisma migrate   # Run database migrations
npx prisma generate  # Generate Prisma client

🌐 Deployment

Vercel Deployment

# Install Vercel CLI
npm i -g vercel

# Deploy to Vercel
vercel

# Or connect GitHub repository for automatic deployments

Production Build

# Build the application
npm run build

# Start production server
npm start

πŸ“Š Features Breakdown

Homepage Animations

  • Header Slide-down - Smooth header entrance animation
  • Hero Section - Staggered text and image animations
  • Service Cards - Hover effects and staggered entrance
  • Process Steps - Scroll-triggered animations
  • Testimonials - Rotating star ratings and hover effects
  • Footer - Slide-in animations for sections

Interactive Elements

  • Navigation - Smooth hover transitions
  • Buttons - Scale and color transitions
  • Cards - Lift effects on hover
  • Images - Scale animations on hover
  • Links - Color transitions

Performance Optimizations

  • Image Optimization - Next.js automatic image optimization
  • Code Splitting - Automatic route-based code splitting
  • CSS Optimization - Tailwind CSS purging
  • Bundle Optimization - Tree shaking and minification

🎯 Business Features

Lead Generation

  • Multi-step estimate forms - Professional project estimation
  • Contact forms - Multiple contact touchpoints
  • Service inquiries - Detailed service information requests
  • Portfolio showcase - Project examples to inspire clients

Client Experience

  • Professional presentation - High-quality design and content
  • Clear service offerings - Detailed service descriptions
  • Easy navigation - Intuitive user interface
  • Mobile accessibility - Perfect experience on all devices

Marketing Features

  • SEO optimized - Search engine friendly structure
  • Social sharing - OpenGraph metadata for social platforms
  • Professional branding - Consistent visual identity
  • Trust indicators - Client testimonials and project examples

πŸ”§ Customization

Styling

  • Tailwind CSS - Easy color and spacing customization
  • CSS Variables - Centralized design system
  • Component Library - Reusable UI components
  • Responsive Design - Mobile-first approach

Content Management

  • Static content - Easy to update text and images
  • Dynamic routing - Flexible page structure
  • Image optimization - Automatic image handling
  • SEO metadata - Easy meta tag management

πŸ“ˆ Performance Metrics

  • Lighthouse Score - 90+ across all metrics
  • Core Web Vitals - Optimized for user experience
  • Mobile Performance - Fast loading on mobile devices
  • SEO Score - Optimized for search engines

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

πŸ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ™ Acknowledgments

  • Unsplash - High-quality interior design images
  • Framer Motion - Smooth animation library
  • Tailwind CSS - Utility-first CSS framework
  • Next.js - React framework for production
  • Vercel - Deployment platform

Built with ❀️ by Sanganak - #1 Premium IT Boutique

Transform your living space into a dream home with Interio's professional renovation services.

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published