[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "New House - Architecture Portfolio", description: "Professional architecture projects and modern house designs", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]jpg:file="public/modern-luxury-house-exterior-at-dusk-with-warm-lig.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-luxury-house-exterior-at-dusk-with-warm-lig-x3bVn4mBPfXdMgqwfgI0OA8esU2CyZ.jpg" isMerged="true" [V0_FILE]jpg:file="public/mobile-phone-mockup-showing-architecture-website.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mobile-phone-mockup-showing-architecture-website-d41eWhBEJ7hkgsghJFC9kRhU7kCeNA.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" import Link from "next/link" export function Header() { return (

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import Image from "next/image" export function HeroSection() { return (

Projects

Experience and professionalism allow us to create true works of art

611

designed properties

291

completed projects

) } [V0_FILE]typescriptreact:file="components/projects-grid.tsx" isEdit="true" isMerged="true" import Image from "next/image" import Link from "next/link" const projects = [ { id: 1, size: "320 m²", name: "Scandinavia 150", year: "Moscow 2017", image: "/projects/house-01.jpg", span: "col-span-2", }, { id: 2, size: "320 m²", name: "Urban Villa", image: "/projects/house-02.jpg", span: "col-span-2" }, { id: 3, size: "290 m²", name: "Forest Retreat", image: "/projects/house-03.jpg", span: "col-span-2" }, { id: 4, size: "400 m²", name: "Riverside Estate", image: "/projects/house-04.jpg", span: "col-span-2" }, { id: 5, size: "340 m²", name: "Mountain Lodge", image: "/projects/house-05.jpg", span: "col-span-2" }, { id: 6, size: "380 m²", name: "Coastal Living", image: "/projects/house-06.jpg", span: "col-span-2" }, { id: 7, size: "340 m²", name: "City Sanctuary", image: "/projects/house-07.jpg", span: "col-span-2" }, { id: 8, size: "360 m²", name: "Garden Oasis", image: "/projects/house-08.jpg", span: "col-span-2" }, { id: 9, size: "340 m²", name: "Lake House", image: "/projects/house-09.jpg", span: "col-span-2" }, ] export function ProjectsGrid() { return (

All House Projects

2008 / 2018

{projects.map((project) => (

{project.name &&

{project.name}

} {project.year &&

{project.year}

}

{project.size}

))}

Exclusive Projects

Premium Projects

{projects.slice(0, 4).map((project) => (

{project.size}

))}

Residential Reconstructions

{projects.slice(4, 8).map((project) => (

{project.size}

))}

) } [V0_FILE]typescriptreact:file="app/contacts/page.tsx" isMerged="true" import { Header } from "@/components/header" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Mail, Phone, MapPin } from "lucide-react" export default function ContactsPage() { return (

Contact Us

Ready to start your dream project? Get in touch with our team

Send Us a Message

Full Name

Email Address

Phone Number

Your Message

</div>
                <Button className="w-full bg-amber-500 hover:bg-amber-600 text-white py-6 text-lg">Send Message</Button>
              </form>
            </div>

<div>
              <h2 className="text-2xl font-bold text-white mb-8">Contact Information</h2>
              <div className="space-y-8">
                <div className="flex gap-4">
                  <div className="w-12 h-12 rounded-lg bg-amber-500/20 flex items-center justify-center flex-shrink-0">
                    <Phone className="w-6 h-6 text-amber-500" />
                  </div>
                  <div>
                    <h3 className="text-white font-semibold mb-2">Phone</h3>
                    <p className="text-white/70">+7 (495) 123-45-67</p>
                    <p className="text-white/70">+7 (495) 123-45-68</p>
                  </div>
                </div>

<div className="flex gap-4">
                  <div className="w-12 h-12 rounded-lg bg-amber-500/20 flex items-center justify-center flex-shrink-0">
                    <Mail className="w-6 h-6 text-amber-500" />
                  </div>
                  <div>
                    <h3 className="text-white font-semibold mb-2">Email</h3>
                    <p className="text-white/70">info@newhouse.com</p>
                    <p className="text-white/70">projects@newhouse.com</p>
                  </div>
                </div>

<div className="flex gap-4">
                  <div className="w-12 h-12 rounded-lg bg-amber-500/20 flex items-center justify-center flex-shrink-0">
                    <MapPin className="w-6 h-6 text-amber-500" />
                  </div>
                  <div>
                    <h3 className="text-white font-semibold mb-2">Office</h3>
                    <p className="text-white/70">
                      Tverskaya Street, 15
                      <br />
                      Moscow, 125009
                      <br />
                      Russia
                    </p>
                  </div>
                </div>
              </div>

<div className="mt-12 p-8 bg-white/5 rounded-lg border border-white/10">
                <h3 className="text-white font-semibold mb-4">Office Hours</h3>
                <div className="space-y-2 text-white/70">
                  <div className="flex justify-between">
                    <span>Monday - Friday</span>
                    <span>9:00 AM - 6:00 PM</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Saturday</span>
                    <span>10:00 AM - 4:00 PM</span>
                  </div>
                  <div className="flex justify-between">
                    <span>Sunday</span>
                    <span>Closed</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true"
import Link from "next/link"
import { Mail, Phone, MapPin } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-black border-t border-white/10">
      <div className="container mx-auto px-6 py-16">
        <div className="grid grid-cols-4 gap-12 mb-12">
          <div>
            <h3 className="text-white text-xl font-semibold mb-4">New House</h3>
            <p className="text-white/60 text-sm leading-relaxed">
              Creating exceptional architectural designs since 2008. Transforming visions into reality.
            </p>
          </div>

<div>
            <h4 className="text-white font-semibold mb-4">Quick Links</h4>
            <div className="space-y-3">
              <Link href="/" className="block text-white/60 hover:text-white transition-colors text-sm">
                Home
              </Link>
              <Link href="/about" className="block text-white/60 hover:text-white transition-colors text-sm">
                About
              </Link>
              <Link href="/projects" className="block text-white/60 hover:text-white transition-colors text-sm">
                Projects
              </Link>
              <Link href="/contacts" className="block text-white/60 hover:text-white transition-colors text-sm">
                Contacts
              </Link>
            </div>
          </div>

<div>
            <h4 className="text-white font-semibold mb-4">Services</h4>
            <div className="space-y-3">
              <div className="text-white/60 text-sm">Architectural Design</div>
              <div className="text-white/60 text-sm">Interior Design</div>
              <div className="text-white/60 text-sm">Reconstruction</div>
              <div className="text-white/60 text-sm">Consultation</div>
            </div>
          </div>

<div>
            <h4 className="text-white font-semibold mb-4">Contact</h4>
            <div className="space-y-3">
              <div className="flex items-center gap-2 text-white/60 text-sm">
                <Phone className="w-4 h-4" />
                <span>+7 (495) 123-45-67</span>
              </div>
              <div className="flex items-center gap-2 text-white/60 text-sm">
                <Mail className="w-4 h-4" />
                <span>info@newhouse.com</span>
              </div>
              <div className="flex items-center gap-2 text-white/60 text-sm">
                <MapPin className="w-4 h-4" />
                <span>Moscow, Russia</span>
              </div>
            </div>
          </div>
        </div>

<div className="border-t border-white/10 pt-8">
          <div className="flex items-center justify-between">
            <p className="text-white/40 text-sm">© 2026 New House. All rights reserved.</p>
            <div className="flex gap-6">
              <Link href="#" className="text-white/40 hover:text-white transition-colors text-sm">
                Privacy Policy
              </Link>
              <Link href="#" className="text-white/40 hover:text-white transition-colors text-sm">
                Terms of Service
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { HeroSection } from "@/components/hero-section"
import { ProjectsGrid } from "@/components/projects-grid"
import { Footer } from "@/components/footer"

export default function Home() {
  return (
    <div className="min-h-screen bg-[#0a0a0a]">
      <Header />
      <HeroSection />
      <ProjectsGrid />
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/about/layout.tsx" isMerged="true"
import type React from "react"
import { Footer } from "@/components/footer"

export default function AboutLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      {children}
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/projects/layout.tsx" isMerged="true"
import type React from "react"
import { Footer } from "@/components/footer"

export default function ProjectsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      {children}
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/contacts/layout.tsx" isMerged="true"
import type React from "react"
import { Footer } from "@/components/footer"

export default function ContactsLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      {children}
      <Footer />
    </>
  )
}
[V0_FILE]jpg:file="public/projects/house-01.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-01-LeN022HQQy3t49gnJxDKKABfsMMKrI.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-02.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-02-R8i64BMKNbsr7h7YF1cbah0UVX9bon.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-03.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-03-8lN1PQjBqBUn3NnbsPJXTvUzFQtmPS.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-04.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-04-oBqhN6NPGwjWSKdpzBi39aFuxsiF2z.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-05.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-05-tDtqsf0vPhuUIQBSJ8Rz5O2L4vp2CX.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-06.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-06-KqUfXoEdhi784t1nSCP2jXo9QNR5of.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-07.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-07-ktxbVQDh5oYsqLvr2ZtwiSCmQm8sF6.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-08.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-08-5evC1N9nezsYAhO8I9WO5jANEblNVj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-09.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-09-9KLwSJDRUFvTcloC9rXSeOSw8wksdt.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-10.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-10-EOcF6rZI3MnID1vtE6ajYiA9JsXDxs.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-11.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-11-D4ddCl8JIWl67p3fJnUyKoHvvi2qL7.jpg" isMerged="true"
[V0_FILE]jpg:file="public/projects/house-12.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/projects/house-12-fwrm5Jxo6qduITP2Hh7OoHG6mrLLWS.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hero/main-house.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hero/main-house-Bk9PH8m5CnHTiiuzilCBJ1Lub0JFio.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hero/house-background-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hero/house-background-1-eeIryGa462wa4R5vkriYo5ZzKQHR2i.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hero/house-background-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hero/house-background-2-cExawRUzNBy2OGlUTnXQ92rLc4KC3d.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Header } from "@/components/header"
import Image from "next/image"
import { Button } from "@/components/ui/button"

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-[#0a0a0a]">
      <Header />

<section className="pt-32 pb-16">
        <div className="container mx-auto px-6">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-2 h-8 bg-amber-500"></div>
            <h1 className="text-5xl font-bold text-white">About New House</h1>
          </div>

<div className="grid grid-cols-2 gap-16 mb-20">
            <div className="space-y-6">
              <p className="text-white/80 text-lg leading-relaxed">
                New House is a leading architectural design studio specializing in contemporary residential projects.
                With over 15 years of experience, we have created more than 600 unique living spaces that blend
                innovation with timeless elegance.
              </p>
              <p className="text-white/80 text-lg leading-relaxed">
                Our team of talented architects and designers work closely with clients to transform their vision into
                reality. We believe that every home should be a masterpiece, reflecting the personality and lifestyle of
                its inhabitants.
              </p>
            </div>
            <div className="relative h-[400px] rounded-lg overflow-hidden">
              <Image src="/about/studio.jpg" alt="Our studio" fill className="object-cover" />
            </div>
          </div>

<div className="grid grid-cols-3 gap-8 mb-20">
            <div className="bg-white/5 p-8 rounded-lg border border-white/10">
              <div className="text-4xl font-bold text-amber-500 mb-3">15+</div>
              <div className="text-white text-xl mb-2">Years of Experience</div>
              <p className="text-white/60 text-sm">Creating exceptional architectural designs since 2008</p>
            </div>
            <div className="bg-white/5 p-8 rounded-lg border border-white/10">
              <div className="text-4xl font-bold text-amber-500 mb-3">611</div>
              <div className="text-white text-xl mb-2">Designed Properties</div>
              <p className="text-white/60 text-sm">From concept to completion, each project tells a unique story</p>
            </div>
            <div className="bg-white/5 p-8 rounded-lg border border-white/10">
              <div className="text-4xl font-bold text-amber-500 mb-3">291</div>
              <div className="text-white text-xl mb-2">Completed Projects</div>
              <p className="text-white/60 text-sm">Successfully delivered homes across multiple regions</p>
            </div>
          </div>

<div className="mb-20">
            <h2 className="text-3xl font-bold text-white mb-8">Our Philosophy</h2>
            <div className="grid grid-cols-2 gap-12">
              <div>
                <h3 className="text-xl font-semibold text-white mb-4">Innovation & Sustainability</h3>
                <p className="text-white/70 leading-relaxed">
                  We integrate cutting-edge design with sustainable practices, ensuring that our projects are not only
                  beautiful but also environmentally responsible.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold text-white mb-4">Client-Centered Approach</h3>
                <p className="text-white/70 leading-relaxed">
                  Your vision guides our work. We collaborate closely with clients throughout the design process,
                  ensuring every detail reflects their unique preferences and needs.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold text-white mb-4">Quality & Craftsmanship</h3>
                <p className="text-white/70 leading-relaxed">
                  From initial sketches to final execution, we maintain the highest standards of quality, working with
                  skilled craftsmen who share our commitment to excellence.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold text-white mb-4">Timeless Design</h3>
                <p className="text-white/70 leading-relaxed">
                  We create homes that stand the test of time, combining contemporary aesthetics with enduring
                  architectural principles that remain relevant for generations.
                </p>
              </div>
            </div>
          </div>

<div className="text-center">
            <h2 className="text-3xl font-bold text-white mb-6">Ready to Start Your Project?</h2>
            <p className="text-white/70 text-lg mb-8 max-w-2xl mx-auto">
              Let's collaborate to bring your dream home to life. Our team is ready to guide you through every step of
              the design process.
            </p>
            <Button className="bg-amber-500 hover:bg-amber-600 text-white px-8 py-6 text-lg">
              Schedule a Consultation
            </Button>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]jpg:file="public/about/studio.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/about/studio-6ZflYsgt0R4LdeFU1VjU66DZg2X05w.jpg" isMerged="true"
[V0_FILE]jpg:file="public/about/team.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/about/team-5kNlVilNUYCHK9IYQXlNBu8Y61CVgR.jpg" isMerged="true"
[V0_FILE]jpg:file="public/contacts/office-exterior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/contacts/office-exterior-mW38pZpNxSEMCDBtyXZgBn3Fo2hWCJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/contacts/office-interior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/contacts/office-interior-vGxBa4539Sk1HJCW5Ps7MobAkQAjeS.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/projects/page.tsx" isEdit="true" isMerged="true"
import { Header } from "@/components/header"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"

const allProjects = [
  {
    id: 1,
    name: "Scandinavia 150",
    location: "Moscow",
    year: "2017",
    size: "320 m²",
    type: "Exclusive",
    image: "/projects/house-01.jpg",
  },
  {
    id: 2,
    name: "Urban Villa",
    location: "St. Petersburg",
    year: "2018",
    size: "450 m²",
    type: "Premium",
    image: "/projects/house-02.jpg",
  },
  {
    id: 3,
    name: "Forest Retreat",
    location: "Sochi",
    year: "2019",
    size: "290 m²",
    type: "Exclusive",
    image: "/projects/house-03.jpg",
  },
  {
    id: 4,
    name: "Riverside Estate",
    location: "Kazan",
    year: "2020",
    size: "400 m²",
    type: "Premium",
    image: "/projects/house-04.jpg",
  },
  {
    id: 5,
    name: "Mountain Lodge",
    location: "Vladivostok",
    year: "2021",
    size: "340 m²",
    type: "Reconstruction",
    image: "/projects/house-05.jpg",
  },
  {
    id: 6,
    name: "Coastal Living",
    location: "Yalta",
    year: "2019",
    size: "380 m²",
    type: "Exclusive",
    image: "/projects/house-06.jpg",
  },
  {
    id: 7,
    name: "City Sanctuary",
    location: "Moscow",
    year: "2022",
    size: "340 m²",
    type: "Premium",
    image: "/projects/house-07.jpg",
  },
  {
    id: 8,
    name: "Garden Oasis",
    location: "Ekaterinburg",
    year: "2020",
    size: "360 m²",
    type: "Reconstruction",
    image: "/projects/house-08.jpg",
  },
  {
    id: 9,
    name: "Lake House",
    location: "Samara",
    year: "2021",
    size: "340 m²",
    type: "Exclusive",
    image: "/projects/house-09.jpg",
  },
  {
    id: 10,
    name: "Hillside Residence",
    location: "Novosibirsk",
    year: "2018",
    size: "420 m²",
    type: "Premium",
    image: "/projects/house-10.jpg",
  },
  {
    id: 11,
    name: "Desert Modern",
    location: "Astrakhan",
    year: "2019",
    size: "310 m²",
    type: "Exclusive",
    image: "/projects/house-11.jpg",
  },
  {
    id: 12,
    name: "Nordic Cabin",
    location: "Murmansk",
    year: "2022",
    size: "280 m²",
    type: "Reconstruction",
    image: "/projects/house-12.jpg",
  },
]

export default function ProjectsPage() {
  return (
    <div className="min-h-screen bg-[#0a0a0a]">
      <Header />

{/* Hero Section */}
      <section className="pt-32 pb-20 relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 right-0 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl"></div>
          <div className="absolute bottom-0 left-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl"></div>
        </div>

<div className="container mx-auto px-6">
          <div className="flex items-center gap-3 mb-4">
            <div className="w-2 h-8 bg-amber-500"></div>
            <h1 className="text-5xl font-bold text-white">Our Projects</h1>
          </div>
          <p className="text-white/60 text-lg mb-12">
            Explore our portfolio of exceptional residential designs and transformations
          </p>

<div className="flex gap-4 mb-16 flex-wrap">
            <Button className="bg-amber-500 hover:bg-amber-600 text-white shadow-lg shadow-amber-500/50 transition-all duration-300">
              All Projects
            </Button>
            <Button
              variant="outline"
              className="bg-white/10 border-white/20 text-white hover:bg-white/20 hover:border-amber-500/50 hover:shadow-lg hover:shadow-amber-500/30 transition-all duration-300"
            >
              Exclusive
            </Button>
            <Button
              variant="outline"
              className="bg-white/10 border-white/20 text-white hover:bg-white/20 hover:border-amber-500/50 hover:shadow-lg hover:shadow-amber-500/30 transition-all duration-300"
            >
              Premium
            </Button>
            <Button
              variant="outline"
              className="bg-white/10 border-white/20 text-white hover:bg-white/20 hover:border-amber-500/50 hover:shadow-lg hover:shadow-amber-500/30 transition-all duration-300"
            >
              Reconstruction
            </Button>
          </div>
        </div>
      </section>

{/* Projects Grid */}
      <section className="pb-16">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-3 gap-6">
            {allProjects.map((project) => (
              <Link
                href={`/projects/${project.id}`}
                key={project.id}
                className="group cursor-pointer overflow-hidden rounded-lg bg-white/5 border border-white/10 hover:border-amber-500/50 transition-all duration-300 transform hover:shadow-2xl hover:shadow-amber-500/20"
              >
                <div className="aspect-[4/3] relative overflow-hidden">
                  <Image
                    src={project.image || "/placeholder.svg"}
                    alt={project.name}
                    fill
                    className="object-cover transition-all duration-700 group-hover:scale-125 group-hover:brightness-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-100 transition-opacity duration-300"></div>
                  <div className="absolute top-4 right-4 bg-amber-500 text-white text-xs px-3 py-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    {project.type}
                  </div>
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-amber-400 transition-colors">
                    {project.name}
                  </h3>
                  <div className="flex items-center justify-between text-white/60 text-sm mb-3 group-hover:text-white/80 transition-colors">
                    <span>{project.location}</span>
                    <span>{project.year}</span>
                  </div>
                  <div className="text-white/80 font-medium group-hover:text-amber-400 transition-colors">
                    {project.size}
                  </div>
                </div>
              </Link>
            ))}
          </div>

{/* Pagination */}
          <div className="flex items-center justify-center gap-4 mt-16">
            <button className="text-white hover:text-amber-400 transition-all duration-300 text-sm font-medium px-3 py-2 rounded-lg hover:bg-amber-500/20">
              01
            </button>
            <button className="text-white/40 hover:text-white transition-all duration-300 text-sm px-3 py-2 rounded-lg hover:bg-white/10">
              02
            </button>
            <button className="text-white/40 hover:text-white transition-all duration-300 text-sm px-3 py-2 rounded-lg hover:bg-white/10">
              03
            </button>
            <button className="text-white/40 hover:text-white transition-all duration-300 text-sm px-3 py-2 rounded-lg hover:bg-white/10">
              04
            </button>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/projects/[id]/layout.tsx" isMerged="true"
import type React from "react"
import { Footer } from "@/components/footer"

export default function ProjectDetailLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      {children}
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/projects/[id]/page.tsx" isEdit="true" isQuickEdit="true"
import { Header } from "@/components/header"
import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { notFound } from "next/navigation"

const projectsData = [
  {
    id: 1,
    name: "Scandinavia 150",
    location: "Moscow",
    year: "2017",
    size: "320 m²",
    type: "Exclusive",
    image: "/projects/house-01.jpg",
    description:
      "A stunning Scandinavian-inspired residence featuring clean lines, minimalist design, and exceptional attention to detail. This project showcases the perfect blend of Nordic aesthetics with modern comfort.",
    features: [
      "Open floor plan with floor-to-ceiling windows",
      "Premium sustainable materials",
      "State-of-the-art smart home integration",
      "Panoramic views",
      "Custom landscaping",
      "Integrated outdoor living spaces",
    ],
    gallery: ["/projects/house-01.jpg", "/projects/house-02.jpg", "/projects/house-03.jpg"],
  },
  {
    id: 2,
    name: "Urban Villa",
    location: "St. Petersburg",
    year: "2018",
    size: "450 m²",
    type: "Premium",
    image: "/projects/house-02.jpg",
    description:
      "A contemporary urban villa featuring sophisticated design and luxury finishes. This residence perfectly balances elegance with functionality in an urban setting.",
    features: [
      "Multi-level design with terraces",
      "Marble and hardwood finishes",
      "Indoor swimming pool",
      "Cinema room",
      "Professional kitchen",
      "Private garage",
    ],
    gallery: ["/projects/house-02.jpg", "/projects/house-03.jpg", "/projects/house-04.jpg"],
  },
  {
    id: 3,
    name: "Forest Retreat",
    location: "Sochi",
    year: "2019",
    size: "290 m²",
    type: "Exclusive",
    image: "/projects/house-03.jpg",
    description:
      "Nestled in nature, this retreat offers a serene escape with breathtaking forest views and seamless indoor-outdoor living.",
    features: [
      "Glass facade with forest views",
      "Spa and sauna facilities",
      "Infinity pool",
      "Natural wood accents",
      "Meditation spaces",
      "Sustainable energy systems",
    ],
    gallery: ["/projects/house-03.jpg", "/projects/house-04.jpg", "/projects/house-05.jpg"],
  },
  {
    id: 4,
    name: "Riverside Estate",
    location: "Kazan",
    year: "2020",
    size: "400 m²",
    type: "Premium",
    image: "/projects/house-04.jpg",
    description:
      "A grand riverside estate with panoramic water views, luxury amenities, and timeless architectural excellence.",
    features: [
      "Riverfront location",
      "Grand entrance hall",
      "Library and study",
      "Guest suites",
      "Private dock access",
      "Wine cellar",
    ],
    gallery: ["/projects/house-04.jpg", "/projects/house-05.jpg", "/projects/house-06.jpg"],
  },
  {
    id: 5,
    name: "Mountain Lodge",
    location: "Vladivostok",
    year: "2021",
    size: "340 m²",
    type: "Reconstruction",
    image: "/projects/house-05.jpg",
    description:
      "A beautifully restored mountain lodge combining rustic charm with modern comfort, offering stunning alpine vistas.",
    features: [
      "Stone and timber construction",
      "Fireplace with mountain views",
      "Large open deck",
      "Hot tub",
      "Game room",
      "Workshop space",
    ],
    gallery: ["/projects/house-05.jpg", "/projects/house-06.jpg", "/projects/house-07.jpg"],
  },
  {
    id: 6,
    name: "Coastal Living",
    location: "Yalta",
    year: "2019",
    size: "380 m²",
    type: "Exclusive",
    image: "/projects/house-06.jpg",
    description:
      "An elegant coastal home with Mediterranean influences, designed to capture the essence of seaside luxury living.",
    features: [
      "Sea-facing balconies",
      "Limestone and marble finishes",
      "Infinity pool overlooking sea",
      "Private beach access",
      "Rooftop lounge",
      "Climate control systems",
    ],
    gallery: ["/projects/house-06.jpg", "/projects/house-07.jpg", "/projects/house-08.jpg"],
  },
  {
    id: 7,
    name: "City Sanctuary",
    location: "Moscow",
    year: "2022",
    size: "340 m²",
    type: "Premium",
    image: "/projects/house-07.jpg",
    description:
      "A tranquil urban sanctuary offering a peaceful retreat from the bustling city, with rooftop gardens and meditation spaces.",
    features: [
      "Green roof technology",
      "Rooftop garden and lounge",
      "Air purification systems",
      "Natural lighting design",
      "Zen garden",
      "Sound-proofing",
    ],
    gallery: ["/projects/house-07.jpg", "/projects/house-08.jpg", "/projects/house-09.jpg"],
  },
  {
    id: 8,
    name: "Garden Oasis",
    location: "Ekaterinburg",
    year: "2020",
    size: "360 m²",
    type: "Reconstruction",
    image: "/projects/house-08.jpg",
    description:
      "A transformed residence featuring lush gardens and outdoor living spaces, creating a verdant oasis in an urban setting.",
    features: [
      "Multi-level gardens",
      "Water features",
      "Outdoor kitchen",
      "Pavilion structures",
      "Native plantings",
      "Irrigation systems",
    ],
    gallery: ["/projects/house-08.jpg", "/projects/house-09.jpg", "/projects/house-01.jpg"],
  },
  {
    id: 9,
    name: "Lake House",
    location: "Samara",
    year: "2021",
    size: "340 m²",
    type: "Exclusive",
    image: "/projects/house-09.jpg",
    description:
      "A lakeside residence with contemporary design and water-inspired aesthetics, offering ultimate waterfront living.",
    features: [
      "Lakefront location",
      "Boat dock",
      "Water sports facilities",
      "Floor-to-ceiling glass",
      "Viewing decks",
      "Guest accommodations",
    ],
    gallery: ["/projects/house-09.jpg", "/projects/house-01.jpg", "/projects/house-02.jpg"],
  },
]

export async function generateStaticParams() {
  return projectsData.map((project) => ({
    id: project.id.toString(),
  }))
}

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const project = projectsData.find((p) => p.id === Number.parseInt(id))

return {
    title: project ? `${project.name} | New House Design` : "Project Not Found",
    description: project?.description || "Project details",
  }
}

export default async function ProjectDetail({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const project = projectsData.find((p) => p.id === Number.parseInt(id))

if (!project) {
    notFound()
  }

return (
    <div className="min-h-screen bg-[#0a0a0a]">
      <Header />

{/* Hero Section */}
      <section className="pt-32 pb-16 relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 right-0 w-96 h-96 bg-amber-500/10 rounded-full blur-3xl"></div>
          <div className="absolute bottom-0 left-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl"></div>
        </div>

<div className="container mx-auto px-6">
          <Link
            href="/projects"
            className="text-amber-400 hover:text-amber-300 transition-colors mb-6 inline-flex items-center gap-2"
          >
            ← Back to Projects
          </Link>

<div className="grid grid-cols-2 gap-12 items-center">
            <div className="animate-fade-in">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-2 h-8 bg-amber-500"></div>
                <h1 className="text-5xl font-bold text-white text-balance">{project.name}</h1>
              </div>

<p className="text-white/70 text-lg mb-8 leading-relaxed">{project.description}</p>

<div className="grid grid-cols-2 gap-6 mb-8">
                <div className="bg-white/5 border border-white/10 rounded-lg p-4 backdrop-blur-sm hover:bg-white/10 transition-all duration-300">
                  <p className="text-white/60 text-sm mb-2">Location</p>
                  <p className="text-white text-lg font-semibold">{project.location}</p>
                </div>
                <div className="bg-white/5 border border-white/10 rounded-lg p-4 backdrop-blur-sm hover:bg-white/10 transition-all duration-300">
                  <p className="text-white/60 text-sm mb-2">Year</p>
                  <p className="text-white text-lg font-semibold">{project.year}</p>
                </div>
                <div className="bg-white/5 border border-white/10 rounded-lg p-4 backdrop-blur-sm hover:bg-white/10 transition-all duration-300">
                  <p className="text-white/60 text-sm mb-2">Size</p>
                  <p className="text-white text-lg font-semibold">{project.size}</p>
                </div>
                <div className="bg-white/5 border border-white/10 rounded-lg p-4 backdrop-blur-sm hover:bg-white/10 transition-all duration-300">
                  <p className="text-white/60 text-sm mb-2">Type</p>
                  <p className="text-amber-400 text-lg font-semibold">{project.type}</p>
                </div>
              </div>
            </div>

{/* Features Section */}
      <section className="py-16 border-t border-white/10">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
            <span className="w-2 h-8 bg-amber-500 rounded"></span>
            Key Features
          </h2>

<div className="grid grid-cols-3 gap-6">
            {project.features.map((feature, index) => (
              <div
                key={index}
                className="bg-white/5 border border-white/10 rounded-lg p-6 backdrop-blur-sm hover:border-amber-500/50 hover:bg-white/10 transition-all duration-300 group"
              >
                <div className="flex items-start gap-4">
                  <div className="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center flex-shrink-0 group-hover:bg-amber-500/40 transition-all duration-300">
                    <span className="text-amber-400 font-bold">✓</span>
                  </div>
                  <p className="text-white/80 group-hover:text-white transition-colors">{feature}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Gallery Section */}
      <section className="py-16">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl font-bold text-white mb-8 flex items-center gap-3">
            <span className="w-2 h-8 bg-amber-500 rounded"></span>
            Project Gallery
          </h2>

<div className="grid grid-cols-3 gap-6">
            {project.gallery.map((image, index) => (
              <div key={index} className="group relative overflow-hidden rounded-lg">
                <div className="absolute -inset-1 bg-gradient-to-r from-amber-500/0 to-orange-500/0 group-hover:from-amber-500/50 group-hover:to-orange-500/50 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-500 -z-10"></div>
                <Image
                  src={image || "/placeholder.svg"}
                  alt={`${project.name} gallery ${index + 1}`}
                  width={400}
                  height={300}
                  className="w-full h-64 object-cover rounded-lg group-hover:scale-110 transition-transform duration-500"
                />
              </div>
            ))}
          </div>
        </div>
      </section>

{/* CTA Section */}
      <section className="py-20 border-t border-white/10">
        <div className="container mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold text-white mb-6">Interested in This Project?</h2>
          <p className="text-white/60 text-lg mb-8 max-w-2xl mx-auto">
            Get in touch with our team to learn more about this project or discuss your own architectural vision.
          </p>
          <Link href="/contacts">
            <Button className="bg-amber-500 hover:bg-amber-600 text-white px-8 py-3 text-lg rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-amber-500/50">
              Contact Us
            </Button>
          </Link>
        </div>
      </section>
    </div>
  )
}</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This