Webleb - UI Elements - Portfolio Website HTML/CSS: Navigation, Hero, Projects

HTML CSS JS

<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>

@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;
    }
}

Preview

Open Advanced Editor Full Screen

HTML CSS JS

</div>
        </section>

</main>

</div>

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

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

</div>
    </nav>

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

</div>
    </section>

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

</div>

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

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

/* ─── 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;
}

Preview

Validating your code, please wait...