Transform Your Living Space Into a Dream Home
Professional home renovation and interior design services with modern web experience.
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.
- π¨ 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
- 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
- Prisma ORM - Type-safe database queries
- SQLite - Lightweight database for development
- Next.js API Routes - Serverless API endpoints
- Vercel - Production deployment platform
- Next.js Image Optimization - Automatic image optimization
- CSS-in-JS - Optimized styling with Tailwind
- 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
- 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
- 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
- π Homepage - Animated hero section, service options, process, testimonials
- π οΈ Services - Comprehensive renovation service offerings
- π Portfolio - Project gallery with detailed case studies
- π Contact - Professional contact forms and information
- βΉοΈ About - Company information and team details
- 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
- 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
- Privacy Policy - Data protection and privacy information
- Terms of Service - Service terms and conditions
- Contact Information - Multiple ways to reach the team
- Node.js 18+
- npm or yarn package manager
- Git for version control
# 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
# Database
DATABASE_URL="file:./dev.db"
# NextAuth (if implementing authentication)
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"
# 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
# Install Vercel CLI
npm i -g vercel
# Deploy to Vercel
vercel
# Or connect GitHub repository for automatic deployments
# Build the application
npm run build
# Start production server
npm start
- 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
- Navigation - Smooth hover transitions
- Buttons - Scale and color transitions
- Cards - Lift effects on hover
- Images - Scale animations on hover
- Links - Color transitions
- 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
- 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
- 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
- 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
- Tailwind CSS - Easy color and spacing customization
- CSS Variables - Centralized design system
- Component Library - Reusable UI components
- Responsive Design - Mobile-first approach
- Static content - Easy to update text and images
- Dynamic routing - Flexible page structure
- Image optimization - Automatic image handling
- SEO metadata - Easy meta tag management
- 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
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature
) - Commit your changes (
git commit -m 'Add amazing feature'
) - Push to the branch (
git push origin feature/amazing-feature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 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.