RealEstate AboutUs Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Luxury Realty - About Us</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">

</head>
<body>
    
    <header class="header">
        <div class="header-content">
            <h1 class="header-title slide-reveal">Luxury Realty</h1>
            <p class="header-subtitle slide-reveal">Redefining modern living with exceptional properties and unparalleled service</p>
        </div>
        <div class="scroll-down">
            <i class="fas fa-chevron-down"></i>
        </div>
    </header>

<section class="about-intro">
        <div class="about-container">
            <div class="about-image">
                <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Real Estate">
            </div>
            <div class="about-text">
                <h2 class="section-title slide-reveal">About Our Company</h2>
                <p class="section-subtitle slide-reveal">Founded in 2005, Luxury Realty has been at the forefront of the real estate industry, transforming the way people buy, sell, and experience properties.</p>
                <p class="section-subtitle slide-reveal">With over 18 years of experience, we've built a reputation for excellence, integrity, and innovation in the luxury real estate market.</p>
                <div class="about-stats">
                    <div class="stat-item slide-reveal">
                        <div class="stat-number">18+</div>
                        <div class="stat-label">Years Experience</div>
                    </div>
                    <div class="stat-item slide-reveal">
                        <div class="stat-number">2500+</div>
                        <div class="stat-label">Happy Clients</div>
                    </div>
                    <div class="stat-item slide-reveal">
                        <div class="stat-number">$4.2B</div>
                        <div class="stat-label">Properties Sold</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="team-section">
        <div class="team-container">
            <div class="section-header">
                <h2 class="section-title slide-reveal">Meet Our Team</h2>
                <p class="section-subtitle slide-reveal">Our team of dedicated professionals brings expertise, passion, and local market knowledge to every transaction.</p>
            </div>
            <div class="team-grid">
                
                <div class="team-card slide-reveal">
                    <div class="team-card-image">
                        <img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Team Member">
                    </div>
                    <div class="team-card-overlay">
                        <h3 class="team-card-name">Michael Johnson</h3>
                        <p class="team-card-position">Founder & CEO</p>
                        <div class="team-card-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-card slide-reveal">
                    <div class="team-card-image">
                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" alt="Team Member">
                    </div>
                    <div class="team-card-overlay">
                        <h3 class="team-card-name">Sarah Williams</h3>
                        <p class="team-card-position">Senior Agent</p>
                        <div class="team-card-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-card slide-reveal">
                    <div class="team-card-image">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Team Member">
                    </div>
                    <div class="team-card-overlay">
                        <h3 class="team-card-name">David Chen</h3>
                        <p class="team-card-position">Marketing Director</p>
                        <div class="team-card-social">
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="showcase-section">
        <div class="showcase-container">
            <div class="section-header">
                <h2 class="section-title slide-reveal">Our Featured Properties</h2>
                <p class="section-subtitle slide-reveal">Discover the exceptional properties that define our portfolio</p>
            </div>
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Property">
                        <div class="swiper-slide-content">
                            <h3 class="swiper-slide-title">The Horizon Residence</h3>
                            <p class="swiper-slide-text">A breathtaking oceanfront villa with panoramic views, infinity pool, and state-of-the-art amenities.</p>
                            <a href="#" class="cta-button">View Details</a>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Property">
                        <div class="swiper-slide-content">
                            <h3 class="swiper-slide-title">Skyline Penthouse</h3>
                            <p class="swiper-slide-text">An urban masterpiece with floor-to-ceiling windows, private terrace, and smart home technology.</p>
                            <a href="#" class="cta-button">View Details</a>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Property">
                        <div class="swiper-slide-content">
                            <h3 class="swiper-slide-title">Vineyard Estate</h3>
                            <p class="swiper-slide-text">A sprawling countryside retreat with vineyards, guest houses, and equestrian facilities.</p>
                            <a href="#" class="cta-button">View Details</a>
                        </div>
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

<section class="values-section">
        <div class="values-container">
            <div class="section-header">
                <h2 class="section-title slide-reveal">Our Core Values</h2>
                <p class="section-subtitle slide-reveal">The principles that guide our work and define our culture</p>
            </div>
            <div class="values-grid">
                <div class="value-card slide-reveal">
                    <div class="value-icon">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <h3 class="value-title">Integrity</h3>
                    <p class="value-text">We conduct business with honesty, transparency, and ethical practices, building trust with our clients and partners.</p>
                </div>
                <div class="value-card slide-reveal">
                    <div class="value-icon">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h3 class="value-title">Innovation</h3>
                    <p class="value-text">We embrace cutting-edge technology and creative solutions to deliver exceptional real estate experiences.</p>
                </div>
                <div class="value-card slide-reveal">
                    <div class="value-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <h3 class="value-title">Excellence</h3>
                    <p class="value-text">We pursue perfection in every detail, setting new standards for quality and service in the industry.</p>
                </div>
                <div class="value-card slide-reveal">
                    <div class="value-icon">
                        <i class="fas fa-heart"></i>
                    </div>
                    <h3 class="value-title">Passion</h3>
                    <p class="value-text">Our genuine love for real estate and helping clients fuels our dedication and drives our success.</p>
                </div>
                <div class="value-card slide-reveal">
                    <div class="value-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <h3 class="value-title">Collaboration</h3>
                    <p class="value-text">We believe in teamwork and partnerships to achieve the best outcomes for our clients and community.</p>
                </div>
                <div class="value-card slide-reveal">
                    <div class="value-icon">
                        <i class="fas fa-home"></i>
                    </div>
                    <h3 class="value-title">Community</h3>
                    <p class="value-text">We're committed to enhancing the neighborhoods we serve through responsible development and engagement.</p>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials-section">
        <div class="testimonials-container">
            <div class="section-header">
                <h2 class="section-title slide-reveal">Client Testimonials</h2>
                <p class="section-subtitle slide-reveal">Hear what our clients say about their experience with Luxury Realty</p>
            </div>
            <div class="testimonials-slider">
                <div class="swiper-wrapper">
                    <div class="testimonial-card swiper-slide slide-reveal">
                        <p class="testimonial-content">"Working with Luxury Realty was an exceptional experience from start to finish. Their attention to detail and market knowledge helped us find our dream home at the perfect price. The entire process was seamless and stress-free."</p>
                        <div class="testimonial-author">
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Client">
                            <div class="author-info">
                                <h4>Jennifer Martinez</h4>
                                <p>Homeowner</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card swiper-slide slide-reveal">
                        <p class="testimonial-content">"As an investor, I appreciate Luxury Realty's deep understanding of market trends and their ability to identify high-potential properties. They've helped me build a portfolio that consistently outperforms the market."</p>
                        <div class="testimonial-author">
                            <img src="https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2067&q=80" alt="Client">
                            <div class="author-info">
                                <h4>Robert Thompson</h4>
                                <p>Real Estate Investor</p>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-card swiper-slide slide-reveal">
                        <p class="testimonial-content">"The Luxury Realty team sold our property for 15% above asking price in just 10 days. Their marketing strategy and negotiation skills are unmatched. We couldn't be happier with the results!"</p>
                        <div class="testimonial-author">
                            <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1998&q=80" alt="Client">
                            <div class="author-info">
                                <h4>Amanda & James Wilson</h4>
                                <p>Sellers</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

<section class="velvet-section">
        <div class="velvet-container">
            <div class="velvet-image">
                <img src="https://images.unsplash.com/photo-1605146769289-440113cc3d00?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Luxury Real Estate">
            </div>
            <div class="velvet-content">
                <h2 class="velvet-title">Our Approach</h2>
                <p class="velvet-text">At Luxury Realty, we believe that buying or selling a home should be an extraordinary experience. Our personalized approach combines cutting-edge technology with white-glove service to deliver exceptional results.</p>
                <p class="velvet-text">We take the time to understand your unique needs, preferences, and goals, crafting a tailored strategy that maximizes value and minimizes stress.</p>
                <div class="velvet-stats">
                    <div class="velvet-stat-item">
                        <div class="velvet-stat-number">98%</div>
                        <div class="velvet-stat-label">Client Satisfaction</div>
                    </div>
                    <div class="velvet-stat-item">
                        <div class="velvet-stat-number">24/7</div>
                        <div class="velvet-stat-label">Availability</div>
                    </div>
                    <div class="velvet-stat-item">
                        <div class="velvet-stat-number">50+</div>
                        <div class="velvet-stat-label">Awards Won</div>
                    </div>
                    <div class="velvet-stat-item">
                        <div class="velvet-stat-number">15+</div>
                        <div class="velvet-stat-label">Markets Served</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="cta-section">
        <div class="cta-container">
            <div class="cta-card">
                <div class="cta-content">
                    <h2 class="cta-title slide-reveal">Ready to Find Your Dream Home?</h2>
                    <p class="cta-text slide-reveal">Contact our team of experts today to begin your journey. Whether you're buying, selling, or investing, we're here to guide you every step of the way with unparalleled service and expertise.</p>
                    <a href="#" class="cta-button slide-reveal">Get Started</a>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="footer-content">
            <div class="footer-logo">Luxury Realty</div>
            <p class="footer-text">Redefining excellence in real estate through innovation, integrity, and exceptional service. Transforming properties into dream homes and investments since 2005.</p>
            <div class="footer-social">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-linkedin-in"></i></a>
                <a href="#"><i class="fab fa-youtube"></i></a>
            </div>
            <p class="footer-copyright">© 2023 Luxury Realty. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary-color: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF9C4;
            --dark-color: #121212;
            --light-color: #FFFFFF;
            --gray-color: #F5F5F5;
            --text-dark: #333333;
            --text-light: #757575;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: var(--gray-color);
            color: var(--text-dark);
            overflow-x: hidden;
        }

/* Glassmorphism Base */
        .glass-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            transition: all 0.3s ease;
        }

.glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

/* Header Section */
        .header {
            height: 100vh;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80') no-repeat center center/cover;
            opacity: 0.6;
            z-index: -1;
        }

.header-content {
            text-align: center;
            max-width: 800px;
            padding: 2rem;
        }

.header-title {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--dark-color);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            position: relative;
            display: inline-block;
        }

.header-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--primary-color);
            border-radius: 2px;
        }

.header-subtitle {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            color: var(--text-dark);
            opacity: 0.9;
        }

.scroll-down {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: var(--dark-color);
            font-size: 1.5rem;
            animation: bounce 2s infinite;
            cursor: pointer;
        }

@keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
            40% {transform: translateY(-20px) translateX(-50%);}
            60% {transform: translateY(-10px) translateX(-50%);}
        }

/* About Intro Section */
        .about-intro {
            padding: 5rem 2rem;
            background-color: var(--light-color);
            position: relative;
        }

.about-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

.about-image {
            position: relative;
            height: 500px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

.about-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.about-image:hover img {
            transform: scale(1.05);
        }

.about-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0) 100%);
        }

.about-text {
            position: relative;
        }

.section-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--dark-color);
            position: relative;
            display: inline-block;
        }

.section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--primary-color);
            border-radius: 2px;
        }

.section-subtitle {
            font-size: 1.1rem;
            color: var(--text-light);
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

.about-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            margin-top: 2rem;
        }

.stat-item {
            text-align: center;
            padding: 1.5rem;
            border-radius: 12px;
            background: rgba(255, 215, 0, 0.1);
            transition: all 0.3s ease;
        }

.stat-item:hover {
            background: rgba(255, 215, 0, 0.2);
            transform: translateY(-5px);
        }

.stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 0.5rem;
        }

.stat-label {
            font-size: 0.9rem;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

/* Team Section */
        .team-section {
            padding: 5rem 2rem;
            background-color: var(--gray-color);
            position: relative;
        }

.team-container {
            max-width: 1200px;
            margin: 0 auto;
        }

.section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

.section-header .section-title::after {
            left: 50%;
            transform: translateX(-50%);
        }

.team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

/* Card Luxe UI */
        .team-card {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

.team-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

.team-card-image {
            height: 350px;
            overflow: hidden;
            position: relative;
        }

.team-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

.team-card:hover .team-card-image img {
            transform: scale(1.1);
        }

.team-card-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 2rem;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: var(--light-color);
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.5s ease;
        }

.team-card:hover .team-card-overlay {
            transform: translateY(0);
            opacity: 1;
        }

.team-card-name {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

.team-card-position {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-bottom: 1rem;
        }

.team-card-social {
            display: flex;
            gap: 1rem;
        }

.team-card-social a {
            color: var(--light-color);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

.team-card-social a:hover {
            background: var(--primary-color);
            color: var(--dark-color);
            transform: translateY(-3px);
        }

/* Smart Showcase Carousel */
        .showcase-section {
            padding: 5rem 0;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
            position: relative;
        }

.showcase-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

.swiper {
            width: 100%;
            height: 500px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
        }

.swiper-slide {
            position: relative;
        }

.swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.swiper-slide-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 3rem;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: var(--light-color);
            transform: translateY(50px);
            opacity: 0;
            transition: all 0.5s ease;
        }

.swiper-slide-active .swiper-slide-content {
            transform: translateY(0);
            opacity: 1;
        }

.swiper-slide-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

.swiper-slide-text {
            font-size: 1rem;
            margin-bottom: 1.5rem;
            max-width: 600px;
        }

.swiper-button-next, .swiper-button-prev {
            color: var(--primary-color);
            width: 60px;
            height: 60px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }

.swiper-button-next:hover, .swiper-button-prev:hover {
            background: rgba(0, 0, 0, 0.7);
            transform: scale(1.1);
        }

.swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: var(--light-color);
            opacity: 0.6;
        }

.swiper-pagination-bullet-active {
            background: var(--primary-color);
            opacity: 1;
        }

/* Values Section */
        .values-section {
            padding: 5rem 2rem;
            background-color: var(--light-color);
            position: relative;
        }

.values-container {
            max-width: 1200px;
            margin: 0 auto;
        }

.values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.value-card {
            padding: 2.5rem 2rem;
            border-radius: 16px;
            background: var(--light-color);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

.value-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0) 100%);
            z-index: -1;
            opacity: 0;
            transition: all 0.5s ease;
        }

.value-card:hover::before {
            opacity: 1;
        }

.value-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
        }

.value-icon {
            width: 70px;
            height: 70px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            color: var(--primary-dark);
            font-size: 1.8rem;
            transition: all 0.3s ease;
        }

.value-card:hover .value-icon {
            background: var(--primary-color);
            transform: rotate(15deg) scale(1.1);
        }

.value-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--dark-color);
        }

.value-text {
            font-size: 1rem;
            color: var(--text-light);
            line-height: 1.6;
        }

/* Testimonials Section */
        .testimonials-section {
            padding: 5rem 2rem;
            background-color: var(--gray-color);
            position: relative;
        }

.testimonials-container {
            max-width: 1200px;
            margin: 0 auto;
        }

.testimonials-slider {
            margin-top: 3rem;
            position: relative;
        }

.testimonial-card {
            padding: 2.5rem;
            border-radius: 16px;
            background: var(--light-color);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            margin: 1rem;
            position: relative;
        }

.testimonial-card::before {
            content: '"';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 5rem;
            color: var(--primary-light);
            font-family: Georgia, serif;
            line-height: 1;
            opacity: 0.3;
            z-index: 0;
        }

.testimonial-content {
            position: relative;
            z-index: 1;
            margin-bottom: 1.5rem;
            font-size: 1rem;
            color: var(--text-dark);
            line-height: 1.8;
            font-style: italic;
        }

.testimonial-author {
            display: flex;
            align-items: center;
        }

.testimonial-author img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 1rem;
            border: 3px solid var(--primary-light);
        }

.author-info h4 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 0.2rem;
            color: var(--dark-color);
        }

.author-info p {
            font-size: 0.9rem;
            color: var(--text-light);
        }

.testimonials-slider .swiper-pagination {
            position: relative;
            margin-top: 2rem;
        }

/* Velvet Caption Reveal */
        .velvet-section {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
            color: var(--light-color);
            position: relative;
            overflow: hidden;
        }

.velvet-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

.velvet-image {
            position: relative;
            height: 500px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            transform: translateX(-50px);
            opacity: 0;
            transition: all 1s ease;
        }

.velvet-image.visible {
            transform: translateX(0);
            opacity: 1;
        }

.velvet-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.velvet-content {
            transform: translateX(50px);
            opacity: 0;
            transition: all 1s ease 0.3s;
        }

.velvet-content.visible {
            transform: translateX(0);
            opacity: 1;
        }

.velvet-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            position: relative;
            display: inline-block;
        }

.velvet-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--light-color);
            border-radius: 2px;
        }

.velvet-text {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            line-height: 1.6;
            opacity: 0.9;
        }

.velvet-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-top: 2rem;
        }

.velvet-stat-item {
            text-align: center;
            padding: 1.5rem;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            transition: all 0.3s ease;
        }

.velvet-stat-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-5px);
        }

.velvet-stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

.velvet-stat-label {
            font-size: 0.9rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

/* CTA Section */
        .cta-section {
            padding: 5rem 2rem;
            background-color: var(--light-color);
            position: relative;
        }

.cta-container {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

.cta-card {
            padding: 4rem;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 1) 100%);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }

.cta-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0) 70%);
            animation: rotate 15s linear infinite;
            z-index: 0;
        }

@keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

.cta-content {
            position: relative;
            z-index: 1;
        }

.cta-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--dark-color);
        }

.cta-text {
            font-size: 1.1rem;
            color: var(--text-light);
            margin-bottom: 2rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }

.cta-button {
            display: inline-block;
            padding: 1rem 2.5rem;
            background: var(--primary-color);
            color: var(--dark-color);
            font-size: 1rem;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

.cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: all 0.5s ease;
        }

.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
        }

.cta-button:hover::before {
            left: 100%;
        }

/* Footer */
        .footer {
            padding: 3rem 2rem;
            background-color: var(--dark-color);
            color: var(--light-color);
            text-align: center;
        }

.footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }

.footer-logo {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--primary-color);
        }

.footer-text {
            font-size: 1rem;
            color: var(--text-light);
            margin-bottom: 2rem;
            opacity: 0.7;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
        }

.footer-social {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

.footer-social a {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--light-color);
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

.footer-social a:hover {
            background: var(--primary-color);
            color: var(--dark-color);
            transform: translateY(-3px);
        }

.footer-copyright {
            font-size: 0.9rem;
            color: var(--text-light);
            opacity: 0.5;
        }

/* Elegant Slide Reveal */
        .slide-reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease;
        }

.slide-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

/* Responsive Styles */
        @media (max-width: 1024px) {
            .about-container, .velvet-container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

.about-image, .velvet-image {
                height: 400px;
                order: -1;
            }

.velvet-image {
                transform: translateY(50px);
            }

.velvet-image.visible {
                transform: translateY(0);
            }

.velvet-content {
                transform: translateY(50px);
            }

.velvet-content.visible {
                transform: translateY(0);
            }

.header-title {
                font-size: 3rem;
            }
        }

@media (max-width: 768px) {
            .header-title {
                font-size: 2.5rem;
            }

.header-subtitle {
                font-size: 1rem;
            }

.section-title {
                font-size: 2rem;
            }

.about-stats, .velvet-stats {
                grid-template-columns: repeat(2, 1fr);
            }

.swiper {
                height: 400px;
            }

.cta-card {
                padding: 3rem 2rem;
            }

.cta-title {
                font-size: 2rem;
            }
        }

@media (max-width: 480px) {
            .header-title {
                font-size: 2rem;
            }

.about-stats, .velvet-stats {
                grid-template-columns: 1fr;
            }

.team-card-image {
                height: 300px;
            }

.swiper {
                height: 300px;
            }

.swiper-slide-content {
                padding: 1.5rem;
            }

.swiper-slide-title {
                font-size: 1.5rem;
            }

.cta-card {
                padding: 2rem 1.5rem;
            }

.cta-title {
                font-size: 1.8rem;
            }
        }

JavaScript

// Initialize Swiper for Showcase Carousel
        const showcaseSwiper = new Swiper('.showcase-section .swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            effect: 'fade',
            fadeEffect: {
                crossFade: true
            },
            navigation: {
                nextEl: '.showcase-section .swiper-button-next',
                prevEl: '.showcase-section .swiper-button-prev',
            },
            pagination: {
                el: '.showcase-section .swiper-pagination',
                clickable: true,
            },
        });

// Initialize Swiper for Testimonials
        const testimonialsSwiper = new Swiper('.testimonials-slider', {
            loop: true,
            autoplay: {
                delay: 7000,
                disableOnInteraction: false,
            },
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: '.testimonials-slider .swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                768: {
                    slidesPerView: 2,
                }
            }
        });

// Scroll Reveal Animation
        const scrollReveal = () => {
            const elements = document.querySelectorAll('.slide-reveal');
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.2;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('visible');
                }
            });

const velvetImage = document.querySelector('.velvet-image');
            const velvetContent = document.querySelector('.velvet-content');
            const velvetPosition = velvetImage.getBoundingClientRect().top;
            const velvetScreenPosition = window.innerHeight / 1.2;
            
            if (velvetPosition < velvetScreenPosition) {
                velvetImage.classList.add('visible');
                velvetContent.classList.add('visible');
            }
        };

window.addEventListener('scroll', scrollReveal);
        window.addEventListener('load', scrollReveal);

// Smooth scroll for header button
        document.querySelector('.scroll-down').addEventListener('click', () => {
            window.scrollTo({
                top: window.innerHeight,
                behavior: 'smooth'
            });
        });

RealEstate AboutUs Template Preview

Download Options