Role: Expert Full-Stack Developer & UI/UX Designer.
Objective: Build a premium, dark-mode architectural platform for "DAV Studio" based in Kamjan, Tetovo, specifically targeting the Albanian diaspora.
1. BRANDING & CONSTRUCTION-STYLE LOADING
Theme: Absolute Pitch Black (#050505).
Loading Animation: A full-screen overlay that "assembles" the logo like a digital blueprint.
D (Design): Lines draw a minimalist sketch.
A (Architecture): Structural blocks rise to form a house-roof shape.
V (Visualisation): A 3D wireframe mesh fills the space with a scanning light effect.
Font: Bold, architectural sans-serif (Inter/Geist) with wide letter-spacing.
2. CORE LOGIC & CATEGORIZATION
The website must automatically categorize projects based on the first letter of their ID:
H = Home (e.g., HSSH, HVLK)
V = Villa (e.g., VLMB, VBAK)
I = Interior (e.g., IVVG, IBAK)
L = Landscape (e.g., LJAK, LGAD)
3. DIASPORA-CENTRIC STRUCTURE (TARGETING TETOVË & REGION)
Hero Message: Focus on building your dream home in your homeland while living abroad. Headline: "Ndërto në Vendlindje, Menaxho nga Distanca."
Services Section: - BIM Offers: Explain how Building Information Modeling ensures transparency and precision for clients who aren't physically present.
Dynamic Construction Plan (Plani Dinamik): A dedicated section showing how clients get real-time timeline updates on their construction progress in the Tetovo region.
Remote Management: Digital consultations and 4D simulations for the diaspora.
4. MULTI-LANGUAGE ENGINE (4 LANGUAGES)
Languages: Albanian (AL), English (EN), German (DE), Macedonian (MK).
Scope: Translate every UI element: Navbar ("Work", "Services", "Contact"), Status labels, Location names (Kamjan, Pirok, Tetovë), and all footer details.
5. VERTICAL STORYTELLING LAYOUT
Project Detail Page: NO GRIDS. All project content is a vertical stack.
Images: Large, full-width architectural photos (Sections, Floor Plans, 3D Renders, Construction Progress).
Captions: Every image must have a specific, localized caption directly underneath it (e.g., "Planimetria e përdhesës", "Aksonometria 3D").
Partners Section: List 1-10 local collaborators per project (Name, Role, Social Media links) with grayscale/transparent styling.
6. TECHNICAL SPECIFICATIONS
Location: Footer must clearly state: "Studio me seli në Kamjan, Tetovë."
Navigation: Transparent navbar that stays fixed on scroll.
Interactions: Use Framer Motion for smooth scroll-reveal effects for both images and text.
Data: Centralize all content in a projectsData constant for easy updates via GitHub image URLs.
I'll now build this premium architectural platform for DAV Studio. Let me start by updating the globals.css with the pitch-black theme, then create the core components.
Now let me create the navigation component and the homepage with hero and services sections:
Now let me create the project detail page with the vertical storytelling layout:
Let me fix the hero section's stats component that uses a hook incorrectly inside the map callback, and add some final polish:
I've built the complete DAV Studio architectural platform. Here's what was created:
Core Features:
Pages & Sections:
Technical Implementation:
#050505) with architectural design tokensprojectsData constant for easy GitHub image URL updates