<![CDATA[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ranty - Minimal Design</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen flex flex-col p-6 md:p-12">
<!-- Navbar -->
<nav class="max-w-7xl mx-auto w-full flex justify-between items-center mb-16">
<div class="flex items-center gap-2">
<div class="w-5 h-5 bg-black"></div>
<span class="font-bold tracking-[0.2em] text-lg uppercase">Ranty</span>
</div>
<div class="hidden md:flex gap-10 text-[12px] font-bold uppercase tracking-widest text-gray-800">
<a href="#" class="hover:opacity-50">Services</a>
<a href="#" class="hover:opacity-50">Homes</a>
<a href="#" class="hover:opacity-50">About us</a>
<a href="#" class="hover:opacity-50">Cases</a>
</div>
<div class="flex items-center gap-6">
<span class="text-xs font-bold">ENG</span>
<button class="bg-black text-white px-7 py-2.5 rounded-full text-[11px] font-bold uppercase tracking-tighter">Contact Us</button>
</div>
</nav>
<!-- Main Content -->
<main class="max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-12 items-center flex-grow">
<!-- Left Side -->
<div class="order-2 lg:order-1">
<h1 class="serif text-[60px] md:text-[90px] lg:text-[110px] leading-[0.85] uppercase mb-8">
The <br> Perfect <br> Home<span class="text-3xl align-top ml-1">®</span>
</h1>
<p class="italic text-gray-600 mb-10 tracking-wide text-sm md:text-base">/ We craft custom homes /</p>
<button class="bg-[#1e1e1e] text-white px-12 py-4 rounded-full text-xs font-bold tracking-[0.2em] hover:scale-105 transition shadow-lg">START</button>
</div>
<!-- Right Side: White Card (Without Hero Image) -->
<div class="relative order-1 lg:order-2 w-full">
<div class="bg-white card-radius p-10 md:p-16 shadow-2xl min-h-[350px] flex flex-col justify-center">
<div class="flex gap-3 mb-8">
<span class="border border-gray-200 px-5 py-1.5 rounded-full text-[10px] font-bold uppercase text-gray-400">Interior</span>
<span class="border border-gray-200 px-5 py-1.5 rounded-full text-[10px] font-bold uppercase text-gray-400">Design</span>
<span class="bg-black text-white px-6 py-1.5 rounded-full text-[10px] font-bold uppercase">3D</span>
</div>
<h2 class="text-[35px] md:text-[45px] font-bold leading-[1.1] mb-5">Unique design &<br>ergonomics</h2>
<p class="text-gray-400 italic text-sm md:text-base">From blueprints to renders.</p>
</div>
<!-- Floating Video Label -->
<div class="absolute -top-4 right-4 bg-white p-4 rounded-2xl shadow-xl flex items-center gap-3 border border-gray-50">
<div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
<div class="w-0 h-0 border-t-[6px] border-t-transparent border-l-[10px] border-l-blue-600 border-b-[6px] border-b-transparent ml-1"></div>
</div>
<div>
<p class="text-[9px] font-extrabold uppercase leading-none">Roomtour</p>
<p class="text-[8px] text-gray-400 font-bold uppercase mt-1">Video</p>
</div>
</div>
</div>
</main>
<!-- Footer Stats -->
<footer class="max-w-7xl mx-auto w-full mt-16 grid md:grid-cols-3 gap-6">
<!-- Brown Card -->
<div class="bg-[#b49b7e] p-8 card-radius flex justify-between items-center group cursor-pointer hover:brightness-105 transition">
<div>
<h3 class="font-bold text-xl leading-tight mb-2">We use best<br>materials!</h3>
<p class="text-[10px] font-medium opacity-70 italic">Working with verified suppliers.</p>
</div>
<div class="w-11 h-11 border-2 border-white/40 rounded-xl flex flex-col items-center justify-center gap-1.5">
<div class="w-6 h-[2px] bg-white"></div>
<div class="w-6 h-[2px] bg-white"></div>
<div class="w-4 h-[2px] bg-white/50"></div>
</div>
</div>
<!-- Customers -->
<div class="bg-white/30 p-8 card-radius flex items-center gap-5">
<div class="flex -space-x-4">
<img decoding="async" src="https://i.pravatar.cc" class="w-12 h-12 rounded-full border-2 border-white object-cover" alt="I.pravatar" title="Elementor #9221">
<img decoding="async" src="https://i.pravatar.cc" class="w-12 h-12 rounded-full border-2 border-white object-cover" alt="I.pravatar" title="Elementor #9221">
</div>
<div>
<p class="serif text-4xl font-bold leading-none">12m+</p>
<p class="text-[9px] font-bold text-gray-600 uppercase tracking-widest mt-2">Customers</p>
</div>
</div>
<!-- Combine Nature -->
<div class="bg-white/30 p-8 card-radius flex flex-col justify-center items-start gap-3">
<h3 class="font-bold text-[12px] uppercase leading-tight tracking-tight">
We can combine nature &<br>home comfort
</h3>
<a href="#" class="text-[10px] font-black border-b-2 border-black pb-0.5 tracking-tighter hover:opacity-50 transition uppercase">
Learn More —
</a>
</div>
</footer>
</body>
</html>]]>
