Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SummitMas Property | Executive Office Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f6f9fc', | |
| 100: '#e9f1fa', | |
| 200: '#cde2f6', | |
| 300: '#a0c6ed', | |
| 400: '#72a6e2', | |
| 500: '#4a83d7', | |
| 600: '#3666c7', | |
| 700: '#2d51a5', | |
| 800: '#1e3a7b', | |
| 900: '#142657', | |
| 950: '#0a1633', | |
| }, | |
| secondary: { | |
| 50: '#f7f8f9', | |
| 100: '#e8eaee', | |
| 200: '#d0d5dd', | |
| 300: '#a8b2c0', | |
| 400: '#79889e', | |
| 500: '#5d6b82', | |
| 600: '#49546a', | |
| 700: '#3a4254', | |
| 800: '#282e3b', | |
| 900: '#1a1f2a', | |
| 950: '#0e1118' | |
| }, | |
| accent: { | |
| 50: '#fdf7f0', | |
| 100: '#fbe9d9', | |
| 200: '#f7cfb2', | |
| 300: '#f0a577', | |
| 400: '#e87643', | |
| 500: '#d24f1f', | |
| 600: '#b63c15', | |
| 700: '#8f2d16', | |
| 800: '#6d2518', | |
| 900: '#521d14', | |
| 950: '#2e0f0a' | |
| }, | |
| gold: { | |
| 100: '#faf6e8', | |
| 200: '#f4e9c3', | |
| 300: '#ecdb9c', | |
| 400: '#e4cb73', | |
| 500: '#ccae52', | |
| 600: '#b59440', | |
| 700: '#8c7434', | |
| 800: '#6a5628', | |
| 900: '#4a3b1b', | |
| 950: '#2c210e' | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['"Inter"', 'sans-serif'], | |
| serif: ['"Cormorant Garamond"', 'serif'], | |
| display: ['"Cormorant"', 'serif'] | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <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=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Cormorant:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(112.1deg, rgba(10, 22, 51, 0.95) 0%, rgba(20, 38, 87, 0.92) 100%), | |
| url('https://images.unsplash.com/photo-1508514177221-188e1e5ce0fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-attachment: fixed; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .property-card { | |
| transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1); | |
| perspective: 1000px; | |
| transform-style: preserve-3d; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .property-card:hover { | |
| transform: translateY(-8px) scale(1.01) rotateX(1deg); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); | |
| z-index: 10; | |
| } | |
| .gold-accent { | |
| position: relative; | |
| } | |
| .gold-accent:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 0; | |
| width: 60px; | |
| height: 3px; | |
| background: linear-gradient(90deg, #b59440 0%, #e4cb73 100%); | |
| } | |
| .gold-text { | |
| background: linear-gradient(90deg, #b59440 0%, #e4cb73 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| display: inline; | |
| } | |
| .section-title { | |
| font-family: 'Cormorant Garamond', serif; | |
| position: relative; | |
| display: inline-block; | |
| font-weight: 600; | |
| letter-spacing: -0.5px; | |
| } | |
| .section-title:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -12px; | |
| left: 0; | |
| width: 60px; | |
| height: 3px; | |
| background: linear-gradient(90deg, #b59440 0%, #e4cb73 100%); | |
| } | |
| .btn-gold { | |
| background: linear-gradient(90deg, #b59440 0%, #e4cb73 100%); | |
| color: rgba(10, 22, 51, 1); | |
| transition: all 0.3s ease; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| border: none; | |
| box-shadow: 0 4px 15px rgba(181, 148, 64, 0.3); | |
| } | |
| .btn-gold:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(181, 148, 64, 0.4); | |
| color: rgba(10, 22, 51, 0.8); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%); | |
| border: 1px solid rgba(0,0,0,0.05); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); | |
| } | |
| .testimonial-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-drop-shadow { | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .pill { | |
| border-radius: 9999px; | |
| } | |
| .semi-bold { | |
| font-weight: 500; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating-element { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .text-decor { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .text-decor:before { | |
| content: ""; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 100%; | |
| height: 1px; | |
| background: currentColor; | |
| opacity: 0.2; | |
| } | |
| .contact-form-bg { | |
| background: linear-gradient(135deg, rgba(10, 22, 51, 0.95) 0%, rgba(20, 38, 87, 0.92) 100%); | |
| backdrop-filter: blur(10px); | |
| } | |
| .form-input { | |
| transition: all 0.2s ease; | |
| background: rgba(255,255,255,0.03); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .form-input:focus { | |
| background: rgba(255,255,255,0.07); | |
| border-color: rgba(228,203,115,0.5); | |
| box-shadow: 0 0 0 2px rgba(228,203,115,0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-secondary-50 text-secondary-700 antialiased"> | |
| <!-- Floating CTA Button --> | |
| <div class="fixed bottom-6 right-6 z-50"> | |
| <button id="floatingCta" class="btn-gold rounded-full px-5 py-4 shadow-xl flex items-center justify-center ring-2 ring-white ring-opacity-20 hover:scale-105 transition-transform"> | |
| <i class="fas fa-phone-alt text-lg"></i> | |
| <span class="hidden sm:inline ml-2 font-medium">Contact Us</span> | |
| </button> | |
| </div> | |
| <!-- Header/Navigation --> | |
| <header class="fixed w-full bg-white nav-drop-shadow z-40 border-b border-gray-100"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold text-primary-900 flex items-center"> | |
| <img src="https://summitmasproperty.com/wp-content/uploads/2021/04/logo-summitmas-s.png" alt="SummitMas Logo" class="h-10"> | |
| </a> | |
| </div> | |
| <nav class="hidden lg:flex space-x-8"> | |
| <a href="#" class="nav-link text-secondary-800 font-medium semi-bold hover:text-primary-600 transition-colors">Home</a> | |
| <a href="#properties" class="nav-link text-secondary-700 font-medium semi-bold hover:text-primary-600 transition-colors">Properties</a> | |
| <a href="#amenities" class="nav-link text-secondary-700 font-medium semi-bold hover:text-primary-600 transition-colors">Amenities</a> | |
| <a href="#about" class="nav-link text-secondary-700 font-medium semi-bold hover:text-primary-600 transition-colors">About</a> | |
| <a href="#contact" class="nav-link text-secondary-700 font-medium semi-bold hover:text-primary-600 transition-colors">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-5"> | |
| <a href="tel:+1234567890" class="hidden md:block bg-primary-700 hover:bg-primary-800 text-white px-5 py-2 rounded-md transition-all font-medium semi-bold shadow-sm flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-sm"></i> Call Now | |
| </a> | |
| <button class="lg:hidden text-secondary-600 hover:text-primary-600" id="mobileMenuBtn"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden lg:hidden bg-white w-full absolute left-0 top-full shadow-lg border-t border-gray-100"> | |
| <div class="px-6 py-2 flex flex-col"> | |
| <a href="#" class="py-3 border-b border-gray-100 text-primary-800 font-medium">Home</a> | |
| <a href="#properties" class="py-3 border-b border-gray-100 text-secondary-700">Properties</a> | |
| <a href="#amenities" class="py-3 border-b border-gray-100 text-secondary-700">Amenities</a> | |
| <a href="#about" class="py-3 border-b border-gray-100 text-secondary-700">About</a> | |
| <a href="#contact" class="py-3 border-b border-gray-100 text-secondary-700">Contact</a> | |
| <a href="tel:+1234567890" class="mt-3 mb-4 py-3 text-white bg-primary-700 text-center rounded-md font-medium shadow-sm"> | |
| <i class="fas fa-phone-alt mr-2"></i> Call Now | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient pt-36 pb-28 text-white relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-10"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-accent-400 filter blur-3xl opacity-30"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-accent-500 filter blur-3xl opacity-20"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <div class="mb-8 flex justify-center"> | |
| <span class="inline-block bg-white bg-opacity-10 border border-white border-opacity-20 text-white px-5 py-2 rounded-full mb-6 font-medium text-sm tracking-wider">PREMIUM OFFICE SOLUTIONS</span> | |
| </div> | |
| <h1 class="text-4xl md:text-5xl lg:text-5xl font-serif font-medium mb-6 leading-tight">Executive Workspaces <span class="text-decor">Designed for</span> <span class="gold-text font-semibold">Distinguished Enterprises</span></h1> | |
| <p class="text-lg opacity-90 mb-10 max-w-2xl mx-auto leading-relaxed font-light">SummitMas Property presents meticulously crafted office environments engineered to foster innovation and propel organizational success.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-5"> | |
| <a href="#contact" class="btn-gold px-7 py-4 rounded-md font-medium text-lg"> | |
| Schedule a Tour <i class="fas fa-arrow-right ml-3"></i> | |
| </a> | |
| <a href="#properties" class="border border-white border-opacity-30 hover:border-opacity-60 text-white px-7 py-4 rounded-md font-medium hover:bg-white hover:bg-opacity-10 transition-all"> | |
| <i class="fas fa-building mr-3"></i> Explore Collections | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-primary-900 to-transparent opacity-50"></div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-5"> | |
| <div class="p-6 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="text-3xl font-serif font-bold text-primary-700 mb-2">25+</div> | |
| <div class="text-secondary-600 font-light">Premium Office Locations</div> | |
| <div class="mt-4 h-1 w-12 bg-gradient-to-r from-accent-400 to-accent-600 rounded-full"></div> | |
| </div> | |
| <div class="p-6 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="text-3xl font-serif font-bold text-primary-700 mb-2">2.1M</div> | |
| <div class="text-secondary-600 font-light">Square Meters Managed</div> | |
| <div class="mt-4 h-1 w-12 bg-gradient-to-r from-accent-400 to-accent-600 rounded-full"></div> | |
| </div> | |
| <div class="p-6 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="text-3xl font-serif font-bold text-primary-700 mb-2">98%</div> | |
| <div class="text-secondary-600 font-light">Tenant Retention Rate</div> | |
| <div class="mt-4 h-1 w-12 bg-gradient-to-r from-accent-400 to-accent-600 rounded-full"></div> | |
| </div> | |
| <div class="p-6 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow"> | |
| <div class="text-3xl font-serif font-bold text-primary-700 mb-2">24/7</div> | |
| <div class="text-secondary-600 font-light">Concierge Services</div> | |
| <div class="mt-4 h-1 w-12 bg-gradient-to-r from-accent-400 to-accent-600 rounded-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Properties Section --> | |
| <section id="properties" class="py-20 bg-secondary-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 max-w-3xl mx-auto"> | |
| <span class="inline-block text-primary-600 mb-4 font-medium tracking-wider">OUR PORTFOLIO</span> | |
| <h2 class="section-title text-3xl font-serif font-medium text-secondary-900 mb-6">Curated Workspaces for <span class="gold-text font-semibold">Innovative</span> Organizations</h2> | |
| <p class="text-secondary-600 leading-relaxed font-light">An exclusive selection of premier office environments designed to maximize productivity and business growth.</p> | |
| </div> | |
| <!-- Property Cards --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="property-card bg-white rounded-xl overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Office Space" class="w-full h-64 object-cover"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-accent-400 to-accent-600"></div> | |
| <div class="absolute top-4 right-4 bg-white text-primary-700 text-xs px-3 py-1 rounded-full font-medium semi-bold shadow-sm flex items-center"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> AVAILABLE | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-serif font-medium mb-2">Summit Tower Executive Suites</h3> | |
| <p class="text-secondary-600 mb-4 flex items-center text-sm"> | |
| <i class="fas fa-map-marker-alt text-primary-500 mr-2"></i> Sudirman CBD | |
| </p> | |
| <div class="flex space-x-3 text-xs mb-5"> | |
| <span class="flex items-center bg-secondary-50 px-3 py-1 rounded-full font-medium"><i class="fas fa-ruler-combined mr-2 text-primary-500"></i> 120-350 sqm</span> | |
| <span class="flex items-center bg-secondary-50 px-3 py-1 rounded-full font-medium"><i class="fas fa-dollar-sign mr-2 text-primary-500"></i> $15,000/mo</span> | |
| </div> | |
| <p class="text-secondary-700 mb-5 text-sm font-light leading-relaxed">Sophisticated executive suites with panoramic city views, dedicated reception and premium business amenities for discerning firms.</p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-primary-600 font-medium semi-bold hover:text-primary-800 hover:underline flex items-center text-sm"> | |
| View Details <i class="fas fa-chevron-right ml-2 text-xs"></i> | |
| </a> | |
| <button class="btn-gold text-primary-900 px-4 py-2 rounded-md font-medium semi-bold text-sm flex items-center"> | |
| Tour <i class="fas fa-calendar-alt ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="property-card bg-white rounded-xl overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1784&q=80" alt="Office Space" class="w-full h-64 object-cover"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-accent-400 to-accent-600"></div> | |
| <div class="absolute top-4 right-4 bg-white text-primary-700 text-xs px-3 py-1 rounded-full font-medium semi-bold shadow-sm flex items-center"> | |
| <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span> AVAILABLE | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-serif font-medium mb-2">Innovation Hub Coworking</h3> | |
| <p class="text-secondary-600 mb-4 flex items-center text-sm"> | |
| <i class="fas fa-map-marker-alt text-primary-500 mr-2"></i> Tech Park | |
| </p> | |
| <div class="flex space-x-3 text-xs mb-5"> | |
| <span class="flex items-center bg-secondary-50 px-3 py-1 rounded-full font-medium"><i class="fas fa-ruler-combined mr-2 text-primary-500"></i> 25-100 sqm</span> | |
| <span class="flex items-center bg-secondary-50 px-3 py-1 rounded-full font-medium"><i class="fas fa-dollar-sign mr-2 text-primary-500"></i> From $7,500/mo</span> | |
| </div> | |
| <p class="text-secondary-700 mb-5 text-sm font-light leading-relaxed">Flexible coworking spaces with curated networking and tech-enabled conference facilities for dynamic teams.</p> | |
| <div class="flex justify-between items-center"> | |
| <a href="#" class="text-primary-600 font-medium semi-bold hover:text-primary-800 hover:underline flex items-center text-sm"> | |
| View Details <i class="fas fa-chevron-right ml-2 text-xs"></i> | |
| </a> | |
| <button class="btn-gold text-primary-900 px-4 py-2 rounded-md font-medium semi-bold text-sm flex items-center"> | |
| Tour <i class="fas fa-calendar-alt ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="property-card bg-white rounded-xl overflow-hidden"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1769&q=80" alt="Office Space" class="w-full h-64 object-cover"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-accent-400 to-accent-600"></div> | |
| <div class="absolute top-4 right-4 bg-gold-200 text-primary-700 text-xs px-3 py-1 rounded-full font-medium semi-bold shadow-sm flex items-center"> | |
| <i class="fas fa-exclamation-circle mr-2 text-primary-600"></i> LIMITED | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <href="#" class="text-primary-600 font-medium semi-bold hover:text-primary-800 hover:underline flex items-center text-sm"> | |
| View Details <i class="fas fa-chevron-right ml-2 text-xs"></i> | |
| </a> | |
| <button class="btn-gold text-primary-900 px-4 py-2 rounded-md font-medium semi-bold text-sm flex items-center"> | |
| Tour <i class="fas fa-calendar-alt ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-14"> | |
| <a href="#" class="inline-flex items-center group text-primary-600 hover:text-primary-800 font-medium semi-bold"> | |
| <span class="mr-3">View complete property portfolio</span> | |
| <span class="group-hover:translate-x-1 transition-transform"> | |
| <i class="fas fa-arrow-right"></i> | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Virtual Tour Section --> | |
| <section class="py-20 bg-primary-900 text-white relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute top-1/3 left-1/4 w-32 h-32 rounded-full bg-accent-400 filter blur-3xl"></div> | |
| <div class="absolute bottom-1/4 right-1/3 w-40 h-40 rounded-full bg-accent-500 filter blur-3xl"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-14 items-center"> | |
| <div> | |
| <span class="inline-block text-primary-300 mb-4 font-medium tracking-wider">IMMERSIVE EXPERIENCE</span> | |
| <h2 class="text-3xl font-serif font-medium mb-8 gold-accent">Explore Our Exclusive Spaces Virtually</h2> | |
| <p class="text-primary-200 mb-8 leading-relaxed font-light">Our interactive virtual tours provide an authentic preview of each property, allowing you to experience our premium office environments remotely.</p> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-10"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-800 text-gold-400 p-2 rounded-lg mr-4 mt-1"> | |
| <i class="fas fa-vector-square text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold mb-2">Precise Dimensions</h4> | |
| <p class="text-primary-300 font-light text-sm">Verify measurements with digital tools</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-800 text-gold-400 p-2 rounded-lg mr-4 mt-1"> | |
| <i class="fas fa-expand text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold mb-2">Panoramic Views</h4> | |
| <p class="text-primary-300 font-light text-sm">Examine every detail in high resolution</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-800 text-gold-400 p-2 rounded-lg mr-4 mt-1"> | |
| <i class="fas fa-sun text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold mb-2">Light Analysis</h4> | |
| <p class="text-primary-300 font-light text-sm">View under various lighting conditions</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-800 text-gold-400 p-2 rounded-lg mr-4 mt-1"> | |
| <i class="fas fa-layer-group text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold mb-2">Space Planning</h4> | |
| <p class="text-primary-300 font-light text-sm">Visualize your ideal workspace layout</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn-gold text-primary-900 px-6 py-4 rounded-md font-medium semi-bold flex items-center"> | |
| <i class="fas fa-vr-cardboard mr-3"></i> Launch Virtual Experience | |
| </button> | |
| </div> | |
| <div class="rounded-xl overflow-hidden shadow-2xl floating-element"> | |
| <div class="aspect-w-16 aspect-h-9 relative"> | |
| <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80" alt="Virtual Tour" class="w-full h-auto object-cover"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <div class="bg-white text-primary-900 rounded-full w-20 h-20 flex items-center justify-center shadow-xl cursor-pointer hover:scale-110 transition-transform"> | |
| <i class="fas fa-play text-3xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-primary-800 p-5"> | |
| <h4 class="font-medium semi-bold mb-1">Summit Tower - Executive Floor Tour</h4> | |
| <div class="flex items-center text-primary-300 text-sm"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>3 min interactive experience</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Amenities Section --> | |
| <section id="amenities" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 max-w-3xl mx-auto"> | |
| <span class="inline-block text-primary-600 mb-4 font-medium tracking-wider">BUSINESS ENABLERS</span> | |
| <h2 class="section-title text-3xl font-serif font-medium text-secondary-900 mb-6">Premium Amenities for <span class="gold-text font-semibold">Enterprise</span> Excellence</h2> | |
| <p class="text-secondary-600 leading-relaxed font-light">Thoughtfully curated amenities designed to support business operations, enhance productivity, and impress clients.</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="text-center p-6 bg-white rounded-xl border border-gray-100 hover:border-primary-100 transition-all hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-primary-50 text-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-network-wired text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium semi-bold mb-2">Enterprise IT</h3> | |
| <p class="text-secondary-600 text-sm font-light">Redundant fiber optic with dedicated support</p> | |
| </div> | |
| <div class="text-center p-6 bg-white rounded-xl border border-gray-100 hover:border-primary-100 transition-all hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-primary-50 text-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user-tie text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium semi-bold mb-2">Executive Lounge</h3> | |
| <p class="text-secondary-600 text-sm font-light">Premium shared spaces for networking</p> | |
| </div> | |
| <div class="text-center p-6 bg-white rounded-xl border border-gray-100 hover:border-primary-100 transition-all hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-primary-50 text-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-dumbbell text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium semi-bold mb-2">Wellness Center</h3> | |
| <p class="text-secondary-600 text-sm font-light">On-site fitness with wellness programs</p> | |
| </div> | |
| <div class="text-center p-6 bg-white rounded-xl border border-gray-100 hover:border-primary-100 transition-all hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-primary-50 text-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-utensils text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium semi-bold mb-2">Gourmet Dining</h3> | |
| <p class="text-secondary-600 text-sm font-light">Premium F&B with catering services</p> | |
| </div> | |
| <div class="text-center p-6 bg-white rounded-xl border border-gray-100 hover:border-primary-100 transition-all hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-primary-50 text-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-car text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium semi-bold mb-2">Valet Parking</h3> | |
| <p class="text-secondary-600 text-sm font-light">Secure parking with EV stations</p> | |
| </div> | |
| <div class="text-center p-6 bg-white rounded-xl border border-gray-100 hover:border-primary-100 transition-all hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-primary-50 text-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-shield-alt text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium semi-bold mb-2">24/7 Security</h3> | |
| <p class="text-secondary-600 text-sm font-light">Advanced access control systems</p> | |
| </div> | |
| <div class="text-center p-6 bg-white rounded-xl border border-gray-100 hover:border-primary-100 transition-all hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-primary-50 text-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-leaf text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium semi-bold mb-2">Biophilic Design</h3> | |
| <p class="text-secondary-600 text-sm font-light">Natural elements to enhance wellbeing</p> | |
| </div> | |
| <div class="text-center p-6 bg-white rounded-xl border border-gray-100 hover:border-primary-100 transition-all hover:shadow-lg"> | |
| <div class="w-16 h-16 bg-primary-50 text-primary-600 rounded-lg flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-concierge-bell text-2xl"></i> | |
| </div> | |
| <h3 class="font-medium semi-bold mb-2">Concierge</h3> | |
| <p class="text-secondary-600 text-sm font-light">Dedicated business lifestyle support</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-primary-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16 max-w-3xl mx-auto"> | |
| <span class="inline-block text-primary-600 mb-4 font-medium tracking-wider">CLIENT EXPERIENCES</span> | |
| <h2 class="section-title text-3xl font-serif font-medium text-secondary-900 mb-6">Trusted by <span class="gold-text font-semibold">Global Leaders</span></h2> | |
| <p class="text-secondary-600 leading-relaxed font-light">Hear from our prestigious clients about their experience with SummitMas Property.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-5"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4 border-2 border-primary-100 shadow-sm"> | |
| <div> | |
| <h4 class="font-medium semi-bold">Sarah Chen</h4> | |
| <p class="text-primary-600 text-xs font-light">Vertex Capital</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <span class="ml-2 text-xs text-gray-500 font-light">4 months ago</span> | |
| </div> | |
| <div class="mb-5 h-1 w-12 bg-gradient-to-r from-accent-400 to-accent-600 rounded-full"></div> | |
| <p class="text-secondary-600 mb-6 text-sm font-light italic leading-relaxed">"The SummitMas team understood our precise requirements and delivered beyond expectations. Our new headquarters has transformed our company culture."</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="bg-primary-100 text-primary-800 px-2 py-1 rounded-full text-xs font-medium">Finance</div> | |
| <a href="#" class="text-primary-600 hover:text-primary-800"> | |
| <i class="fas fa-share-alt text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-5"> | |
| <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4 border-2 border-primary-100 shadow-sm"> | |
| <div> | |
| <h4 class="font-medium semi-bold">Raj Patel</h4> | |
| <p class="text-primary-600 text-xs font-light">NexGen Technologies</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <span class="ml-2 text-xs text-gray-500 font-light">8 months ago</span> | |
| </div> | |
| <div class="mb-5 h-1 w-12 bg-gradient-to-r from-accent-400 to-accent-600 rounded-full"></div> | |
| <p class="text-secondary-600 mb-6 text-sm font-light italic leading-relaxed">"Our SummitMas location has become a strategic asset in attracting top talent. The building's prestige and amenities consistently impress clients and candidates alike."</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="bg-primary-100 text-primary-800 px-2 py-1 rounded-full text-xs font-medium">Technology</div> | |
| <a href="#" class="text-primary-600 hover:text-primary-800"> | |
| <i class="fas fa-share-alt text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="testimonial-card p-6 rounded-xl"> | |
| <div class="flex items-center mb-5"> | |
| <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4 border-2 border-primary-100 shadow-sm"> | |
| <div> | |
| <h4 class="font-medium semi-bold">Emily Wong</h4> | |
| <p class="text-primary-600 text-xs font-light">Global Consulting Group</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <i class="fas fa-star text-gold-500"></i> | |
| <span class="ml-2 text-xs text-gray-500 font-light">1 year ago</span> | |
| </div> | |
| <div class="mb-5 h-1 w-12 bg-gradient-to-r from-accent-400 to-accent-600 rounded-full"></div> | |
| <p class="text-secondary-600 mb-6 text-sm font-light italic leading-relaxed">"The attention to detail in our custom build-out was extraordinary. SummitMas delivered a workspace that perfectly reflects our brand and operational needs."</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="bg-primary-100 text-primary-800 px-2 py-1 rounded-full text-xs font-medium">Consulting</div> | |
| <a href="#" class="text-primary-600 hover:text-primary-800"> | |
| <i class="fas fa-share-alt text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <button class="inline-flex items-center group text-primary-600 hover:text-primary-800 font-medium semi-bold text-sm"> | |
| <span class="mr-2">View more client stories</span> | |
| <span class="group-hover:translate-x-1 transition-transform"> | |
| <i class="fas fa-arrow-right"></i> | |
| </span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-br from-primary-800 to-primary-900 text-white relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute top-1/3 left-1/4 w-64 h-64 rounded-full bg-accent-400 filter blur-3xl"></div> | |
| <div class="absolute bottom-1/4 right-1/3 w-80 h-80 rounded-full bg-accent-500 filter blur-3xl"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10 text-center"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h2 class="text-3xl font-serif font-medium mb-8 gold-accent">Is Your Current Workspace Supporting Your Strategic Vision?</h2> | |
| <p class="text-lg text-primary-200 mb-10 max-w-2xl mx-auto leading-relaxed font-light">Discover how SummitMas Property can provide an environment that elevates your business objectives and corporate identity.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-5"> | |
| <a href="#contact" class="btn-gold text-primary-900 px-6 py-4 rounded-md font-medium semi-bold shadow-lg hover:shadow-xl transition-all flex items-center justify-center"> | |
| <i class="fas fa-calendar-check mr-3"></i> Schedule Consultation | |
| </a> | |
| <a href="tel:+1234567890" class="border border-primary-300 border-opacity-40 hover:border-opacity-80 text-white px-6 py-4 rounded-md font-medium semi-bold hover:bg-primary-700 transition-all flex items-center justify-center"> | |
| <i class="fas fa-phone-alt mr-3"></i> +62 21 1234 5678 | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Form Section --> | |
| <section id="contact" class="py-20 bg-secondary-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-14"> | |
| <div class="contact-form-bg p-8 rounded-xl"> | |
| <div class="mb-10"> | |
| <span class="inline-block text-gold-400 mb-4 font-medium tracking-wider">GET IN TOUCH</span> | |
| <h2 class="text-2xl font-serif font-medium text-white mb-4 gold-accent">Request Bespoke Office Solutions</h2> | |
| <p class="text-primary-300 leading-relaxed font-light text-sm">Complete this form and our leasing specialists will craft a tailored proposal within 24 hours.</p> | |
| </div> | |
| <form class="space-y-5"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-5"> | |
| <div> | |
| <label class="block text-primary-200 mb-2 font-medium text-sm">Full Name*</label> | |
| <input type="text" class="form-input w-full p-3 rounded-lg text-white placeholder-primary-400 outline-none text-sm" placeholder="Your name" required> | |
| </div> | |
| <div> | |
| <label class="block text-primary-200 mb-2 font-medium text-sm">Company Name</label> | |
| <input type="text" class="form-input w-full p-3 rounded-lg text-white placeholder-primary-400 outline-none text-sm" placeholder="Your company"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-5"> | |
| <div> | |
| <label class="block text-primary-200 mb-2 font-medium text-sm">Email*</label> | |
| <input type="email" class="form-input w-full p-3 rounded-lg text-white placeholder-primary-400 outline-none text-sm" placeholder="your@email.com" required> | |
| </div> | |
| <div> | |
| <label class="block text-primary-200 mb-2 font-medium text-sm">Phone*</label> | |
| <input type="tel" class="form-input w-full p-3 rounded-lg text-white placeholder-primary-400 outline-none text-sm" placeholder="Phone number" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-primary-200 mb-2 font-medium text-sm">Space Requirements*</label> | |
| <div class="relative"> | |
| <select class="form-input w-full p-3 rounded-lg text-white appearance-none outline-none pr-10 text-sm"> | |
| <option class="bg-primary-900">Select space size</option> | |
| <option class="bg-primary-900">Under 50 sqm</option> | |
| <option class="bg-primary-900">50-100 sqm</option> | |
| <option class="bg-primary-900">100-300 sqm</option> | |
| <option class="bg-primary-900">300-500 sqm</option> | |
| <option class="bg-primary-900">500+ sqm</option> | |
| <option class="bg-primary-900">Not sure - need advice</option> | |
| </select> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <i class="fas fa-chevron-down text-primary-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-primary-200 mb-2 font-medium text-sm">Preferred Move-in Date</label> | |
| <div class="relative"> | |
| <input type="date" class="form-input w-full p-3 rounded-lg text-white placeholder-primary-400 outline-none pr-10 text-sm"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <i class="fas fa-calendar-alt text-primary-400 text-xs"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-primary-200 mb-2 font-medium text-sm">Additional Requirements</label> | |
| <textarea class="form-input w-full h-24 rounded-lg text-white placeholder-primary-400 outline-none text-sm p-3" placeholder="Tell us about your ideal office..."></textarea> | |
| </div> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="consent" class="mt-1 mr-2 rounded focus:ring-gold-400 outline-none bg-primary-900 border-primary-700" required> | |
| <label for="consent" class="text-primary-300 text-xs">I consent to SummitMas Property's <a href="#" class="text-gold-400 hover:underline">Privacy Policy</a> and <a href="#" class="text-gold-400 hover:underline">Terms</a></label> | |
| </div> | |
| <button type="submit" class="btn-gold w-full py-4 rounded-lg font-medium semi-bold text-lg shadow-lg hover:shadow-xl transition-all flex items-center justify-center"> | |
| Submit Request <i class="fas fa-paper-plane ml-3"></i> | |
| </button> | |
| </form> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100"> | |
| <h3 class="text-xl font-serif font-medium text-secondary-900 mb-6 gold-accent">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-50 text-primary-700 p-3 rounded-lg mr-5 flex-shrink-0"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2">Corporate Headquarters</h4> | |
| <p class="text-secondary-600 text-sm font-light leading-relaxed">SummitMas Tower, 25th Floor<br>Jend. Sudirman Kav. 52-53<br>Jakarta 12190, Indonesia</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-50 text-primary-700 p-3 rounded-lg mr-5 flex-shrink-0"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2">Email Communications</h4> | |
| <p class="text-secondary-600 text-sm font-light leading-relaxed"> | |
| <a href="mailto:leasing@summitmasproperty.com" class="hover:text-primary-600 hover:underline">leasing@summitmasproperty.com</a><br> | |
| <a href="mailto:info@summitmasproperty.com" class="hover:text-primary-600 hover:underline">info@summitmasproperty.com</a> | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-50 text-primary-700 p-3 rounded-lg mr-5 flex-shrink-0"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2">Phone Inquiries</h4> | |
| <p class="text-secondary-600 text-sm font-light leading-relaxed"> | |
| +62 21 1234 5678 (Main Office)<br> | |
| +62 812 3456 7890 (Leasing Hotline) | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-50 text-primary-700 p-3 rounded-lg mr-5 flex-shrink-0"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2">Office Hours</h4> | |
| <p class="text-secondary-600 text-sm font-light leading-relaxed"> | |
| Monday-Friday: 8:00 AM - 6:00 PM<br> | |
| Saturday: 9:00 AM - 3:00 PM<br> | |
| By appointment outside standard hours | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100"> | |
| <h3 class="text-xl font-serif font-medium text-secondary-900 mb-6 gold-accent">Our Leasing Process</h3> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="mr-4 flex flex-col items-center"> | |
| <div class="bg-primary-100 text-primary-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mb-2 text-sm">1</div> | |
| <div class="w-px h-full bg-gray-200"></div> | |
| </div> | |
| <div class="pb-6"> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2">Needs Assessment</h4> | |
| <p class="text-secondary-600 text-sm font-light">We analyze your business requirements, team dynamics, and growth plans.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-4 flex flex-col items-center"> | |
| <div class="bg-primary-100 text-primary-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mb-2 text-sm">2</div> | |
| <div class="w-px h-full bg-gray-200"></div> | |
| </div> | |
| <div class="pb-6"> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2">Space Selection</h4> | |
| <p class="text-secondary-600 text-sm font-light">We present tailored options from our premium portfolio.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-4 flex flex-col items-center"> | |
| <div class="bg-primary-100 text-primary-800 w-10 h-10 rounded-full flex items-center justify-center font-bold mb-2 text-sm">3</div> | |
| <div class="w-px h-full bg-gray-200"></div> | |
| </div> | |
| <div class="pb-6"> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2">Personalized Tour</h4> | |
| <p class="text-secondary-600 text-sm font-light">We arrange accompanied visits to shortlisted properties.</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="mr-4 flex flex-col items-center"> | |
| <div class="bg-primary-100 text-primary-800 w-10 h-10 rounded-full flex items-center justify-center font-bold text-sm">4</div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2">Custom Proposal</h4> | |
| <p class="text-secondary-600 text-sm font-light">You receive a bespoke proposal with configurations and terms.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Location Map Section --> | |
| <div class="h-[500px] relative"> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d106.81916231529485!3d-6.194741395493371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5d2e764b12d%3A0x3d2ad6e1e0e9bcc8!2sMonas!5e0!3m2!1sen!2sid!4v1582488227690!5m2!1sen!2sid" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen=""></iframe> | |
| <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-primary-900 to-transparent opacity-20 pointer-events-none"></div> | |
| <div class="absolute bottom-10 left-0 w-full"> | |
| <div class="container mx-auto px-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-xl max-w-sm"> | |
| <h4 class="font-medium semi-bold text-secondary-900 mb-2 font-serif">Prime Business Locations</h4> | |
| <p class="text-secondary-600 text-sm font-light mb-4">All SummitMas properties occupy prestigious addresses with exceptional connectivity and amenities.</p> | |
| <a href="#" class="text-primary-600 hover:text-primary-800 font-medium semi-bold flex items-center text-sm"> | |
| View all locations <i class="fas fa-arrow-right ml-2 text-xs"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-primary-950 text-white pt-20 pb-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-10 mb-16"> | |
| <div> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://summitmasproperty.com/wp-content/uploads/2021/04/logo-summitmas-s.png" alt="SummitMas Logo" class="h-10"> | |
| </div> | |
| <p class="text-primary-400 mb-7 leading-relaxed text-sm font-light">Premium office environments designed to enhance productivity and corporate prestige.</p> | |
| <div class="flex space-x-5 mb-7"> | |
| <a href="#" class="text-primary-400 hover:text-white transition-colors"> | |
| <i class="fab fa-linkedin-in text-lg"></i> | |
| </a> | |
| <a href="#" class="text-primary-400 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter text-lg"></i> | |
| </a> | |
| <a href="#" class="text-primary-400 hover:text-white transition-colors"> | |
| <i class="fab fa-facebook-f text-lg"></i> | |
| </a> | |
| <a href="#" class="text-primary-400 hover:text-white transition-colors"> | |
| <i class="fab fa-instagram text-lg"></i> | |
| </a> | |
| </div> | |
| <div class="flex items-center text-primary-400 text-xs font-light"> | |
| <i class="fas fa-trophy text-gold-500 mr-2"></i> | |
| <span>Winner - Best Office Developer 2023</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium semi-bold mb-6 font-serif uppercase tracking-wider text-gold-400">Company</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| About Us | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Leadership | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Careers | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Newsroom | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Sustainability | |
| </a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium semi-bold mb-6 font-serif uppercase tracking-wider text-gold-400">Services</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Office Leasing | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Tenant Services | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Space Planning | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Custom Buildouts | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Business Lounges | |
| </a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium semi-bold mb-6 font-serif uppercase tracking-wider text-gold-400">Resources</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Market Reports | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Design Standards | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Moving Checklist | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Tenant Portal | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| FAQs | |
| </a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-sm font-medium semi-bold mb-6 font-serif uppercase tracking-wider text-gold-400">Legal</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Privacy Policy | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Terms of Use | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Accessibility | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Licenses | |
| </a></li> | |
| <li><a href="#" class="text-primary-400 hover:text-white transition-colors text-sm font-light"> | |
| Sitemap | |
| </a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-primary-800 pt-10"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-primary-500 text-xs font-light mb-4 md:mb-0"> | |
| © 2023 SummitMas Property. All rights reserved. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-primary-400 hover:text-white transition-colors text-xs font-light"> | |
| <i class="fas fa-globe mr-2"></i> English | |
| </a> | |
| <a href="#" class="text-primary-400 hover:text-white transition-colors text-xs font-light"> | |
| <i class="fas fa-question-circle mr-2"></i> Help Center | |
| </a> | |
| <a href="#" class="text-primary-400 hover:text-white transition-colors text-xs font-light"> | |
| <i class="fas fa-headset mr-2"></i> Support | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Mobile Menu Toggle --> | |
| <script> | |
| document.getElementById('mobileMenuBtn').addEventListener('click', function() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| document.getElementById('floatingCta').addEventListener('click', function() { | |
| window.location.href = '#contact'; | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=tamacrea/summitmas-draft" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |