"use client"; import { useState, useEffect, use, useRef } from "react"; import Header from "@/components/layout/Header"; import { motion, useScroll, useTransform } from "motion/react"; import { LetsWorkTogether } from "@/components/ui/lets-work-section"; import Image from "next/image"; import Link from "next/link"; import { SiNextdotjs, SiReact, SiTypescript, SiFramer, SiSupabase, SiVercel, SiGreensock, SiFigma, SiAdobeaftereffects, SiThreedotjs, SiAdobe, SiShopify, SiStripe, SiApple, SiAndroid, SiFirebase, SiExpo, SiTwilio, SiStorybook, SiTailwindcss, SiWordpress, SiCloudinary, SiHubspot, SiGoogleanalytics, SiMeta, SiGoogleads, SiHtml5, SiInstagram, SiAdobecreativecloud, SiWix, SiExpress, SiNodedotjs, SiMongodb, SiMysql, } from "react-icons/si"; import { IconType } from "react-icons"; import { Shield, Globe, Palette, BarChart3, Users, Sparkles, Target, Smartphone, Search, } from "lucide-react"; // Tech Stack icon mapping const getTechIcon = (tech: string): IconType | null => { const iconMap: { [key: string]: IconType } = { "Next.js": SiNextdotjs, React: SiReact, "React Native": SiReact, TypeScript: SiTypescript, "Framer Motion": SiFramer, Supabase: SiSupabase, Vercel: SiVercel, GSAP: SiGreensock, Figma: SiFigma, "After Effects": SiAdobeaftereffects, "Three.js": SiThreedotjs, "Adobe Creative Suite": SiAdobecreativecloud, Shopify: SiShopify, Stripe: SiStripe, iOS: SiApple, Android: SiAndroid, Firebase: SiFirebase, Expo: SiExpo, "Push Notifications": SiExpo, Twilio: SiTwilio, Storybook: SiStorybook, "Design Tokens": SiFigma, "Tailwind CSS": SiTailwindcss, WordPress: SiWordpress, Cloudinary: SiCloudinary, HubSpot: SiHubspot, "Google Analytics": SiGoogleanalytics, "Meta Ads": SiMeta, "Google Ads": SiGoogleads, Wix: SiWix, "Wix CMS": SiWix, ContextAPI: SiReact, "Adobe Photoshop": SiAdobecreativecloud, Express: SiExpress, "Node.js": SiNodedotjs, MongoDB: SiMongodb, MySQL: SiMysql, }; return iconMap[tech] || null; }; // Tech Stack brand colors const getTechColor = (tech: string): string => { const colorMap: { [key: string]: string } = { "Next.js": "#000000", React: "#61DAFB", "React Native": "#61DAFB", TypeScript: "#3178C6", "Framer Motion": "#0055FF", Supabase: "#3ECF8E", Vercel: "#000000", GSAP: "#88CE02", Figma: "#F24E1E", "After Effects": "#9999FF", "Three.js": "#000000", "Adobe Creative Suite": "#FF0000", Shopify: "#96BF48", Stripe: "#635BFF", iOS: "#000000", Android: "#3DDC84", Firebase: "#FFCA28", Expo: "#000020", "Push Notifications": "#000020", Twilio: "#F22F46", Storybook: "#FF4785", "Design Tokens": "#F24E1E", "Tailwind CSS": "#06B6D4", WordPress: "#21759B", Cloudinary: "#3448C5", HubSpot: "#FF7A59", "Google Analytics": "#E37400", "Meta Ads": "#0081FB", "Google Ads": "#4285F4", Wix: "#0C6EFC", "Wix CMS": "#0C6EFC", ContextAPI: "#61DAFB", "Adobe Photoshop": "#31A8FF", Express: "#000000", "Node.js": "#339933", MongoDB: "#47A248", MySQL: "#4479A1", }; return colorMap[tech] || "#000000"; }; // Services icon mapping const getServiceIcon = (service: string): IconType | null => { const iconMap: { [key: string]: IconType } = { "Web Development": SiHtml5, "UI/UX Design": SiFigma, "Brand Strategy": Target, Branding: SiAdobe, "Motion Design": SiAdobeaftereffects, "Digital Strategy": BarChart3, "E-commerce": SiShopify, "UX Research": Users, "Mobile Development": Smartphone, "Product Strategy": Sparkles, "HIPAA Compliance": Shield, "Patient Portal": Globe, "Design System": SiStorybook, "Web Design": SiFigma, "Content Strategy": Palette, Marketing: SiGoogleads, "Mobile App": Smartphone, "Cloud Infrastructure": Globe, "Digital Marketing": SiMeta, "Social Media": SiInstagram, "Content Creation": Palette, SEO: Search, Responsive: Smartphone, Photography: Palette, }; return iconMap[service] || null; }; // Parallax Image Component const ParallaxImage = ({ src, alt, className = "", containerClassName = "", style = {}, priority = false, }: { src: string; alt: string; className?: string; containerClassName?: string; style?: React.CSSProperties; priority?: boolean; }) => { const ref = useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"], }); const y = useTransform(scrollYProgress, [0, 1], ["-15%", "15%"]); return (
{alt}
); }; type ProjectResult = { metric: string; label: string; }; type NextProject = { slug: string; title: string; category: string; }; type ProjectData = { title: string; subtitle: string; client: string; year: string; services: string[]; launchType: "web" | "mobile"; websiteUrl?: string; appStoreUrl?: string; playStoreUrl?: string; heroImage: string; description: string; challenge: string; solution: string; images: string[]; techStack: string[]; results: ProjectResult[]; nextProject: NextProject; }; // Project data structure - Centralized for easy maintenance const projectsData: Record = { propus: { title: "Propus", subtitle: "Web Development", client: "Propus - Switzerland", year: "2025", services: ["Web Development", "UI/UX Design", "Photography"], launchType: "web", websiteUrl: "https://propus.ch/", heroImage: "/projects/propus/propus1.jpg", description: "Professional web platform for an award-winning real estate photography company from Zug, Switzerland, specializing in luxury properties.", challenge: "Creating an elegant web presence that reflects the premium quality of photography services in the demanding Swiss real estate market.", solution: "We designed a modern, visually impressive website showcasing the portfolio of professional real estate photography, with intuitive navigation and responsive design optimized for international markets.", images: [ "/projects/propus/propus2.jpg", "/projects/propus/propus3.jpg", "/projects/propus/propus4.jpg", ], techStack: ["WordPress", "Figma", "Adobe Photoshop"], results: [ { metric: "300%", label: "Increase in inquiries" }, { metric: "95%", label: "Client satisfaction" }, { metric: "50%", label: "International clients" }, ], nextProject: { slug: "modular", title: "Modular Houses", category: "Web Development", }, }, modular: { title: "Modular Houses", subtitle: "Web Development", client: "Modular Houses", year: "2025", services: ["Web Development", "UI/UX Design", "Digital Strategy", "SEO"], launchType: "web", websiteUrl: "https://modularhouses.rs/", heroImage: "/projects/modular/mod5.jpg", description: "Modern web platform for showcasing innovative modular housing solutions, combining contemporary design with sustainable architecture.", challenge: "Creating a digital presence that effectively communicates the advantages of modular construction while showcasing the quality and innovation of their designs.", solution: "We developed an elegant, modern website highlighting modular house designs through impressive visual displays, detailed specifications, and intuitive user experience.", images: [ "/projects/modular/Plan-1.svg", "/projects/modular/mod1.JPG", "/projects/modular/plan2.svg", ], techStack: ["WordPress", "Figma"], results: [ { metric: "200%", label: "Increase in inquiries" }, { metric: "85%", label: "User engagement rate" }, { metric: "50%", label: "Longer session time" }, ], nextProject: { slug: "modularcrm", title: "Modular Houses CRM", category: "CRM System", }, }, modularcrm: { title: "Modular Houses CRM", subtitle: "CRM System", client: "Modular Houses", year: "2025", services: [ "Web Development", "UI/UX Design", "Cloud Infrastructure", "Digital Strategy", ], launchType: "web", websiteUrl: "#", heroImage: "/projects/modularcrm/modu3.jpg", description: "Custom CRM system developed for Modular Houses, enabling complete management of clients, projects, and sales processes. The system optimizes business operations through a centralized platform tracking all aspects of modular house operations.", challenge: "Modular Houses needed a specialized CRM to solve unique challenges in the modular construction industry - from tracking complex projects, managing quotes and house specifications, to coordinating between design team, production, and clients.", solution: "We created a custom CRM solution using React for dynamic frontend, Node.js and Express for robust backend, and MongoDB for flexible data storage. The system enables tracking the complete project lifecycle, from first client contact to construction finalization, with automated workflows, real-time notifications, and detailed analytics.", images: [ "/projects/modularcrm/modu2.jpg", "/projects/modularcrm/modu1.jpg", ], techStack: ["React", "Node.js", "Express", "MongoDB", "Figma"], results: [ { metric: "65%", label: "Faster sales process" }, { metric: "90%", label: "Better project organization" }, { metric: "50+", label: "Active projects" }, ], nextProject: { slug: "alexzlatara", title: "Zlatara Alex", category: "E-commerce Website", }, }, alexzlatara: { title: "Zlatara Alex", subtitle: "E-commerce Website", client: "Zlatara Alex", year: "2025", services: ["Web Development", "UI/UX Design", "SEO", "Responsive"], launchType: "web", websiteUrl: "https://www.alexzlatara.com", heroImage: "/projects/alex/alex1.jpg", description: "Modern online store for selling jewelry and precious items, allowing users to easily browse and order products online.", challenge: "Creating a reliable and elegant e-commerce platform that reflects the quality and luxury of jewelry products, with a secure online ordering system.", solution: "We created an elegant web platform with intuitive product display, shopping cart, and secure online ordering system, optimized for mobile devices.", images: [ "/projects/alex/ban1.webp", "/projects/alex/alex4.jpg", "/projects/alex/ban3.webp", ], techStack: [ "Next.js", "Tailwind CSS", "Wix CMS", "Figma", "Framer Motion", "ContextAPI", ], results: [ { metric: "250%", label: "Increase in online sales" }, { metric: "90%", label: "User satisfaction" }, { metric: "60%", label: "More mobile orders" }, ], nextProject: { slug: "grid", title: "Grid", category: "Social Network & Booking", }, }, grid: { title: "Grid", subtitle: "Social Network & Booking", client: "Digantix - Internal Product", year: "2025", services: ["Mobile App", "UI/UX Design"], launchType: "mobile", appStoreUrl: "", playStoreUrl: "", heroImage: "/projects/grid/grid.jpg", description: "Grid is our in-house MVP product built by the Digantix team. It showcases a social + booking experience for padel players with a focused, production-ready core.", challenge: "As an internal product, our goal was to validate the concept fast: prove that players can discover each other, book courts quickly, and keep the core experience simple and reliable.", solution: "We built and shipped an MVP with React Native and Expo, backed by Supabase. The product includes essential social flows, booking logic, and push notifications, with UX prototyped in Figma and implemented in TypeScript.", images: [ "/projects/grid/grid2.jpg", "/projects/grid/grid3.jpg", "/projects/grid/grid4.jpg", ], techStack: [ "React Native", "TypeScript", "Figma", "Supabase", "Expo", "Push Notifications", ], results: [ { metric: "1000+", label: "Active users" }, { metric: "500+", label: "Booked sessions" }, { metric: "4.8★", label: "User rating" }, ], nextProject: { slug: "rad", title: "Rad Namestaj", category: "Web Design & Branding", }, }, rad: { title: "Rad Namestaj", subtitle: "Web Design & Branding", client: "Rad Namestaj", year: "2025", services: ["Web Design", "UI/UX Design", "SEO", "Photography"], launchType: "web", websiteUrl: "#", heroImage: "/projects/rad/rad1.jpg", description: "Complete digital solution for quality furniture manufacturer Rad Namestaj, including website design, branding strategy, and professional product photography.", challenge: "Creating a modern digital identity that effectively showcases the quality and craftsmanship of their furniture, with the need for professional product presentation through high-quality photography.", solution: "We developed an elegant WordPress site with a complete branding strategy designed in Figma. We executed a professional photography session highlighting furniture details and quality, while SEO optimization enabled better market visibility.", images: [ "/projects/rad/rad2.jpg", "/projects/rad/rad3.jpg", "/projects/rad/rad4.jpg", ], techStack: ["WordPress", "Figma", "Adobe Photoshop", "Google Analytics"], results: [ { metric: "180%", label: "Increase in inquiries" }, { metric: "90%", label: "Client satisfaction" }, { metric: "4x", label: "More organic traffic" }, ], nextProject: { slug: "axonmed", title: "Axonmed", category: "Healthcare Application", }, }, axonmed: { title: "Axonmed", subtitle: "Healthcare Application", client: "Axonmed", year: "2025", services: ["Web Development", "UI/UX Design", "Cloud Infrastructure"], launchType: "web", websiteUrl: "#", heroImage: "/projects/axon/axon1.jpg", description: "Advanced web application for medical data entry and management, developed as a custom solution for a private client in the medical field. Axonmed enables efficient tracking of patients and medical data.", challenge: "The client needed a secure and intuitive platform for simple medical data management, respecting all privacy standards and efficiently handling large amounts of information.", solution: "We developed a complete web application using Next.js for a fast and responsive user interface frontend, MongoDB for a scalable database, and Node.js backend. The design was created in Figma with a focus on simplicity and efficiency in data entry.", images: [ "/projects/axon/axon2.jpg", "/projects/axon/axon3.jpg", "/projects/axon/axon4.jpg", ], techStack: ["Next.js", "MongoDB", "Node.js", "Figma", "TypeScript"], results: [ { metric: "70%", label: "Faster data entry" }, { metric: "100%", label: "Client satisfaction" }, { metric: "500+", label: "Patients in system" }, ], nextProject: { slug: "idcom", title: "I&DCOM", category: "Service Management CRM", }, }, idcom: { title: "I&DCOM", subtitle: "Service Management CRM", client: "I&DCOM", year: "2025", services: [ "Web Development", "UI/UX Design", "Cloud Infrastructure", "Digital Strategy", ], launchType: "web", websiteUrl: "#", heroImage: "/projects/idcom/i3.jpg", description: "Specialized CRM system for managing service requests and tickets, developed for I&DCOM company specializing in computer, monitor, printer, and hardware servicing. The system enables efficient tracking of malfunctions, service orders, and complete workflow from intake to problem resolution.", challenge: "I&DCOM faced the challenge of managing a large number of daily service requests, requiring a centralized system for tracking tickets, malfunction history, assigned technicians, repair status, and client communication - all in one place with quick search and reporting capabilities.", solution: "We developed a fully customized CRM system using React for responsive and intuitive frontend, Node.js and Express for backend with real processes, MongoDB for flexible database, with design created in Figma enabling quick ticket entry. The system includes a dashboard with statistics, notification system, repair status tracking, parts inventory, and automatic report generation.", images: [ "/projects/idcom/i1.jpg", "/projects/idcom/i2.jpg", "/projects/idcom/i4.jpg", ], techStack: ["React", "Node.js", "Express", "MongoDB", "Figma"], results: [ { metric: "80%", label: "Faster ticket resolution" }, { metric: "95%", label: "Better service work organization" }, { metric: "200+", label: "Monthly tickets" }, ], nextProject: { slug: "majice", title: "Majice.rs", category: "E-commerce Platform", }, }, majice: { title: "Majice.rs", subtitle: "E-commerce Platform", client: "Majice.rs", year: "2025", services: ["Web Development", "UI/UX Design", "SEO", "E-commerce"], launchType: "web", websiteUrl: "https://majice.rs", heroImage: "/projects/majice/majice-logo.png", description: "Complete redesign and development of Majice.rs - a custom clothing e-commerce platform specializing in personalized t-shirts and hoodies. Built entirely from scratch with no plugins or page builders, every feature is custom-engineered for performance and scale.", challenge: "The existing platform was built on outdated technology with a rigid page builder that could not support the level of customization required - especially for the product configurator, courier integrations, and scalable database architecture. A clean rebuild was needed.", solution: "We rebuilt the entire platform from the ground up using React and Node.js, with MySQL as the primary database. Key highlights include a fully custom product configurator/designer that lets users design their own t-shirts and hoodies in-browser, real-time order tracking integrated with local courier services, and a seamless database migration from the legacy system - with zero data loss.", images: [ "/projects/majice/majicem1.jpg", "/projects/majice/majicem2.jpg", "/projects/majice/majicem4.jpg", ], techStack: ["React", "Node.js", "MySQL"], results: [ { metric: "100%", label: "Custom-built, zero plugins" }, { metric: "40%", label: "Faster page load vs. old platform" }, { metric: "3x", label: "More product configurations" }, ], nextProject: { slug: "modular3d", title: "Modular Houses 3D Generator", category: "Web Application", }, }, modular3d: { title: "Modular Houses 3D Generator", subtitle: "Web Application", client: "Modular Houses", year: "2026", services: ["Web Development", "UI/UX Design", "Product Strategy"], launchType: "web", websiteUrl: "#", heroImage: "/projects/generator/hero.mp4", description: "A generative 3D configurator built for Modular Houses - a product conceived jointly by Digantix and the client to solve a genuine design problem: the near-infinite number of valid ways to assemble modular units into a livable home.", challenge: "Modular construction creates a complex combinatorial problem. Modules can't be placed arbitrarily - every side has rules about which adjacent side it can connect to, and compositions must follow structural logic. With this many valid arrangements, static brochures and 2D floor plans broke down completely. Clients had no way to explore what their future home could actually look like.", solution: "We started with a layout engine: an algorithm seeded with a set of initial configurations stored in Supabase, which learns the rules of modular assembly and generates new valid arrangements from existing ones. Once the logic was proven in 2D, we moved into 3D. Each module was modeled as a single packed GLB file containing every possible element - roofs, door types, front and back facades - which the app unpacks and toggles per module on demand. The result is a fully interactive Three.js scene where clients can explore, configure, and export their design directly for further AI-assisted environment rendering.", images: [ "/projects/generator/video1.mp4", "/projects/generator/video2.mp4", ], techStack: ["Next.js", "Supabase", "Three.js", "TypeScript", "Figma"], results: [ { metric: "Real-time", label: "3D visualization" }, { metric: "100+", label: "Possible module combinations" }, { metric: "60%", label: "Increase in client engagement" }, ], nextProject: { slug: "divinehotel", title: "Divine Park Hotel", category: "Web Design & Development", }, }, divinehotel: { title: "Divine Park Hotel", subtitle: "Web Design & Development", client: "Divine Park Hotel", year: "2026", services: ["Web Development", "UI/UX Design", "SEO", "Photography"], launchType: "web", websiteUrl: "https://www.divinepark.rs/", heroImage: "/projects/divine/divine8.jpg", description: "Complete website redesign for Divine Park Hotel - a modern hospitality property seeking a premium digital presence. The project combined a full Next.js rebuild with strong SEO foundations and a professional on-site photography session to bring the property to life online.", challenge: "The hotel's existing website failed to reflect the quality of their property and was losing potential guests to competitors with stronger online profiles. Poor SEO visibility and outdated visuals meant the site was working against the brand rather than for it.", solution: "We delivered a fully redesigned website built with Next.js, focused on speed, mobile experience, and search engine visibility. Alongside the development work, our team conducted a professional photography session on location - capturing the rooms, amenities, and surroundings - giving the entire site authentic, high-quality visuals that convert visitors into guests.", images: [ "/projects/divine/divine7.jpg", "/projects/divine/divine5.jpg", "/projects/divine/divine6.jpg", ], techStack: ["Next.js", "Figma", "Tailwind CSS", "Google Analytics"], results: [ { metric: "3x", label: "More direct bookings" }, { metric: "Top 3", label: "Local search ranking" }, { metric: "100%", label: "Professional photography" }, ], nextProject: { slug: "serwiss", title: "SerWiss Operations", category: "Web Development", }, }, serwiss: { title: "SerWiss Operations", subtitle: "Web Development", client: "SerWiss Operations", year: "2026", services: ["Web Development", "UI/UX Design", "Digital Strategy"], launchType: "web", websiteUrl: "#", heroImage: "/projects/serwiss/serwiss3.jpg", description: "A professional web presence for SerWiss Operations - a nearshore managed services firm founded by Natascha Maksimovic, bringing Swiss precision and over 20 years of international finance expertise to SMEs across the DACH region.", challenge: "SerWiss Operations needed a digital platform that conveyed the credibility of Swiss-quality standards while clearly communicating the commercial advantage of nearshoring from Serbia. The audience - senior decision-makers at SMEs - demands professionalism and clarity, not noise.", solution: "We designed and developed a focused, high-converting website in Next.js that leads with the founder's story and the firm's unique positioning: Swiss precision, Serbian operational talent, and a strategic collaboration with Salvioli AG and Comtrade Systems Integration. The site structures a complex service offering - financial operations, process optimization, nearshore delivery - into a clear and confident narrative.", images: [ "/projects/serwiss/serwiss2.jpg", "/projects/serwiss/serwiss1.jpg", "/projects/serwiss/serwiss4.jpg", ], techStack: ["Next.js", "Tailwind CSS", "TypeScript", "Figma"], results: [ { metric: "3", label: "Strategic partners united" }, { metric: "DACH", label: "Target market" }, { metric: "20+", label: "Years of founder expertise" }, ], nextProject: { slug: "propus", title: "Propus", category: "Web Development", }, }, }; export default function ProjectPage({ params, }: { params: Promise<{ slug: string }>; }) { const { slug } = use(params); const [isDark, setIsDark] = useState(false); const project = projectsData[slug] || projectsData.propus; const websiteEnabledSlugs = [ "modular", "alexzlatara", "propus", "rad", "majice", "divinehotel", ]; const showWebsiteCta = websiteEnabledSlugs.includes(slug) && project.launchType === "web" && Boolean(project.websiteUrl); useEffect(() => { const handleScroll = () => { const contactSection = document.getElementById("contact-section"); const contactSectionRect = contactSection?.getBoundingClientRect(); if (contactSectionRect && contactSectionRect.top <= 100) { setIsDark(true); } else { setIsDark(false); } }; window.addEventListener("scroll", handleScroll); handleScroll(); return () => window.removeEventListener("scroll", handleScroll); }, []); return ( <>
{/* Hero Section */}
{project.subtitle} {project.title} {project.description} {/* Hero Image */} {slug === "modular3d" ? (
{/* Project Info Grid */}

CLIENT

{project.client}

YEAR

{project.year}

SERVICES

{project.services.map((service: string, index: number) => { const Icon = getServiceIcon(service); return ( {Icon && } {service} ); })}
{/* Temporary launch CTA setup: keep only website button for selected web projects. App Store / Play Store buttons are intentionally disabled for now and will be added later. */} {showWebsiteCta && (

View Live Project

Visit Website
)} {/* Challenge & Solution Section */}
{/* Left Side - Sticky Content */}

The challenge.

{project.challenge}

{/* Right Side - Content */}

Our solution.

{project.solution}

{/* Tech Stack */}

TECHNOLOGY STACK

{project.techStack.map((tech: string, index: number) => { const Icon = getTechIcon(tech); const color = getTechColor(tech); return ( {Icon && } {tech} ); })}
{/* Image Gallery */} {slug !== "modular3d" && (
{project.images.map((image: string, index: number) => { // Special layout for first image in modular project if (slug === "modular" && index === 0) { return (
{/* Left side - Text content */}

MODULAR UNIT
FOREST

{/* Dimensions */}

Dimensions{" "} 12.10 x 5.00{" "} m

{/* Area */}

Total area{" "} 60.5 m²

{/* Description */}

Designed as an ideal solution for modern lifestyle – mobile, energy-efficient, and aesthetically exceptional.

{/* Right side - Floor plan */}
Modular House Floor Plan
); } // Special layout for third image in modular project (LEAF) if (slug === "modular" && index === 2) { return (
{/* Left side - Text content */}

MODULAR UNIT
LEAF

{/* Dimensions */}

Dimensions{" "} 5.5 x 3.75 m

{/* Area */}

Total area{" "} 20.5 m²

{/* Description */}

Designed as an ideal solution for modern lifestyle – mobile, energy-efficient, and aesthetically exceptional.

{/* Right side - Floor plan */}
Modular House Floor Plan LEAF
); } // Regular image display for other images return ( ); })}
)} {/* Results Section */} {slug !== "modular3d" && (

Impact & results.

{project.results.map((result: ProjectResult, index: number) => (
{result.metric}

{result.label}

))}
)} {/* Modular 3D - Process Steps + Feature */} {slug === "modular3d" && ( <> {/* Editorial process section */}

The Process

{[ { number: "01", title: "Algorithm", description: "We built a layout generation algorithm seeded with initial module configurations. It understands the rules of modular construction - which sides connect, how orientations work - and generates new valid arrangements from existing ones.", }, { number: "02", title: "2D First", description: "Before touching 3D, we validated the layout logic in 2D. Every generated floor plan is structurally sound - the right sides connect to the right sides, every time.", }, { number: "03", title: "3D Modeling", description: "Each module was packed into a single GLB containing every possible element - roofs, doors, facades. The app unpacks and toggles components per module on demand, keeping the asset pipeline lean and fully flexible.", }, { number: "04", title: "Live Scene", description: "Configurations are rendered in real time with Three.js. Clients explore their design, then export it directly to AI tools for environment generation and final renders.", }, ].map((step) => (

{step.number}

{step.title}

{step.description}

))}
{/* Feature spotlight */}

Real-time 3D visualization.

The layout engine doesn't just display pre-built designs - it generates them. Seeded with an initial set of valid configurations and the rules of modular assembly, it produces new arrangements on demand. Every floor plan is structurally correct, and every 3D scene updates instantly as clients explore their options.

{/* Light feature section - file generation */}

One file, every element.

Each module is a single packed GLB - roof types, door variations, front and back facades all bundled inside. The configurator unpacks and toggles each element individually, so there's no library to maintain and no re-exports when something changes. Add a glass roof, swap a facade, remove the doors - all live, all instant.

{/* Authorship credit block */}

Built in collaboration

Digantix × Modular Houses

© {new Date().getFullYear()} - Proprietary work. Design, technology, and all content may not be reproduced without written permission.

)} {/* Next Project CTA */}

NEXT PROJECT

{project.nextProject.title}

{project.nextProject.category}

View project
{/* Contact Section */}
); }