File Manager

✏️ /

<?php
$page_title = 'About Us';
$page_description = 'Learn about Yelagiri Real Estate - Over 12 years of trust, transparency, and premium property solutions in the heart of Yelagiri Hills.';
include 'includes/header.php';
?>

</div>

<header class="relative min-h-[85vh] flex items-center justify-center overflow-hidden">
        
        <div class="absolute inset-0 z-0">
            <img src="assets/about/abt_us.png" alt="Yelagiri Hills" class="w-full h-full object-cover scale-110" id="hero-bg">
            <div class="absolute inset-0 bg-gradient-to-b from-brand-dark/80 via-brand-dark/40 to-brand-dark/90"></div>
        </div>

<div class="container mx-auto px-6 relative z-10 text-center pt-20">
            
            <div class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full mb-8 animate-fade-in-up">
                <span class="w-2 h-2 bg-brand-gold rounded-full animate-pulse"></span>
                <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-white/90">Defining Excellence Since 2012</span>
            </div>

<div class="mb-6">
                <h1 class="text-6xl md:text-8xl font-serif font-bold text-white animate-fade-in-up [animation-delay:200ms] tracking-tight">Our <span class="text-brand-gold italic">Legacy</span></h1>
            </div>
            
            <div class="w-24 h-1 bg-brand-gold mx-auto mb-10 shadow-[0_0_15px_rgba(212,175,55,0.5)] animate-fade-in-up [animation-delay:400ms]"></div>
            
            <div>
                <p class="text-xl md:text-2xl text-white/80 max-w-2xl mx-auto animate-fade-in-up [animation-delay:600ms] font-light leading-relaxed">
                    Crafting legacies of luxury and trust in the heart of Yelagiri for over a decade.
                </p>
            </div>
        </div>

<div class="absolute bottom-10 left-1/2 -translate-x-1/2 z-10 animate-bounce text-white/30">
            <div class="w-px h-12 bg-gradient-to-b from-brand-gold to-transparent"></div>
        </div>
    </header>

<section class="py-32 relative overflow-hidden bg-[#FDFDFD]">
        <div class="container mx-auto px-6 relative">
            <div class="flex flex-col lg:flex-row items-center gap-20">
                
                <div class="lg:w-3/5 relative reveal-image">
                    <div class="relative overflow-hidden rounded-2xl shadow-2xl">
                        <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80"
                            alt="Our Legacy" class="w-full h-[600px] object-cover scale-125 transform-gpu" id="story-image">
                    </div>
                    
                    <div class="absolute -bottom-10 -right-6 md:right-10 p-10 bg-white/80 backdrop-blur-xl border border-white/20 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.05)] md:max-w-md floating-card">
                        <span class="text-brand-gold font-bold uppercase tracking-[0.3em] text-[10px] mb-4 block">Est. 2012</span>
                        <h3 class="text-2xl font-serif font-bold text-brand-dark mb-4 leading-tight italic">"Transparency isn't a policy; it's our foundation."</h3>
                        <p class="text-sm text-gray-500 font-medium">— The Yelagiri Promise</p>
                    </div>
                </div>

<div class="lg:w-2/5 stagger-text">
                    <span class="text-brand-gold font-bold uppercase tracking-[0.4em] text-xs mb-6 block">Our Legacy</span>
                    <h2 class="text-4xl md:text-5xl font-serif font-bold text-brand-dark mb-8 leading-[1.1]">A Vision of <br><span class="italic text-brand-dark/70">Premium Living</span></h2>
                    
                    <div class="space-y-6 text-gray-600 leading-relaxed font-light">
                        <p>
                            Founded in 2012, Yelagiri Real Estate emerged from a singular conviction: that luxury is defined by the peace it brings. What began as a boutique advisory has evolved into the region's hallmark for premium estates.
                        </p>
                        <p>
                            We believe real estate transcends mere walls and boundaries; it is about the enduring relationships forged through integrity. Whether a weekend retreat or an investment legacy, we navigate every nuance with precision.
                        </p>
                    </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-12 pt-10 border-t border-gray-100">
                        <div class="reveal-up">
                            <h3 class="font-serif font-bold text-lg text-brand-dark mb-3">Our Mission</h3>
                            <p class="text-sm text-gray-500 leading-relaxed">Defining hill-station luxury through ethical practice and uncompromising quality.</p>
                        </div>
                        <div class="reveal-up">
                            <h3 class="font-serif font-bold text-lg text-brand-dark mb-3">Our Vision</h3>
                            <p class="text-sm text-gray-500 leading-relaxed">To remain the most whispered-about and trusted estate partner in the Eastern Ghats.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-32 bg-[#FAFAFA] border-y border-gray-100">
        <div class="container mx-auto px-6">
            <div class="text-center mb-24 reveal-up">
                <span class="text-brand-gold font-bold uppercase tracking-[0.4em] text-xs mb-4 block">The Records</span>
                <h2 class="text-4xl font-serif font-bold text-brand-dark italic">Milestones of Excellence</h2>
            </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-0 border border-gray-100 rounded-[2rem] overflow-hidden bg-white shadow-sm">
                
                <div class="p-16 text-center border-r border-b md:border-b-0 border-gray-50 group hover:bg-[#FAFAFA] transition-colors duration-700">
                    <div class="text-6xl font-serif font-bold text-brand-dark mb-4 transition-transform duration-500 group-hover:scale-110">
                        <span class="counter" data-target="12">0</span><sup>+</sup>
                    </div>
                    <span class="text-brand-gold font-bold uppercase tracking-[0.2em] text-[10px] mb-2 block">Years</span>
                    <h3 class="text-lg font-serif font-medium text-brand-dark/80">Legacy of Expertise</h3>
                </div>

<div class="p-16 text-center border-r border-b md:border-b-0 border-gray-50 group hover:bg-[#FAFAFA] transition-colors duration-700">
                    <div class="text-6xl font-serif font-bold text-brand-dark mb-4 transition-transform duration-500 group-hover:scale-110">
                        <span class="counter" data-target="350">0</span><sup>+</sup>
                    </div>
                    <span class="text-brand-gold font-bold uppercase tracking-[0.2em] text-[10px] mb-2 block">Families</span>
                    <h3 class="text-lg font-serif font-medium text-brand-dark/80">Happy Homeowners</h3>
                </div>

<div class="p-16 text-center border-gray-50 group hover:bg-[#FAFAFA] transition-colors duration-700">
                    <div class="text-6xl font-serif font-bold text-brand-dark mb-4 transition-transform duration-500 group-hover:scale-110">
                        <span class="counter" data-target="100">0</span><sup>%</sup>
                    </div>
                    <span class="text-brand-gold font-bold uppercase tracking-[0.2em] text-[10px] mb-2 block">Integrity</span>
                    <h3 class="text-lg font-serif font-medium text-brand-dark/80">Transparency Record</h3>
                </div>
            </div>
            
            <div class="mt-12 text-center reveal-up">
                <p class="text-gray-400 font-light text-sm italic">Every number tells a story of trust, one plot at a time.</p>
            </div>
        </div>
    </section>

<section class="py-32 bg-white relative overflow-hidden">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row md:items-end justify-between mb-24 reveal-up">
                <div class="max-w-2xl">
                    <span class="text-brand-gold font-bold uppercase tracking-[0.4em] text-xs mb-4 block">The Process</span>
                    <h2 class="text-4xl md:text-5xl font-serif font-bold text-brand-dark leading-tight">A Seamless Journey <br>to Ownership</h2>
                </div>
                <div class="mt-6 md:mt-0">
                    <div class="w-20 h-[1px] bg-brand-gold ml-auto mb-4 hidden md:block"></div>
                </div>
            </div>

<div class="hidden lg:block relative py-12">
                
                <div class="absolute top-1/2 left-0 w-full h-[1px] bg-gray-100 -translate-y-1/2">
                    <div id="timeline-progress" class="h-full bg-brand-gold shadow-[0_0_10px_rgba(212,175,55,0.5)] w-0"></div>
                </div>

<div class="grid grid-cols-4 gap-12 relative z-10">
                    
                    <div class="process-step group">
                        <div class="w-20 h-20 bg-white border border-gray-100 rounded-full flex items-center justify-center mx-auto mb-8 relative transition-all duration-500 group-hover:border-brand-gold group-hover:shadow-[0_10px_30px_rgba(212,175,55,0.15)] bg-white ring-8 ring-white z-20">
                            <i class="fas fa-clipboard-list text-xl text-gray-400 group-hover:text-brand-gold transition-colors"></i>
                            <div class="absolute -top-2 -right-2 w-8 h-8 bg-brand-gold text-white text-[10px] font-bold flex items-center justify-center rounded-full border-4 border-white">01</div>
                        </div>
                        <div class="text-center group-hover:-translate-y-2 transition-transform duration-500 px-4">
                            <h3 class="text-lg font-serif font-bold text-brand-dark mb-3">Understanding</h3>
                            <p class="text-xs text-gray-500 leading-relaxed font-light">Analyzing your specific needs — budget, location, and investment goals.</p>
                        </div>
                    </div>

<div class="process-step group">
                        <div class="w-20 h-20 bg-white border border-gray-100 rounded-full flex items-center justify-center mx-auto mb-8 relative transition-all duration-500 group-hover:border-brand-gold group-hover:shadow-[0_10px_30px_rgba(212,175,55,0.15)] bg-white ring-8 ring-white z-20">
                            <i class="fas fa-filter text-xl text-gray-400 group-hover:text-brand-gold transition-colors"></i>
                            <div class="absolute -top-2 -right-2 w-8 h-8 bg-brand-gold text-white text-[10px] font-bold flex items-center justify-center rounded-full border-4 border-white">02</div>
                        </div>
                        <div class="text-center group-hover:-translate-y-2 transition-transform duration-500 px-4">
                            <h3 class="text-lg font-serif font-bold text-brand-dark mb-3">Verification</h3>
                            <p class="text-xs text-gray-500 leading-relaxed font-light">Curating a list of premium, legally verified plots with clear titles.</p>
                        </div>
                    </div>

<div class="process-step group">
                        <div class="w-20 h-20 bg-white border border-gray-100 rounded-full flex items-center justify-center mx-auto mb-8 relative transition-all duration-500 group-hover:border-brand-gold group-hover:shadow-[0_10px_30px_rgba(212,175,55,0.15)] bg-white ring-8 ring-white z-20">
                            <i class="fas fa-map-marker-alt text-xl text-gray-400 group-hover:text-brand-gold transition-colors"></i>
                            <div class="absolute -top-2 -right-2 w-8 h-8 bg-brand-gold text-white text-[10px] font-bold flex items-center justify-center rounded-full border-4 border-white">03</div>
                        </div>
                        <div class="text-center group-hover:-translate-y-2 transition-transform duration-500 px-4">
                            <h3 class="text-lg font-serif font-bold text-brand-dark mb-3">Experience</h3>
                            <p class="text-xs text-gray-500 leading-relaxed font-light">Guided site visits with full document disclosure and risk transparency.</p>
                        </div>
                    </div>

<div class="process-step group">
                        <div class="w-20 h-20 bg-white border border-gray-100 rounded-full flex items-center justify-center mx-auto mb-8 relative transition-all duration-500 group-hover:border-brand-gold group-hover:shadow-[0_10px_30px_rgba(212,175,55,0.15)] bg-white ring-8 ring-white z-20">
                            <i class="fas fa-shield-alt text-xl text-gray-400 group-hover:text-brand-gold transition-colors"></i>
                            <div class="absolute -top-2 -right-2 w-8 h-8 bg-brand-gold text-white text-[10px] font-bold flex items-center justify-center rounded-full border-4 border-white">04</div>
                        </div>
                        <div class="text-center group-hover:-translate-y-2 transition-transform duration-500 px-4">
                            <h3 class="text-lg font-serif font-bold text-brand-dark mb-3">Establishment</h3>
                            <p class="text-xs text-gray-500 leading-relaxed font-light">Smooth registration with zero hidden costs and post-sale support.</p>
                        </div>
                    </div>
                </div>
            </div>

<div class="lg:hidden space-y-12">
                <div class="flex gap-6 reveal-left">
                    <div class="flex-shrink-0 w-12 h-12 bg-white border border-brand-gold text-brand-gold rounded-xl flex items-center justify-center font-bold">01</div>
                    <div>
                        <h3 class="text-xl font-serif font-bold text-brand-dark mb-2">Requirement Analysis</h3>
                        <p class="text-sm text-gray-500 leading-relaxed">Understanding your lifestyle and investment vision in Yelagiri.</p>
                    </div>
                </div>
                <div class="flex gap-6 reveal-left">
                    <div class="flex-shrink-0 w-12 h-12 bg-white border border-brand-gold text-brand-gold rounded-xl flex items-center justify-center font-bold">02</div>
                    <div>
                        <h3 class="text-xl font-serif font-bold text-brand-dark mb-2">Legal Verification</h3>
                        <p class="text-sm text-gray-500 leading-relaxed">Strict title checks and documentation for total peace of mind.</p>
                    </div>
                </div>
                <div class="flex gap-6 reveal-left">
                    <div class="flex-shrink-0 w-12 h-12 bg-white border border-brand-gold text-brand-gold rounded-xl flex items-center justify-center font-bold">03</div>
                    <div>
                        <h3 class="text-xl font-serif font-bold text-brand-dark mb-2">Site Immersion</h3>
                        <p class="text-sm text-gray-500 leading-relaxed">Mentored property tours to experience the location first-hand.</p>
                    </div>
                </div>
                <div class="flex gap-6 reveal-left">
                    <div class="flex-shrink-0 w-12 h-12 bg-white border border-brand-gold text-brand-gold rounded-xl flex items-center justify-center font-bold">04</div>
                    <div>
                        <h3 class="text-xl font-serif font-bold text-brand-dark mb-2">Hassle-Free Handover</h3>
                        <p class="text-sm text-gray-500 leading-relaxed">Transparent closing and dedicated documentation assistance.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 bg-[#FDFDFD] border-t border-gray-50">
        <div class="container mx-auto px-6">
            <div class="flex flex-wrap justify-center gap-12 md:gap-24 opacity-60 grayscale hover:grayscale-0 transition-all duration-700">
                <div class="flex items-center gap-3">
                    <i class="fas fa-check-circle text-brand-gold"></i>
                    <span class="text-[10px] uppercase tracking-[0.2em] font-bold text-brand-dark">Legal Excellence</span>
                </div>
                <div class="flex items-center gap-3">
                    <i class="fas fa-award text-brand-gold"></i>
                    <span class="text-[10px] uppercase tracking-[0.2em] font-bold text-brand-dark">Premier Agency</span>
                </div>
                <div class="flex items-center gap-3">
                    <i class="fas fa-map-marked-alt text-brand-gold"></i>
                    <span class="text-[10px] uppercase tracking-[0.2em] font-bold text-brand-dark">Local Authority</span>
                </div>
                <div class="flex items-center gap-3">
                    <i class="fas fa-shield-alt text-brand-gold"></i>
                    <span class="text-[10px] uppercase tracking-[0.2em] font-bold text-brand-dark">Secure Investment</span>
                </div>
            </div>
        </div>
    </section>

<?php
ob_start();
?>
    <script>
        // Initialize GSAP
        gsap.registerPlugin(ScrollTrigger);

// Hero Animations
        window.addEventListener('load', () => {
            const tl = gsap.timeline();
            tl.to("#hero-title", { y: 0, duration: 1.5, ease: "expo.out" })
              .to("#hero-divider", { width: "100px", duration: 1, ease: "power2.out" }, "-=0.8")
              .to("#hero-subtitle", { y: 0, duration: 1.2, ease: "power2.out" }, "-=0.6");

gsap.to("#hero-bg", {
                yPercent: 10,
                scale: 1,
                scrollTrigger: {
                    trigger: "header",
                    start: "top top",
                    end: "bottom top",
                    scrub: true
                }
            });
        });

// Story Image Perspective Zoom
        gsap.to("#story-image", {
            scale: 1,
            scrollTrigger: {
                trigger: ".reveal-image",
                start: "top bottom",
                end: "bottom top",
                scrub: 1
            }
        });

// Floating Card Movement
        gsap.to(".floating-card", {
            y: -40,
            scrollTrigger: {
                trigger: ".reveal-image",
                start: "top bottom",
                end: "bottom top",
                scrub: 2
            }
        });

// Staggered Text Revels
        gsap.utils.toArray('.stagger-text > *').forEach((item, i) => {
            gsap.from(item, {
                opacity: 0,
                y: 30,
                duration: 1,
                scrollTrigger: {
                    trigger: item,
                    start: "top 90%",
                }
            });
        });

// Reveal Up Common Class
        gsap.utils.toArray('.reveal-up').forEach((item) => {
            gsap.from(item, {
                opacity: 0,
                y: 50,
                duration: 1.2,
                scrollTrigger: {
                    trigger: item,
                    start: "top 85%",
                }
            });
        });

// Reveal Left Common Class (Mobile Process)
        gsap.utils.toArray('.reveal-left').forEach((item) => {
            gsap.from(item, {
                opacity: 0,
                x: -30,
                duration: 1,
                scrollTrigger: {
                    trigger: item,
                    start: "top 90%",
                }
            });
        });

// Counter Animation
        gsap.utils.toArray('.counter').forEach((counter) => {
            const target = +counter.getAttribute('data-target');
            gsap.to(counter, {
                innerText: target,
                duration: 2,
                snap: { innerText: 1 },
                scrollTrigger: {
                    trigger: counter,
                    start: "top 90%",
                }
            });
        });

// Timeline Progress
        if (document.getElementById('timeline-progress')) {
            gsap.to("#timeline-progress", {
                width: "100%",
                scrollTrigger: {
                    trigger: ".lg\\:block.relative.py-12",
                    start: "top 60%",
                    end: "bottom 60%",
                    scrub: 1
                }
            });
        }

// Scroll to Top Logic
        document.addEventListener('DOMContentLoaded', () => {
            const scrollToTopBtn = document.getElementById('scroll-to-top');
            if (scrollToTopBtn) {
                window.addEventListener('scroll', () => {
                    if (window.scrollY > 500) {
                        gsap.to(scrollToTopBtn, { 
                            opacity: 1, 
                            visibility: 'visible', 
                            y: 0, 
                            duration: 0.8, 
                            ease: "power2.out" 
                        });
                    } else {
                        gsap.to(scrollToTopBtn, { 
                            opacity: 0, 
                            visibility: 'hidden', 
                            y: 40, 
                            duration: 0.8, 
                            ease: "power2.in" 
                        });
                    }
                });

scrollToTopBtn.addEventListener('click', () => {
                    gsap.to(window, { 
                        scrollTo: 0, 
                        duration: 1.5, 
                        ease: "power2.inOut" 
                    });
                });
            }
        });
    </script>
<?php
$extra_scripts = ob_get_clean();
include 'includes/footer.php';
?>

Batal

⬅ yelagiri.co.in 46 item

Nama	Tipe	Ukuran	Diubah	Aksi
📁admin	dir	—	2026-07-10 04:36	📂 Buka
📁assets	dir	—	2026-01-25 15:45	📂 Buka
📁config	dir	—	2026-01-25 15:45	📂 Buka
📁includes	dir	—	2026-01-25 15:45	📂 Buka
📁js	dir	—	2026-01-25 15:45	📂 Buka
📁logs	dir	—	2026-01-25 15:45	📂 Buka
📁uploads	dir	—	2026-01-25 16:31	📂 Buka
📁vendor	dir	—	2026-01-25 15:44	📂 Buka
📄.htaccess	htaccess	1.9 KB	2026-01-25 15:43	✏️ 👁️
🐘about.php	php	22.9 KB	2026-01-26 05:52	✏️ 👁️
🐘add_more_amenities.php	php	2.2 KB	2026-01-25 15:43	✏️ 👁️
🐘add_slug_column.php	php	286 B	2026-01-25 15:43	✏️ 👁️
🐘booking.php	php	21.2 KB	2026-01-25 15:43	✏️ 👁️
🐘booking_success.php	php	4.6 KB	2026-01-25 15:43	✏️ 👁️
🐘check_php_config.php	php	206 B	2026-01-25 15:43	✏️ 👁️
🐘check_rooms.php	php	305 B	2026-01-25 15:43	✏️ 👁️
📋composer.json	json	103 B	2026-01-25 15:43	✏️ 👁️
📄composer.lock	lock	54 KB	2026-01-25 15:43	✏️ 👁️
🐘contact.php	php	8.7 KB	2026-01-25 15:43	✏️ 👁️
🐘contact_action.php	php	1.4 KB	2026-01-25 15:43	✏️ 👁️
🐘db.php	php	1.1 KB	2026-07-10 04:15	✏️ 👁️
🐘debug_live.php	php	1.6 KB	2026-01-25 15:43	✏️ 👁️
🐘default.php	php	16 KB	2026-01-25 15:43	✏️ 👁️
🖼️favicon.png	png	328.6 KB	2026-01-25 15:43	✏️ 👁️
🖼️favicons.png	png	117.5 KB	2026-01-25 15:43	✏️ 👁️
🐘fix_db_column.php	php	269 B	2026-01-25 15:43	✏️ 👁️
🗃️hotel_booking.sql	sql	4.3 KB	2026-01-25 15:43	✏️ 👁️
🗃️house_enquiries.sql	sql	531 B	2026-01-25 15:43	✏️ 👁️
🐘houses.php	php	24.3 KB	2026-01-25 15:43	✏️ 👁️
🐘index.php	php	31.9 KB	2026-01-26 05:10	✏️ 👁️
🐘install_house_enquiries.php	php	984 B	2026-01-25 15:43	✏️ 👁️
🐘install_notifications_table.php	php	485 B	2026-01-25 15:43	✏️ 👁️
🐘install_property_enquiries.php	php	839 B	2026-01-25 15:43	✏️ 👁️
🐘install_room_type.php	php	292 B	2026-01-25 15:43	✏️ 👁️
🐘luxury-stays.php	php	22.1 KB	2026-01-27 07:28	✏️ 👁️
🐘plot_details.php	php	44.6 KB	2026-02-12 14:22	✏️ 👁️
🐘plots-in-yelagiri.php	php	11.6 KB	2026-02-12 14:21	✏️ 👁️
🐘plots.php	php	14.9 KB	2026-01-25 15:43	✏️ 👁️
🐘process_booking.php	php	4.2 KB	2026-01-25 15:43	✏️ 👁️
🗃️property_enquiries.sql	sql	477 B	2026-01-25 15:43	✏️ 👁️
🐘property_enquiry_action.php	php	4.5 KB	2026-01-25 16:36	✏️ 👁️
📝robots.txt	txt	328 B	2026-01-25 15:43	✏️ 👁️
🐘room_details.php	php	34.4 KB	2026-01-26 05:52	✏️ 👁️
📄sitemap.xml	xml	1.7 KB	2026-01-25 15:43	✏️ 👁️
🐘test_submission.php	php	989 B	2026-01-25 15:43	✏️ 👁️
🐘villas-in-yelagiri.php	php	26.2 KB	2026-02-09 10:23	✏️ 👁️

✏️ Rename