跳到主要内容
返回画廊
PAID · 已付费

Zenith Realty

Landing Pageheropage_type: landing2026-05-04

Build a luxury real estate landing page called "ZENITH REALTY" with the exact design, components, and animations described below. Do not include a footer.

Core Setup:

  • Font: Use Google Font 'Lato' (weights 300, 400, 500, 700, 900). Configure it in tailwind by setting @theme { --font-lato: "Lato", sans-serif; } in index.css and apply font-lato globally.
  • Global Style: The main wrapper should use bg-[#F8F8F8] and text-[#141414].
  • Libraries: Use lucide-react for icons, motion/react for animations, and recharts for charts.

Section 1: Hero & Navbar

  • Full screen height (h-screen), overflow hidden, relative positioning.
  • Background Video: Absolutely positioned, covering the full area: <video src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260503_144509_89e2d612-8af2-45c3-90f4-4831bc60715d.mp4" autoPlay muted loop playsInline className="absolute top-0 left-0 w-full h-full object-cover z-0" />
  • Content Overlay: Over the video, use a relative wrapper with z-10 and bg-white/10.
  • Navbar:
    • Logo: Stacked text "ZENITH" over "REALTY" with text-xl font-black leading-[0.85] tracking-tighter text-[#141414].
    • Links (Desktop): "Properties" (with ChevronDown), "Mortgage" (with a New badge: bg-black text-[white] text-[9px] px-1.5 py-0.5 rounded-xs leading-none), "Company", "Careers" (with ChevronDown), "Blog". Style: text-[13px] font-medium tracking-tight text-[#141414] hover:opacity-60.
    • Action Button: "Post a property" (with Home icon). Style: border border-black/10 bg-white/80 backdrop-blur-md px-6 py-2.5 rounded-none text-[13px] font-medium hover:bg-white.
    • Mobile Menu: Implement a functional slide-in mobile menu using AnimatePresence and motion.div from the right (x: '100%' to x: 0) containing nav links and a dark "Post a property" button at the bottom.
  • Hero Content: Grid layout grid-cols-1 md:grid-cols-12 in the main container.
    • Headline: "Discover space you truly belong in" (animate fading up y: 30, duration 0.9). Style: text-4xl md:text-5xl lg:text-7xl font-medium tracking-tight leading-[1.05] text-[#141414].
    • Button: "Book a call" (animate fade in with delay 0.6). Style: bg-[#141414] text-white px-9 py-4 text-[13px] font-medium uppercase tracking-wider shadow-2xl.
    • Subtext: "Experience more than a house; find a sanctuary where your journey unfolds, rich with comfort and endless opportunities." (animate fade in with delay 0.4). Position this on the right side of the grid (md:col-span-4 md:col-start-9). Style: text-[#A5A5A5] text-[15px] md:text-[18px] leading-[1.4].

Section 2: Properties

  • Header: "Guiding you toward the residence of your dreams" (text-3xl md:text-5xl font-medium tracking-tight leading-[1.1] text-[#141414]). To its right (md:col-start-9), place subtext: "Our vision bridges balance, design, and attention so that every client resides in a space reflecting their values." (text-[#A5A5A5] text-[14px] leading-relaxed).
  • Grid: 3 property cards that fade and slide up (motion.div with staggered delays, viewport={{ once: true }}). Use bg-white, group class, and image wrappers with aspect-[4/3] md:aspect-square overflow-hidden group-hover:scale-105 duration-700.
  • Property Data:
    1. Title: "Aether Heights", Price: "$345,000", Location: "USA/California/Malibu", Stats: 300 m², 1 floor, 6 beds, 2 baths, Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260503_145701_de344c15-5eac-4c64-8bd6-19a2811bba4a.png&w=1280&q=85
    2. Title: "Azure Sanctuary", Price: "$225,000", Location: "Caribbean/Bahamas/Bimini", Stats: 250 m², 1 floor, 4 beds, 1 bath, Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260503_145923_c1a9880c-0fab-4a76-8289-bd650d5e5dce.png&w=1280&q=85
    3. Title: "Summit Pavilion", Price: "$510,000", Location: "USA/Colorado/Vail", Stats: 400 m², 3 floors, 6 beds, 3 baths, Image: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260503_150022_cdda0eaa-1c17-4f59-8188-4f98b328619f.png&w=1280&q=85
  • Card Formatting: In each card details section, place the stats inline in a flex wrap row. Use Lucide icons: Square for area, Layers for floors, Bed for beds, Bath for baths. Stat styling: text-[#141414] text-[11px] font-medium, icon styling: text-[#A5A5A5] size={13} strokeWidth={2.5}.

Section 3: How it Works

  • Header: "Explore our service and the process" with right-aligned subtext "Digital walk-throughs, select portfolios, and professional insight — all the tools to search and secure with ease."
  • Layout: 12-column grid. Left 4 columns for a custom menu block, right 8 columns for an image (aspect-video md:aspect-square).
  • Content Block (Left): White background (bg-white p-8 md:p-16). Include:
    • Title "Exclusive collection", desc "Consultants curate custom lists of vetted homes. Featuring media, VR walk-ins, and private physical tours."
    • Button: "Free consult" (border, transparent bg hover:bg-gray-50).
    • Navigation list at the bottom: 4 text buttons vertically stacked — "Market Analysis", "Exclusive collection" (active mode, text-[#141414]), "Policy Support", "Closing Deal". The inactive items should be text-[#A5A5A5] hover:text-[#141414]. All text-[13px] font-medium.
  • Image (Right): https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260503_150112_2b0e700f-7af4-4459-b326-7d9e2f468daa.png&w=1280&q=85

Section 4: Investment / Analytics

  • Header: "Trusted frameworks for secure growth" with two paragraphs of right-aligned subtext: "Our holdings go beyond floor plans; they represent a vehicle for your wealth to thrive consistently." and "We meticulously vet the premier market offerings for our valued partners."
  • Charts Grid: 3 cards side by side (bg-white p-6 flex flex-col justify-between aspect-video md:aspect-[1.8/1]).
    1. Title: "Annual growth", Value: "19%". Data array: [35, 60, 45, 40, 55, 75, 60, 80, 55, 30].
    2. Title: "Aggregate yield profit", Value: "$820,000". Data array: [8, 12, 18, 28, 32, 38, 55, 70, 85].
    3. Title: "Median returns", Value: "14%". Data array: [10, 75, 20, 35, 30, 65, 55, 25, 40].
  • Chart Implementation: Titles use text-[#141414]/40 text-[12px] font-medium tracking-tight uppercase. Values use text-4xl font-medium text-[#141414]. Below the values, create an h-24 container with a ResponsiveContainer and BarChart. Use a custom shape function on the Bar that renders two rectangles per bar to simulate a transparent bar with a solid top line:
    • A light background rect where fill="#141414" and fillOpacity={0.05}.
    • A solid top cap rect where height={2} and fill="#141414".
回到全部 177 条