Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <!-- Swiper.js for dynamic card carousel --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EXIT REALTY CW</title> | |
| <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;800;900&display=swap" | |
| rel="stylesheet"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| }, | |
| exit: { | |
| red: '#dc2626', | |
| blue: '#1e40af', | |
| teal: '#0f766e', | |
| dark: '#1e293b', | |
| } | |
| }, | |
| fontFamily: { | |
| 'body': ['Inter', 'system-ui', '-apple-system', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'fade-in': 'fadeIn 0.5s ease-in-out', | |
| 'slide-up': 'slideUp 0.6s ease-out', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' } | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' } | |
| }, | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0px)' }, | |
| '50%': { transform: 'translateY(-10px)' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-bg { | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23ffffff" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'); | |
| opacity: 0.3; | |
| } | |
| .property-card { | |
| backdrop-filter: blur(10px); | |
| background: rgba(255, 255, 255, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .property-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); | |
| } | |
| .agent-card { | |
| background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); | |
| border: 1px solid #e2e8f0; | |
| transition: all 0.3s ease; | |
| } | |
| .agent-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15); | |
| border-color: #dc2626; | |
| } | |
| .feature-icon { | |
| background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); | |
| box-shadow: 0 8px 16px -4px rgba(220, 38, 38, 0.3); | |
| } | |
| .search-bar { | |
| backdrop-filter: blur(20px); | |
| background: rgba(255, 255, 255, 0.95); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .testimonial-card { | |
| background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); | |
| border-left: 4px solid #dc2626; | |
| } | |
| .section-pattern { | |
| background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0); | |
| background-size: 20px 20px; | |
| } | |
| </style> | |
| } | |
| .portfolio-item { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 1.5rem; | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3); | |
| transition: box-shadow 0.3s, transform 0.3s; | |
| } | |
| .portfolio-item:hover { | |
| box-shadow: 0 20px 40px -10px #0ea5e9cc; | |
| transform: scale(1.03); | |
| } | |
| .portfolio-item img { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .portfolio-item:hover img { | |
| transform: scale(1.07); | |
| } | |
| .portfolio-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: linear-gradient(transparent, rgba(14, 165, 233, 0.9)); | |
| padding: 1rem; | |
| color: white; | |
| transform: translateY(100%); | |
| transition: transform 0.3s ease; | |
| } | |
| .portfolio-item:hover .portfolio-overlay { | |
| transform: translateY(0); | |
| } | |
| /* Fluid dynamic heading for hero */ | |
| .dynamic-title { | |
| font-size: clamp(2.2rem, 5vw + 1rem, 4.5rem); | |
| font-weight: bold; | |
| line-height: 1.08; | |
| letter-spacing: -0.02em; | |
| text-shadow: 0 4px 24px #000a, 0 1px 0 #0ea5e9; | |
| } | |
| /* Swiper active/centered slide scaling */ | |
| .swiper-slide .portfolio-slide { | |
| transform: scale(0.85); | |
| opacity: 0.7; | |
| transition: transform 0.35s cubic-bezier(.4, 2, .6, 1), opacity 0.35s; | |
| } | |
| .swiper-slide-active .portfolio-slide { | |
| transform: scale(1.08); | |
| opacity: 1; | |
| z-index: 2; | |
| box-shadow: 0 24px 60px -10px #0ea5e9cc, 0 2px 16px #000a; | |
| } | |
| .swiper-slide-next .portfolio-slide, | |
| .swiper-slide-prev .portfolio-slide { | |
| transform: scale(0.95); | |
| opacity: 0.85; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-body bg-realty-800 text-realty-50 min-h-screen"> | |
| <!-- Header --> | |
| <header | |
| class="bg-gradient-to-r from-realty-800 via-realty-700 to-realty-600 shadow-xl border-b-4 border-accent-red sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center gap-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-accent-red text-white px-3 py-2 rounded-l font-bold text-lg">EXIT</div> | |
| <div class="bg-realty-600 text-white px-3 py-2 rounded-r font-bold text-lg">REALTY</div> | |
| </div> | |
| <h1 class="text-2xl font-bold text-accent-white">CW</h1> | |
| </div> | |
| <div class="flex gap-4"> | |
| <a href="tel:+17155983794" | |
| class="bg-accent-red text-white px-6 py-3 rounded-lg font-bold hover:bg-accent-gold hover:text-realty-800 transition-colors flex items-center gap-2 shadow-lg"> | |
| <i data-feather="phone"></i> | |
| Call | |
| </a> | |
| <a href="mailto:info@exitcw.com" | |
| class="border-2 border-accent-white text-accent-white px-6 py-3 rounded-lg font-bold hover:bg-accent-white hover:text-realty-800 transition-colors flex items-center gap-2 shadow-lg"> | |
| <i data-feather="mail"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Consistent Call/Text Contact Block --> | |
| <div class="w-full flex flex-col items-center mb-6"> | |
| <a href="tel:+17155983794" | |
| class="text-2xl font-extrabold text-accent-white hover:text-accent-gold transition-colors tracking-wide drop-shadow">Call | |
| Exit Realty CW: (715) 598-3794</a> | |
| <span class="text-realty-200 text-sm mt-1">Stevens Point, WI</span> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-br from-realty-800 via-realty-700 to-realty-600 py-20 relative overflow-hidden"> | |
| <div class="container mx-auto px-4 text-center relative z-10"> | |
| <h2 class="dynamic-title mb-6 text-accent-white drop-shadow-lg">Your EXIT Realty CW Team</h2> | |
| <p class="text-xl md:text-2xl lg:text-3xl text-realty-100 mb-8 tracking-wide drop-shadow-lg font-semibold"> | |
| Professional real estate services in Stevens Point & surrounding areas</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="contact.html" | |
| class="inline-block bg-accent-red text-white px-10 py-5 rounded-lg font-extrabold text-xl md:text-2xl hover:bg-accent-gold hover:text-realty-800 transition-all duration-200 shadow-2xl focus:outline-none focus:ring-2 focus:ring-accent-red focus:ring-offset-2 uppercase tracking-wider"> | |
| Get Started | |
| </a> | |
| <a href="#services" | |
| class="inline-block border-2 border-accent-white text-accent-white px-10 py-5 rounded-lg font-extrabold text-xl md:text-2xl hover:bg-accent-white hover:text-realty-800 transition-all duration-200 shadow-2xl focus:outline-none focus:ring-2 focus:ring-accent-white focus:ring-offset-2 uppercase tracking-wider"> | |
| Our Services | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute top-10 left-10 w-32 h-32 bg-accent-red rounded-full"></div> | |
| <div class="absolute bottom-10 right-10 w-24 h-24 bg-accent-gold rounded-full"></div> | |
| <div class="absolute top-1/2 left-1/4 w-16 h-16 bg-accent-white rounded-full"></div> | |
| </div> | |
| </section> | |
| <!-- AI Chat Section --> | |
| <section class="py-12 bg-gradient-to-br from-legal-800 via-legal-700 to-legal-600"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-2xl p-6"> | |
| <h2 class="text-3xl font-extrabold text-center mb-6 text-legal-800">Chat with Our AI Legal Assistant | |
| </h2> | |
| <p class="text-center text-gray-600 mb-6">Ask questions about our services or get help with your legal | |
| needs. Our AI assistant can provide information and help schedule consultations.</p> | |
| <div id="main-chat-messages" class="h-96 overflow-y-auto p-4 bg-gray-50 rounded-lg mb-4"></div> | |
| <div class="flex gap-2"> | |
| <input id="main-chat-input" type="text" placeholder="Type your message here..." | |
| class="flex-1 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-blue"> | |
| <button id="main-chat-send" | |
| class="bg-accent-blue text-white px-6 py-3 rounded-lg hover:bg-accent-gold transition-colors">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <!-- Services Section --> | |
| <section id="services" class="py-12 md:py-20 bg-gradient-to-br from-realty-50 to-realty-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl md:text-5xl font-extrabold mb-4 text-realty-800">Our Services</h2> | |
| <p class="text-xl text-realty-600 max-w-3xl mx-auto">Comprehensive real estate solutions for buyers, | |
| sellers, and investors in Stevens Point and surrounding communities.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Cards --> | |
| <div | |
| class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-accent-red hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-accent-red rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="home" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-realty-800 mb-3">Residential Sales</h3> | |
| <p class="text-realty-600">Expert guidance through buying or selling your home with personalized | |
| service.</p> | |
| </div> | |
| <div | |
| class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-realty-600 hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-realty-600 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="building" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-realty-800 mb-3">Commercial Real Estate</h3> | |
| <p class="text-realty-600">Business property transactions, leasing, and investment opportunities. | |
| </p> | |
| </div> | |
| <div | |
| class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-accent-red hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-accent-red rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="settings" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-realty-800 mb-3">Property Management</h3> | |
| <p class="text-realty-600">Professional management services for landlords and property owners.</p> | |
| </div> | |
| <div | |
| class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-realty-600 hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-realty-600 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="trending-up" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-realty-800 mb-3">Market Analysis</h3> | |
| <p class="text-realty-600">Comprehensive market reports and property valuations for informed | |
| decisions.</p> | |
| </div> | |
| <div | |
| class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-accent-red hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-accent-red rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="hammer" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-realty-800 mb-3">New Construction</h3> | |
| <p class="text-realty-600">Building your dream home with expert guidance and local connections.</p> | |
| </div> | |
| <div | |
| class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-realty-600 hover:shadow-xl transition-shadow"> | |
| <div class="w-12 h-12 bg-realty-600 rounded-lg flex items-center justify-center mb-4"> | |
| <i data-feather="users" class="text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-realty-800 mb-3">Consultation</h3> | |
| <p class="text-realty-600">Free initial consultation to discuss your real estate needs and goals. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-12 md:py-20 bg-gradient-to-br from-realty-800 via-realty-700 to-realty-600"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-extrabold mb-12 text-accent-white drop-shadow">What Our Clients Say | |
| </h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl p-6 shadow-lg border-l-4 border-accent-red"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-accent-red rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold text-lg">SJ</span> | |
| </div> | |
| <div class="text-left"> | |
| <h4 class="font-bold text-realty-800">Sarah Johnson</h4> | |
| <p class="text-realty-600 text-sm">First-time Homebuyer</p> | |
| </div> | |
| </div> | |
| <p class="text-realty-700 italic">"Exit Realty CW made buying our first home an amazing experience. | |
| Their knowledge and patience guided us through every step."</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 shadow-lg border-l-4 border-realty-600"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-realty-600 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold text-lg">MK</span> | |
| </div> | |
| <div class="text-left"> | |
| <h4 class="font-bold text-realty-800">Mike Kowalski</h4> | |
| <p class="text-realty-600 text-sm">Home Seller</p> | |
| </div> | |
| </div> | |
| <p class="text-realty-700 italic">"Sold our house above asking price in just 2 weeks! The marketing | |
| and professional service was outstanding."</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 shadow-lg border-l-4 border-accent-red"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-accent-red rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold text-lg">LR</span> | |
| </div> | |
| <div class="text-left"> | |
| <h4 class="font-bold text-realty-800">Lisa Rodriguez</h4> | |
| <p class="text-realty-600 text-sm">Commercial Client</p> | |
| </div> | |
| </div> | |
| <p class="text-realty-700 italic">"Found the perfect location for our business. Their commercial | |
| expertise and market knowledge is unmatched."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Agents Section --> | |
| <section class="py-12 md:py-20 bg-gradient-to-br from-realty-900 via-realty-700 to-realty-600/90"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-extrabold mb-12 text-accent-white drop-shadow">Meet Our Agents</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-realty-600/90 rounded-2xl p-6 shadow-2xl border-4 border-accent-gold"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face" | |
| alt="John Smith" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover" /> | |
| <h3 class="text-2xl font-bold text-accent-gold mb-2">John Smith</h3> | |
| <p class="text-realty-100">Realtor</p> | |
| </div> | |
| <div class="bg-realty-600/90 rounded-2xl p-6 shadow-2xl border-4 border-accent-white"> | |
| <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face" | |
| alt="Sarah Johnson" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover" /> | |
| <h3 class="text-2xl font-bold text-accent-gold mb-2">Sarah Johnson</h3> | |
| <p class="text-realty-100">Realtor</p> | |
| </div> | |
| <div class="bg-realty-600/90 rounded-2xl p-6 shadow-2xl border-4 border-accent-gold"> | |
| <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=200&h=200&fit=crop&crop=face" | |
| alt="Mike Davis" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover" /> | |
| <h3 class="text-2xl font-bold text-accent-gold mb-2">Mike Davis</h3> | |
| <p class="text-realty-100">Realtor</p> | |
| </div> | |
| <div class="bg-realty-600/90 rounded-2xl p-6 shadow-2xl border-4 border-accent-white"> | |
| <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face" | |
| alt="Lisa Brown" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover" /> | |
| <h3 class="text-2xl font-bold text-accent-gold mb-2">Lisa Brown</h3> | |
| <p class="text-realty-100">Realtor</p> | |
| </div> | |
| <div class="bg-realty-600/90 rounded-2xl p-6 shadow-2xl border-4 border-accent-gold"> | |
| <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&h=200&fit=crop&crop=face" | |
| alt="David Wilson" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover" /> | |
| <h3 class="text-2xl font-bold text-accent-gold mb-2">David Wilson</h3> | |
| <p class="text-realty-100">Realtor</p> | |
| </div> | |
| <div class="bg-realty-600/90 rounded-2xl p-6 shadow-2xl border-4 border-accent-white"> | |
| <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&h=200&fit=crop&crop=face" | |
| alt="Jennifer Lee" class="w-24 h-24 rounded-full mx-auto mb-4 object-cover" /> | |
| <h3 class="text-2xl font-bold text-accent-gold mb-2">Jennifer Lee</h3> | |
| <p class="text-realty-100">Realtor</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact & Map Section --> | |
| <section class="py-10 text-center bg-realty-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h3 class="text-3xl font-extrabold text-realty-800 mb-8">Contact Exit Realty CW</h3> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-accent-red"> | |
| <h4 class="text-xl font-bold text-realty-800 mb-4">Get In Touch</h4> | |
| <div class="space-y-3 text-left"> | |
| <div class="flex items-center"> | |
| <i data-feather="phone" class="text-accent-red mr-3"></i> | |
| <div> | |
| <p class="font-semibold text-realty-800">Phone</p> | |
| <a href="tel:+17155983794" class="text-realty-600 hover:text-accent-red">(715) | |
| 598-3794</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="mail" class="text-accent-red mr-3"></i> | |
| <div> | |
| <p class="font-semibold text-realty-800">Email</p> | |
| <a href="mailto:info@exitcw.com" | |
| class="text-realty-600 hover:text-accent-red">info@exitcw.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i data-feather="map-pin" class="text-accent-red mr-3"></i> | |
| <div> | |
| <p class="font-semibold text-realty-800">Location</p> | |
| <p class="text-realty-600">Stevens Point, WI</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg p-6"> | |
| <h4 class="text-xl font-bold text-realty-800 mb-4">Schedule Consultation</h4> | |
| <p class="text-realty-600 mb-4">Ready to discuss your real estate needs? Contact us today for a | |
| free consultation.</p> | |
| <a href="contact.html" | |
| class="inline-block bg-accent-red text-white px-6 py-3 rounded-lg font-bold hover:bg-realty-700 transition-colors"> | |
| Schedule Now | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Swiper.js initialization --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| feather.replace(); | |
| new Swiper('.mySwiper', { | |
| loop: true, | |
| autoplay: { delay: 4000, disableOnInteraction: false }, | |
| effect: 'coverflow', | |
| grabCursor: true, | |
| centeredSlides: true, | |
| slidesPerView: 1, | |
| coverflowEffect: { | |
| rotate: 30, | |
| stretch: 0, | |
| depth: 100, | |
| modifier: 1, | |
| slideShadows: true, | |
| }, | |
| pagination: { el: '.swiper-pagination', clickable: true }, | |
| navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, | |
| breakpoints: { | |
| 768: { slidesPerView: 1 }, | |
| 1024: { slidesPerView: 2 }, | |
| }, | |
| }); | |
| }); | |
| </script> | |
| <!-- Call to Action --> | |
| <section class="bg-gradient-to-br from-realty-700 via-realty-900 to-realty-600 py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl md:text-6xl font-extrabold mb-6 text-accent-white drop-shadow">Ready to Make Your Move? | |
| </h2> | |
| <p class="text-xl text-realty-100 mb-8 font-semibold">Let Exit Realty CW guide you through your real estate | |
| journey</p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="contact.html" | |
| class="bg-accent-red text-white px-10 py-5 rounded-lg font-extrabold text-xl hover:bg-accent-gold hover:text-realty-800 transition-colors shadow-xl uppercase tracking-wider">Get | |
| Started Today</a> | |
| <a href="tel:+17155983794" | |
| class="border-2 border-accent-white text-accent-white px-10 py-5 rounded-lg font-extrabold text-xl hover:bg-accent-white hover:text-realty-800 transition-colors shadow-xl uppercase tracking-wider">Call | |
| (715) 598-3794</a> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| }); | |
| </script> | |
| <!-- AI Chat Widget --> | |
| <div id="chat-widget" class="fixed bottom-4 right-4 z-50"> | |
| <button id="chat-toggle" | |
| class="bg-accent-red text-white p-4 rounded-full shadow-lg hover:bg-realty-700 transition-colors"> | |
| <i data-feather="message-circle"></i> | |
| </button> | |
| </div> | |
| <div id="chat-window" | |
| class="fixed bottom-16 right-4 w-80 h-96 bg-white rounded-lg shadow-2xl hidden z-50 flex flex-col"> | |
| <div class="bg-accent-red text-white p-4 rounded-t-lg flex justify-between items-center"> | |
| <h3 class="font-bold">Exit Realty CW Assistant</h3> | |
| <button id="chat-close" class="text-white hover:text-accent-gold"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div id="chat-messages" class="flex-1 p-4 overflow-y-auto"></div> | |
| <div class="p-4 border-t"> | |
| <input id="chat-input" type="text" placeholder="Ask about real estate..." | |
| class="w-full p-2 border rounded-lg"> | |
| <button id="chat-send" | |
| class="mt-2 bg-accent-red text-white px-4 py-2 rounded-lg hover:bg-realty-700">Send</button> | |
| </div> | |
| </div> | |
| <script src="chat.js"></script> | |
| </body> | |
| </html> |