Site web portfolio HTML/CSS : Navigation, En-tête, Projets

390 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Site web portfolio HTML/CSS : Navigation, En-tête, Projets

Recommandé

27 January 2026

Site Web

28 May 2026

Chargeur de jeu Unity WebGL avec intégration Firebase

12 December 2025

Site web portfolio cinématographique avec Tailwind CSS et GSAP

HTML

<main class="w-full max-w-[1400px] bg-[#F3F3F1] rounded-[2.5rem] shadow-2xl relative flex flex-col overflow-hidden">
        
        
        <header class="flex lg:px-12 pt-8 pr-8 pb-8 pl-8 items-center justify-between">
            <div class="flex items-center gap-1 group cursor-pointer logo-bars">
                <div class="h-6 w-2 bg-black rounded-full transition-all bar"></div>
                <div class="h-6 w-2 bg-black rounded-full transition-all bar"></div>
                <div class="h-6 w-2 bg-black rounded-full transition-all bar"></div>
            </div>

<nav class="hidden lg:flex items-center gap-10">
                <a href="#" class="nav-link text-[0.7rem] font-medium uppercase tracking-[0.2em] text-gray-500 hover:text-black transition-colors">Soluções</a>
                <a href="#" class="nav-link text-[0.7rem] font-medium uppercase tracking-[0.2em] text-gray-500 hover:text-black transition-colors">Sobre</a>
                <a href="#" class="nav-link text-[0.7rem] font-medium uppercase tracking-[0.2em] text-gray-500 hover:text-black transition-colors">Docs</a>
                <a href="#" class="nav-link text-[0.7rem] font-medium uppercase tracking-[0.2em] text-gray-500 hover:text-black transition-colors">Preços</a>
            </nav>

<div class="flex items-center gap-4">
                <button class="hidden sm:flex items-center gap-2 text-[0.7rem] font-medium uppercase tracking-widest text-gray-500 hover:text-black transition-colors px-4 py-2 rounded-full hover:bg-gray-200">
                    Login <i data-lucide="arrow-right" class="w-3 h-3"></i>
                </button>
                <button class="flex items-center gap-2 bg-[#1A1A1A] text-white text-[0.7rem] font-medium uppercase tracking-widest px-6 py-3 rounded-full hover:bg-black hover:scale-105 transition-all shadow-lg shadow-gray-300/50">
                    Começar <i data-lucide="arrow-up-right" class="w-3 h-3"></i>
                </button>
            </div>
        </header>

<div class="grid grid-cols-1 lg:grid-cols-2 lg:min-h-[70vh]">
            
            <div class="relative flex flex-col justify-center px-8 pb-12 pt-4 lg:px-12 xl:px-20 z-10">
                <p class="text-[0.65rem] font-semibold uppercase tracking-[0.25em] text-gray-400 mb-6">
                    Engenharia de Automação & IA
                </p>

<div class="relative mb-6">
                    <h1 class="text-7xl lg:text-8xl xl:text-9xl font-semibold tracking-tighter leading-[0.85] text-[#0A0A0A]">
                        ERIC<br>MARTINS
                    </h1>
                    <div class="badge absolute -bottom-4 left-0 lg:left-2 inline-flex items-center gap-2 bg-black text-white px-4 py-2 rounded-full transform -rotate-2 hover:rotate-0 transition-transform cursor-default z-20 shadow-xl">
                        <span class="text-[0.65rem] font-bold uppercase tracking-widest">IA & Automação</span>
                    </div>
                </div>

<div class="mt-8 max-w-lg">
                    <h2 class="text-xl font-medium tracking-tight text-gray-900 mb-4 leading-snug">
                        Faço a tecnologia trabalhar com você utilizando <span class="text-blue-600">inteligência artificial</span> e automações inteligentes.
                    </h2>
                    <p class="text-base text-gray-500 leading-relaxed font-normal mb-8">
                        Desenvolvo soluções sob medida que conectam dados, sistemas e pessoas, reduzindo tarefas manuais e liberando tempo para o que realmente importa no seu negócio.
                    </p>
                </div>
            </div>

<div class="hero-image relative h-[50vh] lg:h-auto overflow-hidden lg:rounded-tl-[4rem] group">
                <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f19dfb02-82d5-4170-806d-50bd89fd4e1a_1600w.png" alt="Futuristic Portrait" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                <div class="bg-gradient-to-t to-transparent from-blue-900/40 mix-blend-overlay absolute top-0 right-0 bottom-0 left-0"></div>
                <div class="absolute top-1/2 left-8 lg:left-12 transform -translate-y-1/2">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full border border-white/30 backdrop-blur-md text-white/80 animate-pulse">
                        <i data-lucide="cpu" class="w-5 h-5"></i>
                    </div>
                </div>
                <div class="absolute bottom-12 right-8 lg:right-12">
                    <div class="px-4 py-2 rounded-full border border-white/40 bg-white/10 backdrop-blur-xl text-white text-[0.6rem] font-semibold uppercase tracking-widest hover:bg-white/20 transition-colors cursor-default">
                        Otimizado
                    </div>
                </div>
                <div class="transform backdrop-blur-[2px] w-16 h-16 border-blue-400/50 border rounded-lg mx-28 absolute top-1/3 right-1/4 rotate-12"></div>
            </div>
        </div>

<section class="p-4 lg:p-8">
            <div class="manifesto relative w-full rounded-[2rem] bg-[#08090A] border border-white/5 overflow-hidden px-6 py-20 md:px-16 md:py-28 text-center group">
                
                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-4xl h-96 bg-blue-600/10 blur-[120px] rounded-full pointer-events-none opacity-60 group-hover:opacity-80 transition-opacity duration-1000"></div>
                <div class="noise-overlay absolute inset-0 opacity-20 brightness-100 contrast-150 mix-blend-soft-light pointer-events-none"></div>

<div class="relative z-10 max-w-5xl mx-auto flex flex-col items-center">
                    <h3 class="text-3xl md:text-4xl lg:text-5xl font-medium tracking-tight text-white leading-[1.15] mb-8">
                        Apaixonado por <span class="text-blue-400">IA</span> e por transformar <span class="text-blue-400">boas ideias</span> em negócios que resolvem <span class="text-blue-400">problemas reais</span>.
                    </h3>
                    <p class="text-lg md:text-2xl font-normal text-gray-400 leading-relaxed max-w-4xl mb-16">
                        Vejo cada projeto como um laboratório: testo, erro rápido, ajusto a rota e crio <span class="text-gray-200">soluções digitais</span> que refletem tanto a personalidade da marca quanto a necessidade do usuário.
                    </p>

<div class="flex flex-col items-center gap-8">
                        <div class="text-center">
                            <p class="text-white font-medium text-sm tracking-wide">Eric Martins</p>
                            <p class="text-gray-500 text-[0.65rem] uppercase tracking-widest mt-1.5 font-semibold">Founder & Lead Engineer</p>
                        </div>

<section class="lg:px-16 xl:px-24 pt-8 pr-8 pb-20 pl-8">
            
            <div class="flex flex-col gap-2 mb-16">
                <span class="text-[0.65rem] font-semibold uppercase tracking-[0.25em] text-gray-400">Portfolio</span>
                <h2 class="text-3xl font-medium tracking-tight text-gray-900">Projetos Selecionados</h2>
            </div>

<div class="group grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
                    <div class="project-card aspect-square lg:aspect-[4/3] overflow-hidden flex bg-gray-200 w-full rounded-[2.5rem] relative shadow-inner items-center justify-center">
                        <div class="absolute top-[-20%] left-[-20%] w-[70%] h-[70%] bg-blue-500 rounded-full blur-3xl opacity-20"></div>
                        <div class="overflow-hidden transform group-hover:scale-[1.02] transition-transform duration-500 bg-gray-800 w-[90%] h-[90%] border-blue-600 border-8 rounded-[2rem] relative shadow-2xl">
                            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/368a2d0d-5a86-482f-98da-8690df783534_800w.png" class="opacity-90 w-full h-full object-cover" alt="Genius Software House">
                        </div>
                    </div>
                    <div class="flex flex-col justify-center items-start lg:pr-12">
                        <h3 class="text-4xl lg:text-5xl font-medium tracking-tight text-gray-900 mb-6">Genius Software House</h3>
                        <p class="text-lg text-gray-500 leading-relaxed font-normal mb-8 max-w-lg">
                            Desenvolvimento de software de alta performance sob medida para grandes empresas. Focamos em escalabilidade, segurança e em criar ecossistemas digitais robustos que impulsionam o crescimento.
                        </p>
                        <a href="#" class="project-btn inline-flex items-center gap-3 bg-black text-white px-8 py-4 rounded-full text-xs font-medium uppercase tracking-widest hover:bg-gray-800 hover:scale-105 transition-all shadow-xl shadow-gray-200">
                            <i data-lucide="folder" class="w-4 h-4"></i> Ver Projeto
                        </a>
                    </div>
                </div>

<div class="group grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
                    <div class="project-card relative w-full aspect-square lg:aspect-[4/3] bg-gray-200 rounded-[2.5rem] overflow-hidden flex items-center justify-center shadow-inner">
                        <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-red-500 rounded-full blur-3xl opacity-20"></div>
                        <div class="overflow-hidden transform group-hover:translate-y-[-10px] transition-transform duration-500 bg-gray-100 w-[90%] h-[85%] border-orange-600 border-8 rounded-[2.5rem] relative shadow-2xl">
                            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/700e821c-a759-471f-b5aa-3904819cd7a4_800w.png" class="w-full h-full object-cover" alt="Pede Mais">
                        </div>
                    </div>
                    <div class="flex flex-col justify-center items-start lg:pr-12">
                        <h3 class="text-4xl lg:text-5xl font-medium tracking-tight text-gray-900 mb-6">Pede Mais</h3>
                        <p class="text-lg text-gray-500 leading-relaxed font-normal mb-8 max-w-lg">
                            Plataforma completa de delivery e gestão de pedidos que conecta restaurantes aos seus clientes de forma intuitiva. Interface otimizada para conversão e gestão de logística em tempo real.
                        </p>
                        <a href="#" class="project-btn inline-flex items-center gap-3 bg-black text-white px-8 py-4 rounded-full text-xs font-medium uppercase tracking-widest hover:bg-gray-800 hover:scale-105 transition-all shadow-xl shadow-gray-200">
                            <i data-lucide="folder" class="w-4 h-4"></i> Ver Projeto
                        </a>
                    </div>
                </div>

<div class="group grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
                    <div class="project-card aspect-square lg:aspect-[4/3] overflow-hidden flex bg-gray-200 w-full rounded-[2.5rem] relative shadow-inner items-center justify-center">
                        <div class="absolute top-[20%] right-[20%] w-[50%] h-[50%] bg-purple-500 rounded-full blur-3xl opacity-20"></div>
                        <div class="overflow-hidden transform group-hover:scale-[1.02] transition-transform duration-500 flex flex-col bg-white w-[100%] h-[70%] border-gray-200 border-4 rounded-[1.5rem] relative shadow-xl">
                            <div class="browser-bar flex gap-1 bg-gray-100 h-6 border-gray-200 border-b px-4 items-center">
                                <div class="w-2 h-2 rounded-full bg-red-400"></div>
                                <div class="w-2 h-2 rounded-full bg-yellow-400"></div>
                                <div class="w-2 h-2 rounded-full bg-green-400"></div>
                            </div>
                            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f10c0f7f-f93f-414f-b443-901483541c4e_1600w.png" class="w-full h-full object-cover" alt="AskGenius">
                        </div>
                    </div>
                    <div class="flex flex-col justify-center items-start lg:pr-12">
                        <h3 class="text-4xl lg:text-5xl font-medium tracking-tight text-gray-900 mb-6">AskGenius</h3>
                        <p class="text-lg text-gray-500 leading-relaxed font-normal mb-8 max-w-lg">
                            Solução de IA conversacional para suporte e vendas. Utiliza modelos de linguagem avançados para entender o contexto do cliente e oferecer respostas precisas 24/7, reduzindo custos operacionais.
                        </p>
                        <a href="#" class="project-btn inline-flex items-center gap-3 bg-black text-white px-8 py-4 rounded-full text-xs font-medium uppercase tracking-widest hover:bg-gray-800 hover:scale-105 transition-all shadow-xl shadow-gray-200">
                            <i data-lucide="folder" class="w-4 h-4"></i> Ver Projeto
                        </a>
                    </div>
                </div>

<div class="group grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
                    <div class="project-card relative w-full aspect-square lg:aspect-[4/3] bg-gray-200 rounded-[2.5rem] overflow-hidden flex items-center justify-center shadow-inner">
                        <div class="absolute bottom-0 left-0 w-full h-[60%] bg-gradient-to-t from-green-500/10 to-transparent"></div>
                        <div class="overflow-hidden transform group-hover:rotate-0 transition-transform duration-500 bg-gray-100 w-[45%] h-[85%] border-green-500 border-8 rounded-[2.5rem] relative shadow-2xl rotate-[-6deg]">
                            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a81e27d9-fb60-44f7-a480-7888d729d525_800w.jpg" class="w-full h-full object-cover" alt="ZapCash">
                        </div>
                    </div>
                    <div class="flex flex-col justify-center items-start lg:pr-12">
                        <h3 class="text-4xl lg:text-5xl font-medium tracking-tight text-gray-900 mb-6">ZapCash</h3>
                        <p class="text-lg text-gray-500 leading-relaxed font-normal mb-8 max-w-lg">
                            Revolução nos pagamentos instantâneos via WhatsApp. Uma fintech ágil que permite transações financeiras seguras e rápidas diretamente pelo aplicativo de mensagens mais usado do mundo.
                        </p>
                        <a href="#" class="project-btn inline-flex items-center gap-3 bg-black text-white px-8 py-4 rounded-full text-xs font-medium uppercase tracking-widest hover:bg-gray-800 hover:scale-105 transition-all shadow-xl shadow-gray-200">
                            <i data-lucide="folder" class="w-4 h-4"></i> Ver Projeto
                        </a>
                    </div>
                </div>

<div class="group grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
                    <div class="project-card relative w-full aspect-square lg:aspect-[4/3] bg-gray-200 rounded-[2.5rem] overflow-hidden flex items-center justify-center shadow-inner">
                        <div class="noise-overlay contrast-150 opacity-20 mix-blend-soft-light absolute inset-0 brightness-100"></div>
                        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60%] h-[60%] bg-indigo-500 rounded-full blur-[80px] opacity-15"></div>
                        <div class="overflow-hidden flex flex-col group-hover:translate-y-[-5px] transition-transform duration-500 bg-white/80 w-[100%] h-[67%] border-gray-300 border rounded-xl relative shadow-xl backdrop-blur-sm">
                            <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a8561e8a-bf7f-4d81-9f28-a9a5bd5114f1_800w.png" class="w-full h-full object-cover" alt="Genius CRM">
                        </div>
                    </div>
                    <div class="flex flex-col justify-center items-start lg:pr-12">
                        <h3 class="text-4xl lg:text-5xl font-medium tracking-tight text-gray-900 mb-6">Genius CRM</h3>
                        <p class="text-lg text-gray-500 leading-relaxed font-normal mb-8 max-w-lg">
                            Sistema de gestão de relacionamento com clientes focado em automação de vendas. Dashboard intuitivo, pipelines personalizáveis e integração nativa com ferramentas de marketing digital.
                        </p>
                        <a href="#" class="project-btn inline-flex items-center gap-3 bg-black text-white px-8 py-4 rounded-full text-xs font-medium uppercase tracking-widest hover:bg-gray-800 hover:scale-105 transition-all shadow-xl shadow-gray-200">
                            <i data-lucide="folder" class="w-4 h-4"></i> Ver Projeto
                        </a>
                    </div>
                </div>

</div>
        </section>

</main>

</div>

<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GENSE | Inmobiliaria Exclusiva</title>

<script src="https://cdn.tailwindcss.com"></script>

<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet">

<nav class="fixed top-0 w-full z-[100] border-b border-zinc-100/50 glass">
        <div class="max-w-[1440px] mx-auto px-8 md:px-16 h-20 md:h-24 flex items-center justify-between">

<div class="flex-1 flex items-center space-x-10 hidden lg:flex">
                <a href="#" class="text-[0.55rem] font-medium uppercase tracking-[0.3em] text-zinc-400 hover:text-zinc-900 transition-all">Propiedades</a>
                <a href="#" class="text-[0.55rem] font-medium uppercase tracking-[0.3em] text-zinc-400 hover:text-zinc-900 transition-all">Servicios</a>
            </div>

<div class="flex flex-col items-center">
                <div class="serif text-3xl md:text-4xl tracking-tighter lowercase leading-none">gense.</div>
                <span class="text-[0.4rem] tracking-[0.5em] uppercase text-zinc-400 mt-1">Bienes Raíces</span>
            </div>

<div class="flex-1 flex items-center justify-end space-x-10">
                <a href="#" class="hidden sm:block text-[0.55rem] font-medium uppercase tracking-[0.3em] text-zinc-900 border-b border-zinc-900 pb-1">Contacto</a>
                <button id="menu-btn" class="w-8 h-8 flex flex-col justify-center items-end space-y-1.5 group">
                    <span class="h-px w-6 bg-zinc-900 transition-all group-hover:w-8"></span>
                    <span class="h-px w-8 bg-zinc-900"></span>
                </button>
            </div>

</div>
    </nav>

<header class="relative min-h-screen flex flex-col justify-center items-center px-6 overflow-hidden pt-20">
        <div class="absolute inset-0 z-0 scale-105">
            <img src="https://images.unsplash.com/photo-1613490908578-8318b76b2505?auto=format&fit=crop&q=90&w=2400"
                 class="w-full h-full object-cover opacity-90 brightness-[0.98]" alt="Interior de Lujo">
            <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/20 to-[#fdfcfb]"></div>
        </div>

<div class="relative z-10 text-center max-w-5xl">
            <span class="text-[0.6rem] font-medium uppercase tracking-[0.6em] text-zinc-500 mb-8 block">Malabo • Guinea Ecuatorial</span>
            <h1 class="serif text-[4rem] md:text-[7rem] lg:text-[9.5rem] leading-[0.85] tracking-tighter mb-12">
                Elegancia <span class="italic font-light">Pura</span> <br>
                en el <span class="italic font-light">Ecuador.</span>
            </h1>
            <div class="flex flex-col items-center space-y-10">
                <p class="text-sm md:text-base text-zinc-600 leading-relaxed max-w-md font-light">
                    Una selección exclusiva de propiedades residenciales y comerciales de alto nivel, diseñadas para los gustos más exigentes.
                </p>
                <div class="h-24 w-px bg-gradient-to-b from-zinc-200 to-transparent"></div>
            </div>
        </div>
    </header>

<section class="py-32 md:py-56 bg-white overflow-hidden">
        <div class="max-w-[1440px] mx-auto px-8 md:px-16">
            <div class="flex flex-col lg:flex-row items-center gap-24 lg:gap-32">

<div class="lg:w-1/2 relative">
                    <div class="absolute -top-12 -left-12 text-[12rem] serif italic text-zinc-50 opacity-[0.03] select-none">Exquisito</div>
                    <div class="aspect-[4/5] overflow-hidden rounded-sm relative z-10">
                        <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&q=80&w=1200"
                             class="w-full h-full object-cover grayscale-[0.3]" alt="Detalle Arquitectónico">
                    </div>
                    <div class="absolute -bottom-8 -right-8 w-48 h-48 bg-[#fdfcfb] p-6 border border-zinc-100 hidden md:block">
                        <span class="text-[0.5rem] tracking-[0.3em] uppercase text-zinc-400 block mb-4">Materialidad</span>
                        <p class="serif text-lg leading-tight italic">Diseño contemporáneo fusionado con maderas nobles y acabados de primera línea.</p>
                    </div>
                </div>

<div class="lg:w-1/2 space-y-12">
                    <span class="text-[0.6rem] font-medium uppercase tracking-[0.4em] text-[#d4af37]">01. Excelencia</span>
                    <h2 class="serif text-[3.5rem] md:text-[5rem] tracking-tighter leading-[0.95]">
                        La arquitectura de <br> <span class="italic font-light text-zinc-400">alta distinción.</span>
                    </h2>
                    <p class="text-sm md:text-base text-zinc-500 font-light leading-relaxed max-w-lg">
                        Cada propiedad es seleccionada cuidadosamente, adaptándose al entorno tropical y urbano de Guinea Ecuatorial.
                        En GENSE no solo gestionamos inmuebles; creamos entornos donde la sofisticación y el confort convergen de manera perfecta.
                    </p>
                    <div class="pt-8">
                        <a href="#" class="group flex items-center space-x-6">
                            <span class="text-[0.6rem] font-medium uppercase tracking-[0.3em]">Explorar Catálogo</span>
                            <div class="w-12 h-px bg-zinc-200 group-hover:w-24 group-hover:bg-zinc-900 transition-all duration-500"></div>
                        </a>
                    </div>
                </div>

</div>
        </div>
    </section>

<section class="py-32 bg-zinc-950 text-white">
        <div class="max-w-[1440px] mx-auto px-8 md:px-16 mb-20 flex justify-between items-end">
            <div>
                <span class="text-[0.55rem] font-medium uppercase tracking-[0.5em] text-zinc-600 mb-4 block">La Selección</span>
                <h2 class="serif text-[3.5rem] md:text-[5rem] tracking-tighter italic">Residencias Únicas</h2>
            </div>
            <div class="hidden md:flex space-x-4">
                <button id="carousel-prev" class="w-12 h-12 border border-zinc-800 rounded-full flex items-center justify-center hover:border-zinc-400 transition-colors">
                    <iconify-icon icon="solar:arrow-left-linear" class="text-zinc-600"></iconify-icon>
                </button>
                <button id="carousel-next" class="w-12 h-12 border border-zinc-800 rounded-full flex items-center justify-center hover:border-zinc-400 transition-colors">
                    <iconify-icon icon="solar:arrow-right-linear" class="text-zinc-600"></iconify-icon>
                </button>
            </div>
        </div>

<div class="flex-none w-[300px] md:w-[450px] group cursor-pointer">
                <div class="aspect-[3/4] overflow-hidden mb-8 relative">
                    <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&q=80&w=1200"
                         class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt="Villa Bioko">
                    <div class="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors duration-500"></div>
                </div>
                <div class="flex justify-between items-start">
                    <div>
                        <span class="text-[0.5rem] tracking-[0.4em] uppercase text-zinc-500 mb-2 block">Sipopo, Malabo</span>
                        <h3 class="serif text-3xl tracking-tight">Villa Bioko</h3>
                    </div>
                    <span class="serif text-xl italic text-[#d4af37]">Consultar</span>
                </div>
            </div>

<div class="flex-none w-[300px] md:w-[450px] group cursor-pointer">
                <div class="aspect-[3/4] overflow-hidden mb-8 relative">
                    <img src="https://images.unsplash.com/photo-1613545325278-f24b0cae1224?auto=format&fit=crop&q=80&w=1200"
                         class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt="Residencia Bata">
                    <div class="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors duration-500"></div>
                </div>
                <div class="flex justify-between items-start">
                    <div>
                        <span class="text-[0.5rem] tracking-[0.4em] uppercase text-zinc-500 mb-2 block">Paseo Marítimo, Bata</span>
                        <h3 class="serif text-3xl tracking-tight">Residencia Bata</h3>
                    </div>
                    <span class="serif text-xl italic text-[#d4af37]">Consultar</span>
                </div>
            </div>

<div class="flex-none w-[300px] md:w-[450px] group cursor-pointer">
                <div class="aspect-[3/4] overflow-hidden mb-8 relative">
                    <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80&w=1200"
                         class="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110" alt="Ático Malabo">
                    <div class="absolute inset-0 bg-black/20 group-hover:bg-black/0 transition-colors duration-500"></div>
                </div>
                <div class="flex justify-between items-start">
                    <div>
                        <span class="text-[0.5rem] tracking-[0.4em] uppercase text-zinc-500 mb-2 block">Malabo II</span>
                        <h3 class="serif text-3xl tracking-tight">Ático Horizonte</h3>
                    </div>
                    <span class="serif text-xl italic text-[#d4af37]">Consultar</span>
                </div>
            </div>

</div>
    </section>

<section class="py-32 md:py-56 bg-[#fdfcfb]">
        <div class="max-w-[1440px] mx-auto px-8 md:px-16">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-16 md:gap-px md:bg-zinc-100">

<div class="bg-[#fdfcfb] md:p-12 lg:p-16 space-y-8">
                    <iconify-icon icon="solar:map-point-linear" class="text-3xl text-zinc-300"></iconify-icon>
                    <h4 class="text-[0.6rem] font-medium uppercase tracking-[0.4em] text-zinc-900">Ubicaciones Premium</h4>
                    <p class="text-xs text-zinc-500 font-light leading-relaxed">Propiedades situadas en los barrios más exclusivos, seguros y de mayor prestigio en el país.</p>
                </div>

<div class="bg-[#fdfcfb] md:p-12 lg:p-16 space-y-8">
                    <iconify-icon icon="solar:home-angle-linear" class="text-3xl text-zinc-300"></iconify-icon>
                    <h4 class="text-[0.6rem] font-medium uppercase tracking-[0.4em] text-zinc-900">Diseño Vanguardista</h4>
                    <p class="text-xs text-zinc-500 font-light leading-relaxed">Espacios amplios y luminosos que maximizan el flujo natural del aire y la luz ecuatorial.</p>
                </div>

<div class="bg-[#fdfcfb] md:p-12 lg:p-16 space-y-8">
                    <iconify-icon icon="solar:document-text-linear" class="text-3xl text-zinc-300"></iconify-icon>
                    <h4 class="text-[0.6rem] font-medium uppercase tracking-[0.4em] text-zinc-900">Asesoría Legal</h4>
                    <p class="text-xs text-zinc-500 font-light leading-relaxed">Gestión integral de documentación, contratos y acompañamiento notarial completo con total transparencia.</p>
                </div>

<div class="bg-[#fdfcfb] md:p-12 lg:p-16 space-y-8">
                    <iconify-icon icon="solar:graph-up-linear" class="text-3xl text-zinc-300"></iconify-icon>
                    <h4 class="text-[0.6rem] font-medium uppercase tracking-[0.4em] text-zinc-900">Gestión de Inversión</h4>
                    <p class="text-xs text-zinc-500 font-light leading-relaxed">Análisis riguroso de rentabilidad y servicios de administración de propiedades para inversores.</p>
                </div>

</div>
        </div>
    </section>

<section class="py-48 bg-zinc-900 relative overflow-hidden text-center">
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-zinc-500 via-transparent to-transparent"></div>
        </div>
        <div class="relative z-10 max-w-4xl mx-auto px-8">
            <h2 class="serif text-[3.5rem] md:text-[6rem] text-white tracking-tighter leading-none mb-16">
                Acceda a la <br> <span class="italic text-[#d4af37]">Colección Privada.</span>
            </h2>
            <div class="flex flex-col sm:flex-row justify-center items-center gap-8">
                <button class="px-16 py-6 bg-white text-zinc-900 text-[0.6rem] font-medium uppercase tracking-[0.4em] hover:bg-[#d4af37] hover:text-white transition-all duration-500">
                    Agendar Visita
                </button>
                <a href="#" class="text-[0.6rem] font-medium uppercase tracking-[0.4em] text-zinc-400 hover:text-white border-b border-zinc-700 pb-2 transition-all">
                    Descargar Dossier
                </a>
            </div>
        </div>
    </section>

<footer class="bg-white pt-32 pb-16 border-t border-zinc-100">
        <div class="max-w-[1440px] mx-auto px-8 md:px-16">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 mb-40">

<div class="lg:col-span-5">
                    <div class="serif text-5xl tracking-tighter mb-10">gense.</div>
                    <p class="text-sm text-zinc-400 font-light leading-relaxed max-w-xs mb-10 italic">
                        "La firma inmobiliaria más exclusiva de Guinea Ecuatorial para quienes exigen lo extraordinario."
                    </p>
                    <div class="flex space-x-6">
                        <a href="#" class="w-10 h-10 border border-zinc-100 rounded-full flex items-center justify-center text-zinc-400 hover:text-zinc-900 hover:border-zinc-900 transition-all">
                            <iconify-icon icon="solar:instagram-linear"></iconify-icon>
                        </a>
                        <a href="#" class="w-10 h-10 border border-zinc-100 rounded-full flex items-center justify-center text-zinc-400 hover:text-zinc-900 hover:border-zinc-900 transition-all">
                            <iconify-icon icon="solar:letter-linear"></iconify-icon>
                        </a>
                    </div>
                </div>

<div class="lg:col-span-2 space-y-8">
                    <h5 class="text-[0.55rem] font-medium uppercase tracking-[0.4em] text-zinc-900">Inmuebles</h5>
                    <ul class="space-y-4 text-xs text-zinc-400 font-light tracking-widest uppercase">
                        <li><a href="#" class="hover:text-zinc-900 transition-colors">Áticos de Lujo</a></li>
                        <li><a href="#" class="hover:text-zinc-900 transition-colors">Residencias</a></li>
                        <li><a href="#" class="hover:text-zinc-900 transition-colors">Locales Comerciales</a></li>
                    </ul>
                </div>

<div class="lg:col-span-2 space-y-8">
                    <h5 class="text-[0.55rem] font-medium uppercase tracking-[0.4em] text-zinc-900">Servicios</h5>
                    <ul class="space-y-4 text-xs text-zinc-400 font-light tracking-widest uppercase">
                        <li><a href="#" class="hover:text-zinc-900 transition-colors">Compraventa</a></li>
                        <li><a href="#" class="hover:text-zinc-900 transition-colors">Alquiler Premium</a></li>
                        <li><a href="#" class="hover:text-zinc-900 transition-colors">Gestión Integral</a></li>
                    </ul>
                </div>

<div class="lg:col-span-3 space-y-8">
                    <h5 class="text-[0.55rem] font-medium uppercase tracking-[0.4em] text-zinc-900">Novedades</h5>
                    <div class="relative border-b border-zinc-200">
                        <input id="newsletter-input" type="text" placeholder="TU CORREO"
                               class="w-full bg-transparent py-4 text-[0.6rem] focus:outline-none placeholder:text-zinc-300">
                        <button id="newsletter-btn" class="absolute right-0 top-1/2 -translate-y-1/2 text-zinc-300 hover:text-zinc-900 transition-colors">
                            <iconify-icon icon="solar:arrow-right-linear"></iconify-icon>
                        </button>
                    </div>
                </div>

</div>

<div class="flex flex-col md:flex-row justify-between items-center pt-12 border-t border-zinc-50 gap-8">
                <span class="text-[0.5rem] text-zinc-300 uppercase tracking-[0.4em]">© 2024 GENSE Inmobiliaria. Todos los derechos reservados.</span>
                <span class="serif text-2xl italic text-zinc-100">Excelencia en cada detalle</span>
                <div class="flex space-x-8">
                    <a href="#" class="text-[0.5rem] text-zinc-300 uppercase tracking-[0.4em] hover:text-zinc-900">Términos</a>
                    <a href="#" class="text-[0.5rem] text-zinc-300 uppercase tracking-[0.4em] hover:text-zinc-900">Privacidad</a>
                </div>
            </div>
        </div>
    </footer>

if (nextBtn && prevBtn && carousel) {
            nextBtn.addEventListener('click', () => {
                carousel.scrollBy({ left: 400, behavior: 'smooth' });
            });
            prevBtn.addEventListener('click', () => {
                carousel.scrollBy({ left: -400, behavior: 'smooth' });
            });
        }

// Simple Newsletter interaction
        const newsBtn = document.getElementById('newsletter-btn');
        const newsInput = document.getElementById('newsletter-input');
        if (newsBtn && newsInput) {
            newsBtn.addEventListener('click', () => {
                if (newsInput.value) {
                    alert('Gracias por suscribirse.');
                    newsInput.value = '';
                }
            });
        }
    </script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ─── Base ─────────────────────────────────────────────── */
body {
    font-family: 'Inter', sans-serif;
}

.portfolio-root {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: #d6d3cd; /* stone-300 */
    color: #0f172a;             /* slate-900 */
}

/* Selection */
::selection {
    background-color: rgba(59, 130, 246, 0.3);
    color: #bfdbfe;
}

/* ─── Logo bars hover ───────────────────────────────────── */
.logo-bars:hover .bar:nth-child(1) { height: 2rem; }
.logo-bars:hover .bar:nth-child(2) { height: 1rem; }
.logo-bars:hover .bar:nth-child(3) { height: 1.5rem; }

/* ─── Noise texture overlay ─────────────────────────────── */
.noise-overlay {
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
}

/* ─── Manifesto glow on hover ───────────────────────────── */
.manifesto .glow {
    transition: opacity 1s ease;
}

/* ─── Project card base ─────────────────────────────────── */
.project-card {
    position: relative;
}

/* ─── Smooth transitions ────────────────────────────────── */
a,
button {
    transition: all 0.2s ease;
}

/* ─── Animate-pulse (replicate Tailwind's) ──────────────── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ─── Responsive page padding ───────────────────────────── */
@media (min-width: 1024px) {
    .portfolio-root {
        padding: 1.5rem;
    }
}