Upload 11 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,275 @@
+import React, { useEffect, useState } from 'react';
+import { PROPERTIES, NAV_LINKS } from './constants';
+import PropertyCard from './components/PropertyCard';
+import AIChat from './components/AIChat';
+import { MenuIcon, ArrowRightIcon } from './components/Icons';
+
+const App: React.FC = () => {
+  const [scrolled, setScrolled] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-sk-light text-sk-dark selection:bg-sk-accent selection:text-white font-sans">
+      {/* Decorative vertical lines for "depth" */}
+      <div className="fixed inset-0 pointer-events-none z-0 flex justify-between px-6 md:px-24 opacity-5">
+        <div className="w-px h-full bg-sk-dark"></div>
+        <div className="w-px h-full bg-sk-dark hidden md:block"></div>
+        <div className="w-px h-full bg-sk-dark hidden lg:block"></div>
+        <div className="w-px h-full bg-sk-dark"></div>
+      </div>
+
+      {/* Navbar */}
+      <nav 
+        className={`fixed top-0 w-full z-40 transition-all duration-500 border-b ${
+          scrolled ? 'bg-white/95 backdrop-blur-md py-4 border-gray-200 shadow-sm' : 'bg-transparent py-8 border-transparent'
+        }`}
+      >
+        <div className="max-w-[1400px] mx-auto px-6 md:px-12 flex justify-between items-center">
+          <div className="text-2xl md:text-3xl font-serif font-bold tracking-tight z-50 relative text-sk-dark">
+            SK<span className="text-sk-accent">.</span>
+          </div>
+
+          {/* Desktop Nav */}
+          <div className="hidden md:flex space-x-12">
+            {NAV_LINKS.map(link => (
+              <a 
+                key={link.label} 
+                href={link.href} 
+                className={`text-xs font-bold uppercase tracking-[0.15em] hover:text-sk-accent transition-colors relative group ${scrolled ? 'text-sk-dark' : 'text-sk-dark md:text-white md:mix-blend-difference'}`}
+              >
+                {link.label}
+                <span className="absolute -bottom-2 left-0 w-0 h-0.5 bg-sk-accent transition-all duration-300 group-hover:w-full"></span>
+              </a>
+            ))}
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button 
+            className={`md:hidden z-50 ${mobileMenuOpen ? 'text-sk-dark' : (scrolled ? 'text-sk-dark' : 'text-white drop-shadow-md')}`}
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            <MenuIcon />
+          </button>
+        </div>
+        
+        {/* Mobile Menu Overlay */}
+        {mobileMenuOpen && (
+          <div className="fixed inset-0 bg-sk-light z-40 flex flex-col justify-center items-center space-y-8 md:hidden animate-fade-in">
+            {NAV_LINKS.map(link => (
+              <a 
+                key={link.label} 
+                href={link.href}
+                onClick={() => setMobileMenuOpen(false)} 
+                className="text-2xl font-serif text-sk-dark hover:text-sk-accent transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+        )}
+      </nav>
+
+      {/* Hero Section */}
+      <header className="relative min-h-screen flex items-center pt-20 overflow-hidden">
+        {/* Hero Background Image */}
+        <div className="absolute top-0 right-0 w-full h-full z-0">
+          <img 
+            src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80&w=1600" 
+            alt="Matinhos Sunset" 
+            className="w-full h-full object-cover"
+          />
+          <div className="absolute inset-0 bg-black/30 md:bg-black/20"></div>
+          {/* Gradient Overlay for Text Readability */}
+          <div className="absolute inset-0 bg-gradient-to-r from-black/60 via-black/30 to-transparent"></div>
+        </div>
+
+        <div className="relative z-10 max-w-[1400px] mx-auto px-6 md:px-12 w-full mt-16 md:mt-0">
+          <div className="max-w-2xl text-white">
+            <div className="inline-block border-l-4 border-sk-accent pl-6 mb-8">
+               <p className="text-xs font-bold uppercase tracking-[0.3em] text-sk-accent mb-2">Matinhos — Paraná</p>
+               <p className="text-sm font-light tracking-wide text-white/90">Av. Paranaguá, 803</p>
+            </div>
+            
+            <h1 className="text-5xl md:text-7xl font-serif leading-[1.1] mb-8 text-shadow">
+              Horizonte <br/>
+              <span className="italic font-light text-sk-gold">Infinito</span>
+            </h1>
+            
+            <p className="text-white/80 font-light text-lg mb-10 leading-relaxed max-w-md border-l border-white/20 pl-6">
+              A SK Imobiliária conecta você ao melhor do litoral. Imóveis de alto padrão onde o luxo encontra a natureza.
+            </p>
+            
+            <a href="#collection" className="inline-flex items-center space-x-4 text-xs font-bold uppercase tracking-widest bg-sk-accent text-white px-10 py-5 hover:bg-white hover:text-sk-dark transition-all duration-300 shadow-2xl shadow-sk-accent/30">
+              <span>Descobrir Imóveis</span>
+              <ArrowRightIcon className="w-4 h-4" />
+            </a>
+          </div>
+        </div>
+        
+        {/* Scroll Indicator */}
+        <div className="absolute bottom-10 left-6 md:left-12 flex items-center gap-4 z-20">
+            <span className="text-[10px] uppercase tracking-widest text-white/80">Explore</span>
+            <div className="w-12 h-px bg-sk-gold"></div>
+        </div>
+      </header>
+
+      {/* Philosophy Section */}
+      <section id="about" className="py-24 md:py-32 relative z-10 bg-sk-dark text-white">
+        <div className="max-w-[1400px] mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 gap-20 items-center">
+          <div>
+            <span className="text-sk-accent text-xs font-bold uppercase tracking-widest mb-4 block">Sobre a SK</span>
+            <h2 className="text-3xl md:text-5xl font-serif mb-8 leading-tight">
+              Elegância em <br/><span className="text-sk-gold italic">Cada Camada</span>
+            </h2>
+            <div className="space-y-6 text-white/60 font-light text-lg leading-relaxed">
+              <p>
+                Localizada estrategicamente na Av. Paranaguá, 803, a SK Imobiliária não vende apenas metros quadrados; curamos estilos de vida à beira-mar.
+              </p>
+              <p>
+                Nossa paleta reflete nossa essência: o preto da profundidade e seriedade dos negócios, o dourado da valorização do seu patrimônio, e o laranja vibrante do pôr do sol de Matinhos.
+              </p>
+            </div>
+            
+            <div className="mt-12 flex gap-12">
+                <div>
+                    <span className="block text-3xl font-serif text-sk-gold">15+</span>
+                    <span className="text-xs uppercase tracking-widest text-white/50">Anos de Litoral</span>
+                </div>
+                <div>
+                    <span className="block text-3xl font-serif text-sk-gold">803</span>
+                    <span className="text-xs uppercase tracking-widest text-white/50">Av. Paranaguá</span>
+                </div>
+            </div>
+          </div>
+          
+          <div className="relative group">
+             <div className="aspect-[4/5] bg-gray-800 overflow-hidden relative z-10 border border-white/10">
+                <img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&q=80&w=800" alt="Interior Design" className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105 opacity-80 group-hover:opacity-100"/>
+             </div>
+             {/* Decorative Layers */}
+             <div className="absolute -bottom-6 -right-6 w-full h-full border border-sk-gold/30 z-0 transition-transform duration-500 group-hover:translate-x-4 group-hover:translate-y-4"></div>
+             <div className="absolute -top-6 -left-6 w-32 h-32 bg-sk-accent/20 z-0 blur-2xl"></div>
+          </div>
+        </div>
+      </section>
+
+      {/* Collection Grid */}
+      <section id="collection" className="py-24 bg-sk-light relative z-10">
+        <div className="max-w-[1400px] mx-auto px-6 md:px-12">
+          <div className="flex flex-col md:flex-row justify-between items-end mb-20 border-b border-gray-200 pb-8">
+            <div>
+              <p className="text-xs uppercase tracking-[0.3em] text-sk-accent mb-2">Portfólio</p>
+              <h2 className="text-4xl md:text-5xl font-serif text-sk-dark">Seleção Exclusiva</h2>
+            </div>
+            <a href="#" className="hidden md:flex items-center gap-2 text-xs uppercase tracking-widest text-sk-dark hover:text-sk-accent transition-colors mt-6 md:mt-0">
+                <span>Ver Todos os Imóveis</span>
+                <ArrowRightIcon className="w-4 h-4" />
+            </a>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
+            {PROPERTIES.map((prop) => (
+              <PropertyCard key={prop.id} property={prop} />
+            ))}
+          </div>
+          
+          <div className="mt-16 text-center md:hidden">
+            <a href="#" className="inline-block bg-sk-dark text-white px-8 py-4 text-xs uppercase tracking-widest hover:bg-sk-accent transition-colors">Ver Todos</a>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section id="services" className="py-32 bg-sk-accent text-white relative overflow-hidden">
+        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
+        <div className="absolute top-0 right-0 w-full h-full bg-gradient-to-l from-black/20 to-transparent"></div>
+        
+        <div className="max-w-4xl mx-auto px-6 text-center relative z-10">
+          <h2 className="text-3xl md:text-5xl font-serif mb-8">Viva o Sonho em Matinhos</h2>
+          <p className="text-white/90 font-light text-lg mb-12 max-w-2xl mx-auto">
+            Seja para investir ou morar, temos a chave para o seu novo horizonte.
+            Visite-nos na Av. Paranaguá, 803.
+          </p>
+          <div className="flex flex-col md:flex-row justify-center gap-6">
+            <button className="bg-sk-dark text-white border border-sk-dark px-10 py-4 text-xs font-bold uppercase tracking-[0.2em] hover:bg-white hover:text-sk-dark transition-all duration-300">
+                Agendar Visita
+            </button>
+            <button className="bg-transparent text-white border border-white px-10 py-4 text-xs font-bold uppercase tracking-[0.2em] hover:bg-white hover:text-sk-accent transition-all duration-300">
+                Falar no WhatsApp
+            </button>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer id="contact" className="bg-sk-dark text-white pt-24 pb-12 border-t border-white/5">
+        <div className="max-w-[1400px] mx-auto px-6 md:px-12">
+          <div className="grid grid-cols-1 md:grid-cols-12 gap-16 md:gap-8">
+            <div className="md:col-span-5 space-y-8">
+              <div className="text-3xl font-serif font-bold tracking-tight text-white">SK<span className="text-sk-accent">.</span></div>
+              <p className="text-sm font-light text-white/60 max-w-sm leading-relaxed">
+                Referência em imobiliária de alto padrão em Matinhos. 
+                Combinamos tradição e modernidade para oferecer as melhores oportunidades do litoral paranaense.
+              </p>
+              <div className="flex gap-4">
+                 <div className="w-10 h-10 border border-white/20 flex items-center justify-center hover:bg-sk-accent hover:border-sk-accent cursor-pointer transition-all duration-300">
+                    <span className="text-xs font-bold">IG</span>
+                 </div>
+                 <div className="w-10 h-10 border border-white/20 flex items-center justify-center hover:bg-sk-accent hover:border-sk-accent cursor-pointer transition-all duration-300">
+                    <span className="text-xs font-bold">FB</span>
+                 </div>
+              </div>
+            </div>
+            
+            <div className="md:col-span-3">
+              <h4 className="text-xs uppercase tracking-widest font-bold text-sk-gold mb-8">Endereço</h4>
+              <address className="not-italic text-sm font-light text-white/70 space-y-4 border-l border-white/10 pl-6">
+                <p className="flex flex-col">
+                    <span className="font-medium text-white">Sede SK</span>
+                    <span>Av. Paranaguá, 803</span>
+                </p>
+                <p>Matinhos - PR</p>
+                <p>CEP 83260-000</p>
+              </address>
+            </div>
+
+            <div className="md:col-span-4">
+              <h4 className="text-xs uppercase tracking-widest font-bold text-sk-gold mb-8">Contato</h4>
+              <ul className="space-y-4 text-sm font-light text-white/70 border-l border-white/10 pl-6">
+                <li className="flex flex-col gap-1">
+                    <span className="text-[10px] uppercase tracking-wider opacity-50">Telefone</span>
+                    <span className="text-white text-lg">(41) 3453-0000</span>
+                </li>
+                <li className="flex flex-col gap-1">
+                    <span className="text-[10px] uppercase tracking-wider opacity-50">Email</span>
+                    <span className="text-white">contato@skimobiliaria.com.br</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          
+          <div className="border-t border-white/5 mt-20 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-white/40 font-light">
+            <p>&copy; 2024 SK Imobiliária. Matinhos - PR.</p>
+            <div className="flex space-x-6 mt-4 md:mt-0">
+                <a href="#" className="hover:text-sk-accent transition-colors">Privacidade</a>
+                <a href="#" className="hover:text-sk-accent transition-colors">Termos</a>
+            </div>
+          </div>
+        </div>
+      </footer>
+
+      {/* AI Assistant Widget */}
+      <AIChat />
+    </div>
+  );
+};
+
+export default App;

constants.ts

@@ -0,0 +1,51 @@
+import { Property } from './types';
+
+export const PROPERTIES: Property[] = [
+  {
+    id: '1',
+    title: 'Cobertura Duplex Caiobá',
+    location: 'Caiobá, Matinhos',
+    price: 'R$ 4.500.000',
+    details: '4 Suítes | 320m²',
+    image: 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80&w=800',
+    category: 'Venda',
+    description: 'Vista panorâmica para o mar. Terraço privativo com piscina aquecida, acabamentos em mármore e área gourmet integrada. Exclusividade na melhor localização de Caiobá.'
+  },
+  {
+    id: '2',
+    title: 'Residência Beira-Mar',
+    location: 'Praia Mansa, Matinhos',
+    price: 'R$ 3.200.000',
+    details: '5 Quartos | 450m²',
+    image: 'https://images.unsplash.com/photo-1600596542815-2004cb539ca9?auto=format&fit=crop&q=80&w=800',
+    category: 'Venda',
+    description: 'Arquitetura contemporânea pé na areia. Jardim tropical, amplas salas de estar e sistema de segurança monitorada. O pôr do sol mais bonito da região.'
+  },
+  {
+    id: '3',
+    title: 'Apartamento Garden Alto Padrão',
+    location: 'Centro, Matinhos',
+    price: 'R$ 1.450.000',
+    details: '3 Suítes | 200m²',
+    image: 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?auto=format&fit=crop&q=80&w=800',
+    category: 'Venda',
+    description: 'O conforto de uma casa com a segurança de um edifício. Amplo terraço garden, churrasqueira privativa e acabamentos quentes em madeira.'
+  },
+  {
+    id: '4',
+    title: 'Edifício Golden Sun (Lançamento)',
+    location: 'Caiobá, Matinhos',
+    price: 'Sob Consulta',
+    details: '3 a 4 Quartos | 150-280m²',
+    image: 'https://images.unsplash.com/photo-1574362848149-11496d93a7c7?auto=format&fit=crop&q=80&w=800',
+    category: 'Venda',
+    description: 'O novo ícone do litoral paranaense. Design biofílico, áreas comuns sofisticadas e vista definitiva para o oceano Atlântico.'
+  }
+];
+
+export const NAV_LINKS = [
+  { label: 'Imóveis', href: '#collection' },
+  { label: 'A SK', href: '#about' },
+  { label: 'Investimentos', href: '#services' },
+  { label: 'Contato', href: '#contact' },
+];

index.html

@@ -1,346 +1,71 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SK Imobiliária</title>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Inter:wght@400&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --cor-quente-principal: #C06C41;
-            --cor-fundo-quente: #F5F0E8;
-            --cor-texto-contraste: #2C2A2A;
-        }
-        body {
-            font-family: 'Inter', sans-serif;
-            color: var(--cor-texto-contraste);
-            background-color: var(--cor-fundo-quente);
-            margin: 0;
-            padding: 0;
-            line-height: 1.7;
-        }
-        header {
-            background-color: var(--cor-quente-principal);
-            color: white;
-            padding: 20px 0;
-            text-align: center;
-        }
-        nav {
-            background-color: var(--cor-fundo-quente);
-            display: flex;
-            justify-content: center;
-            padding: 10px 0;
-        }
-        nav a {
-            color: var(--cor-quente-principal);
-            padding: 14px 20px;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-        nav a:hover {
-            background-color: var(--cor-quente-principal);
-            color: white;
-            text-decoration: underline;
-        }
-        .container {
-            padding: 0 20px;
-        }
-        @media (min-width: 768px) {
-            .container {
-                max-width: 1100px;
-                margin: 0 auto;
-            }
-        }
-        .search-bar {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin-bottom: 80px;
-        }
-        @media (min-width: 768px) {
-            .search-bar {
-                flex-direction: row;
-            }
-        }
-        .search-bar input[type="text"],
-        .search-bar select {
-            padding: 10px;
-            margin-right: 10px;
-            border: 1px solid var(--cor-quente-principal);
-            border-radius: 8px;
-            margin-bottom: 10px;
-        }
-        @media (min-width: 768px) {
-            .search-bar input[type="text"],
-            .search-bar select {
-                margin-bottom: 0;
-            }
-        }
-        .search-bar button {
-            padding: 14px 28px;
-            background-color: var(--cor-quente-principal);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .search-bar button:hover {
-            filter: brightness(1.1);
-        }
-        .featured-properties {
-            display: grid;
-            grid-template-columns: 1fr;
-            gap: 20px;
-            margin-bottom: 80px;
-        }
-        @media (min-width: 768px) {
-            .featured-properties {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-        @media (min-width: 1024px) {
-            .featured-properties {
-                grid-template-columns: repeat(3, 1fr);
-            }
-        }
-        .imovel-card {
-            background-color: #FFFFFF;
-            border-radius: 12px;
-            box-shadow: 0px 8px 24px rgba(44, 42, 42, 0.1);
-            overflow: hidden;
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-        .imovel-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0px 12px 30px rgba(44, 42, 42, 0.15);
-        }
-        .imovel-card img {
-            width: 100%;
-            height: auto;
-        }
-        .imovel-card .details {
-            padding: 20px;
-        }
-        .imovel-card h3 {
-            font-family: 'Poppins', sans-serif;
-            font-weight: 600;
-            margin-bottom: 10px;
-        }
-        .imovel-card p {
-            margin-bottom: 10px;
-        }
-        .imovel-card .price {
-            font-size: 1.2em;
-            color: var(--cor-quente-principal);
-            margin-bottom: 10px;
-        }
-        .imovel-card .btn {
-            background-color: var(--cor-quente-principal);
-            color: white;
-            padding: 14px 28px;
-            border: none;
-            border-radius: 8px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .imovel-card .btn:hover {
-            filter: brightness(1.1);
-        }
-        .contact-form {
-            margin-top: 40px;
-        }
-        .contact-form label {
-            display: block;
-            margin-bottom: 5px;
-        }
-        .contact-form input[type="text"],
-        .contact-form input[type="email"],
-        .contact-form textarea {
-            width: 100%;
-            padding: 10px;
-            margin-bottom: 10px;
-            border: 1px solid var(--cor-quente-principal);
-            border-radius: 8px;
-        }
-        .contact-form button {
-            padding: 14px 28px;
-            background-color: var(--cor-quente-principal);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .contact-form button:hover {
-            filter: brightness(1.1);
-        }
-        footer {
-            background-color: var(--cor-quente-principal);
-            color: white;
-            text-align: center;
-            padding: 20px 0;
-            position: fixed;
-            width: 100%;
-            bottom: 0;
-        }
-        footer a {
-            color: white;
-            margin: 0 10px;
-            text-decoration: none;
-            transition: all 0.3s ease;
-        }
-        footer a:hover {
-            text-decoration: underline;
-        }
-        section {
-            padding-top: 80px;
-            padding-bottom: 80px;
-        }
-        .about-content {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        @media (min-width: 768px) {
-            .about-content {
-                flex-direction: row;
-                justify-content: space-between;
-            }
-        }
-        .about-content img {
-            max-width: 100%;
-            border-radius: 12px;
-            margin-bottom: 20px;
-        }
-        @media (min-width: 768px) {
-            .about-content img {
-                max-width: 48%;
-                margin-bottom: 0;
-            }
-        }
-        .about-content p {
-            max-width: 100%;
-        }
-        @media (min-width: 768px) {
-            .about-content p {
-                max-width: 48%;
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SK Imobiliária | Matinhos - PR</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ['Inter', 'sans-serif'],
+              serif: ['Playfair Display', 'serif'],
+            },
+            colors: {
+              sk: {
+                dark: '#0F0F0F',    /* Pure Black/Charcoal - Profundidade */
+                gold: '#D4AF37',    /* Metallic Gold - Luxo */
+                light: '#FFFCF8',   /* Warm White - Leveza */
+                accent: '#E65100',  /* Burnt Orange - Calor/Destaque */
+                gray: '#52525B',    /* Zinc Gray - Texto Secundário */
+              }
             }
+          }
         }
+      }
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
+    <style>
+      body {
+        background-color: #FFFCF8; /* sk-light */
+        color: #0F0F0F; /* sk-dark */
+      }
+      .glass {
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+      }
+      /* Custom scrollbar */
+      ::-webkit-scrollbar {
+        width: 6px;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #E65100;
+        border-radius: 3px;
+      }
+      .text-shadow {
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+      }
     </style>
+  <script type="importmap">
+{
+  "imports": {
+    "@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
 </head>
-<body>
-    <header>
-        <h1>SK Imobiliária</h1>
-        <p>Av. Paranaguá, 803, Matinhos - PR</p>
-    </header>
-    <nav>
-        <a href="#home">Home</a>
-        <a href="#properties">Imóveis</a>
-        <a href="#about">Sobre Nós</a>
-        <a href="#contact">Contato</a>
-    </nav>
-    <div class="container">
-        <section id="home">
-            <div class="search-bar">
-                <input type="text" placeholder="Buscar...">
-                <select>
-                    <option value="comprar">Comprar</option>
-                    <option value="alugar">Alugar</option>
-                </select>
-                <select>
-                    <option value="cidade">Cidade</option>
-                    <option value="bairro">Bairro</option>
-                </select>
-                <select>
-                    <option value="casa">Casa</option>
-                    <option value="apartamento">Apartamento</option>
-                </select>
-                <select>
-                    <option value="preco">Faixa de Preço</option>
-                </select>
-                <select>
-                    <option value="quartos">Número de Quartos</option>
-                </select>
-                <button>Pesquisar</button>
-            </div>
-            <section class="featured-properties">
-                <div class="imovel-card">
-                    <img src="https://via.placeholder.com/300x200" alt="Imóvel 1">
-                    <div class="details">
-                        <h3>Imóvel 1</h3>
-                        <p class="price">R$ 500.000</p>
-                        <p>Casa, 3 quartos, 2 banheiros</p>
-                        <button class="btn" onclick="showPropertyDetails()">Ver detalhes</button>
-                    </div>
-                </div>
-                <div class="imovel-card">
-                    <img src="https://via.placeholder.com/300x200" alt="Imóvel 2">
-                    <div class="details">
-                        <h3>Imóvel 2</h3>
-                        <p class="price">R$ 350.000</p>
-                        <p>Apartamento, 2 quartos, 1 banheiro</p>
-                        <button class="btn" onclick="showPropertyDetails()">Ver detalhes</button>
-                    </div>
-                </div>
-                <div class="imovel-card">
-                    <img src="https://via.placeholder.com/300x200" alt="Imóvel 3">
-                    <div class="details">
-                        <h3>Imóvel 3</h3>
-                        <p class="price">R$ 700.000</p>
-                        <p>Casa, 4 quartos, 3 banheiros</p>
-                        <button class="btn" onclick="showPropertyDetails()">Ver detalhes</button>
-                    </div>
-                </div>
-            </section>
-        </section>
-        <section id="properties">
-            <h2>Resultados da Busca</h2>
-            <!-- Aqui viriam os resultados da busca -->
-        </section>
-        <section id="about">
-            <h2>Sobre Nós</h2>
-            <div class="about-content">
-                <img src="https://via.placeholder.com/500x300" alt="Sobre Nós">
-                <p>Bem-vindo à SK Imobiliária, sua parceira confiável no mercado imobiliário. Fundada com o objetivo de fornecer soluções imobiliárias de qualidade, nossa equipe especializada está pronta para ajudar você a encontrar seu próximo lar ou investimento ideal.</p>
-            </div>
-        </section>
-        <section id="contact">
-            <h2>Contato</h2>
-            <p>Telefone: (41) 99999-9999</p>
-            <p>E-mail: contato@skimobiliaria.com</p>
-            <p>Endereço: Av. Paranaguá, 803, Matinhos - PR</p>
-            <div class="contact-form">
-                <form>
-                    <label for="name">Nome:</label>
-                    <input type="text" id="name" name="name" required>
-                    <label for="email">E-mail:</label>
-                    <input type="email" id="email" name="email" required>
-                    <label for="message">Mensagem:</label>
-                    <textarea id="message" name="message" rows="4" required></textarea>
-                    <button type="submit">Enviar</button>
-                </form>
-            </div>
-        </section>
-    </div>
-    <footer>
-        <p>&copy; 2023 SK Imobiliária. Todos os direitos reservados.</p>
-        <p><a href="#home">Home</a> | <a href="#properties">Imóveis</a> | <a href="#about">Sobre Nós</a> | <a href="#contact">Contato</a></p>
-    </footer>
-    <script>
-        function showPropertyDetails() {
-            alert('Detalhes do imóvel');
-            // Aqui seria o código para abrir a página de detalhes do imóvel
-        }
-    </script>
+  <body>
+    <div id="root"></div>
+  <script type="module" src="/index.tsx"></script>
 </body>
 </html>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Copy of SK Imobiliária",
+  "description": "Imóveis exclusivos e atendimento de excelência em Matinhos, PR.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "copy-of-sk-imobiliária",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@google/genai": "^1.30.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,22 @@
+export interface Property {
+  id: string;
+  title: string;
+  location: string;
+  price: string;
+  details: string; // e.g., "4 Quartos | 350m²"
+  image: string;
+  category: 'Venda' | 'Aluguel';
+  description: string;
+}
+
+export interface ChatMessage {
+  role: 'user' | 'model';
+  text: string;
+  timestamp: Date;
+}
+
+export enum ViewState {
+  HOME = 'HOME',
+  PROPERTIES = 'PROPERTIES',
+  DETAILS = 'DETAILS'
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});