NestSpace is a premium, high-fidelity interior design showcase and portfolio platform. Focused on visual excellence, it exhibits modern residential and commercial spaces, interior styling workflows, creative design galleries, blogs, and contact options. It is engineered with Next.js 16, React 19, Radix UI primitives, and Tailwind CSS v4 to deliver smooth transitions and a sleek user experience.
🌐 Demo / Deployment: NestSpace on Vercel (Host URL managed by Project Admin)
- Tailwind CSS v4 Utilities: Implementing fluid grid systems, variable spacing, custom animation keys, and elegant color systems.
- Radix UI Primitives: Fully accessible, style-agnostic components (Accordion, Hover Card, Tabs, Tooltip, Dialog, Navigation Menu) customized to fit our clean styling guide.
- Micro-Animations: Powered by
tw-animate-cssand native CSS transitions to create responsive hover actions and fade-in entries on load.
- 📐 Interactive Design Galleries: Showcases high-resolution concepts categorized by rooms (Kitchen, Living Room, Bedroom) and styles (Minimalist, Classic, Modern).
- 🛠️ Services Showcase: Details spatial planning, custom furniture styling, commercial lighting, and color consulting options.
- 🖼️ Portfolio Grid: High-fidelity project showcase featuring realistic interior project layouts.
- ✍️ Interior Design Blog: Expert tips on spatial design, modern aesthetics, and architectural trends.
- 📩 Seamless Inquiries: Fully structured contact and request forms.
- 📱 Responsive Layouts: Carefully engineered to look beautiful on mobile, tablet, and desktop screens.
- Framework: Next.js 16.2 (App Router, TypeScript)
- Rendering & UI: React 19.2 (Functional Components)
- Styling: Tailwind CSS v4.2, PostCSS v8, Autoprefixer
- Components & Access: Radix UI Primitives, Lucide React Icons, React Day Picker
- Forms & Validations: React Hook Form, Zod schema resolvers
NestSpace-Interiors-UI-main/
├── app/ # Next.js App Router Structure
│ ├── about/ # About company details
│ ├── blog/ # Design tips & posts
│ ├── contact/ # Support & quotes inquiry
│ ├── designs/ # Custom design previewer
│ ├── portfolio/ # Projects gallery showcase
│ ├── services/ # Specific service details
│ ├── privacy/ & terms/ # Policy documentation
│ ├── globals.css # Global stylesheets (Tailwind v4 imports)
│ ├── layout.tsx # Main HTML layout wrapper
│ └── page.tsx # Home landing route
├── components/ # Accessible layout structures
│ ├── ui/ # Custom Radix adapters (Accordion, Dropdown, etc.)
│ └── icons.tsx # Custom svg assets
├── hooks/ # Reusable React hooks
├── lib/ # Helper libraries & theme controllers
├── styles/ # Auxiliary styles & modules
├── public/ # Static files (images, logos, icons)
├── package.json # App scripts & dependencies
└── tsconfig.json # TypeScript compile properties
Make sure you have Node.js (version 18 or higher) and pnpm installed.
git clone https://github.com/MistryVishwa/NestSpace-Interiors-UI.git
cd NestSpace-Interiors-UIThis project uses pnpm as its primary package manager:
pnpm installStart the Next.js development server locally:
pnpm devOpen http://localhost:3000 in your browser.
To check for syntax errors and build the static output bundle:
pnpm lint
pnpm build- 3D Space Viewer: Embed interactive WebGL or canvas-based 3D room preview models.
- Quote Cost Calculator: Provide an approximate budget planner matching room size and interior theme selections.
- Live Chat Integration: Connect real-time customer support chat widgets.
To contribute to NestSpace, check out CONTRIBUTING.md to understand claiming tasks, branch conventions, and how to create clean PR submissions.