Initial commit

2026-06-08 20:02:50 +05:30
parent 915673103b
commit a145241075
305 changed files with 3271 additions and 106 deletions
@@ -0,0 +1,210 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "About Us — Yamuna Expressway Authority" };
+
+const IMG = "/img/";
+
+const COMPANIES = [
+  { name: "JL Contractor", country: "United States", tag: "Excellence in Construction & Infrastructure", desc: "Leading construction and infrastructure solutions provider in the United States, specializing in commercial buildings, highways, and large-scale infrastructure projects.", s1: "150+", s2: "20+", logo: "d48ff36e874da766aa3b84f0db1770e720501a4b" },
+  { name: "HouseCoin", country: "United States", tag: "Redefining Property Technology", desc: "Innovative real estate technology and property management platform transforming how properties are bought, sold, and managed in the digital age.", s1: "5000+", s2: "50K+", logo: "" },
+  { name: "Tapobhumi Projects", country: "India", tag: "Creating Landmark Developments", desc: "Premier residential and commercial development company in India, sustainable communities and iconic structures across major cities and destinations.", s1: "150+", s2: "20+", logo: "cce1388fd0c4acb41f7d5717d9b8be23e0dd0f23" },
+];
+
+const LEADERS = [
+  { name: "Justin Johnson", role: "CEO Founder", email: "justinj@yamunaexpressway.com", img: "e6436e45a46e69ab4de1b834e5670f917fba0d3b" },
+  { name: "Vivek Mishra", role: "Co-Founder & COO", email: "vivekm@yamunaexpressway.com", img: "0a4acf0e7d55cb2625679ef63e151e37d09bfa7a" },
+];
+
+const TEAM = [
+  { name: "Pankaj Mishra", role: "Project Manager", email: "pankaj@yamunaexpressway.com", img: "0b7c87261b26ce5b05ffa1512e77607ea822a40f" },
+  { name: "Priya Sharma", role: "Operations Head", email: "pankaj@yamunaexpressway.com", img: "6ec9dc1d3bec2b6daa67f499e88e658014d4391d" },
+  { name: "Amit Patel", role: "Chief Engineer", email: "pankaj@yamunaexpressway.com", img: "a19d44ed523529a5b722a9d59a23264b7664bf27" },
+  { name: "Sneha Reddy", role: "Finance Director", email: "pankaj@yamunaexpressway.com", img: "4f31d0bb3ef9597350034b4f2e52797a2b73fece" },
+];
+
+const EXPERTS = [
+  { n: "25+", t: "Architectural Team", d: "Licensed architects with international awards and 15+ years of luxury villa design experience" },
+  { n: "150+", t: "Construction Experts", d: "Skilled engineers, supervisors, and craftsmen ensuring premium quality at every stage" },
+  { n: "40+", t: "Project Managers", d: "Dedicated professionals managing timelines, budgets, and client communication with precision" },
+];
+
+const BADGES = [
+  { n: "9001:2015", t: "ISO Certified" },
+  { n: "Verified", t: "RERA Registered" },
+  { n: "12+", t: "Industry Awards" },
+  { n: "IGBC Rated", t: "Green Building" },
+];
+
+const STEPS = [
+  { n: "01", t: "Land Acquisition", d: "Strategic site selection in prime locations" },
+  { n: "02", t: "Planning", d: "Comprehensive project design and approval" },
+  { n: "03", t: "Development", d: "Infrastructure and amenities development" },
+  { n: "04", t: "Construction", d: "Quality construction with modern standards" },
+  { n: "05", t: "Quality Assurance", d: "Rigorous testing and verification" },
+  { n: "06", t: "Customer Delivery", d: "Smooth handover with documentation" },
+  { n: "07", t: "Support Services", d: "Ongoing customer support and assistance" },
+];
+
+export default function AboutPage() {
+  return (
+    <>
+      <section className="faq-hero abt-hero">
+        <img src={`${IMG}e491ff3eb992ddab282e135da4acd830cdd8bf45.png`} alt="" className="ab-hero-bg" />
+        <div className="faq-hero-overlay" />
+        <div className="container ab-hero-inner">
+          <h1>About Us</h1>
+          <p>Building Tomorrow&rsquo;s Communities Today</p>
+        </div>
+      </section>
+
+      {/* Who we are */}
+      <section className="section ab-who">
+        <div className="container ab-who-grid">
+          <div className="ab-who-media">
+            <img src={`${IMG}8f32e2af28324687ae65ea2ddd3a1e4bf35625be.png`} alt="" />
+            <div className="ab-who-second">
+              <img src={`${IMG}fd7211f5de518867dad8aaa2094ac3528c6f51f7.png`} alt="" />
+              <span className="ab-badge"><strong>15+</strong>Years of Creating Transformative Living Experiences</span>
+            </div>
+          </div>
+          <div className="ab-who-text">
+            <h2 className="section-title">Who We Are</h2>
+            <p><strong>Yamuna Expressway</strong> is a premier real estate, infrastructure, and township development company with a proven track record of transforming land into thriving communities. With over a decade of experience, we specialize in strategic land acquisition, government approvals, infrastructure development, and community building.</p>
+            <p>Our group spans construction and development (<strong>Yamuna Expressway</strong>) to investment platforms (<strong>House Coin</strong>) and township projects (<strong>Tapobhoomi</strong>).</p>
+          </div>
+        </div>
+      </section>
+
+      {/* Group companies */}
+      <section className="section companies">
+        <div className="container">
+          <div className="companies-head">
+            <p className="eyebrow">02 — Brands</p>
+            <h2 className="section-title">Our Group Companies</h2>
+            <p className="lead center">A powerful network of specialized companies delivering excellence across construction, technology, and development</p>
+          </div>
+          <div className="companies-grid">
+            {COMPANIES.map((c) => (
+              <article key={c.name} className="company-card">
+                <div className="company-logo">
+                  {c.logo ? <img src={`${IMG}${c.logo}.png`} alt={c.name} /> : <span className="company-mark">⬢ HOUSECOIN</span>}
+                </div>
+                <span className="company-country">{c.country}</span>
+                <h3>{c.name}</h3>
+                <p className="company-tag">{c.tag}</p>
+                <p className="company-desc">{c.desc}</p>
+                <div className="company-stats">
+                  <div><strong>{c.s1}</strong><span>Projects Completed</span></div>
+                  <div><strong>{c.s2}</strong><span>Years Experience</span></div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Leadership */}
+      <section className="section ab-team">
+        <div className="container">
+          <div className="companies-head">
+            <p className="eyebrow">03 — Teams</p>
+            <h2 className="section-title">Leadership Team</h2>
+            <p className="lead center">Visionary leaders driving innovation and excellence</p>
+          </div>
+          <div className="ab-leaders">
+            <article className="ab-leader">
+              <img src={`${IMG}${LEADERS[0].img}.png`} alt={LEADERS[0].name} />
+              <div className="ab-leader-info">
+                <h3>{LEADERS[0].name}</h3>
+                <span>{LEADERS[0].role}</span>
+                <a href={`mailto:${LEADERS[0].email}`}>{LEADERS[0].email}</a>
+              </div>
+            </article>
+            <div className="ab-leader-emblem">
+              <img src={`${IMG}30626e48a07e8dee69dff426122797a6f4b26a5b.png`} alt="" />
+              <span>Registered Contractor</span>
+            </div>
+            <article className="ab-leader right">
+              <img src={`${IMG}${LEADERS[1].img}.png`} alt={LEADERS[1].name} />
+              <div className="ab-leader-info">
+                <h3>{LEADERS[1].name}</h3>
+                <span>{LEADERS[1].role}</span>
+                <a href={`mailto:${LEADERS[1].email}`}>{LEADERS[1].email}</a>
+              </div>
+            </article>
+          </div>
+
+          <div className="ab-india-head">
+            <div>
+              <h2 className="section-title">India Team</h2>
+              <p className="lead">Visionary leaders driving innovation and excellence</p>
+            </div>
+            <div className="pager-btns"><button>←</button><button>→</button></div>
+          </div>
+          <div className="ab-team-grid">
+            {TEAM.map((m) => (
+              <article key={m.name} className="ab-member">
+                <div className="ab-member-photo"><img src={`${IMG}${m.img}.png`} alt={m.name} /></div>
+                <h4>{m.name}</h4>
+                <span>{m.role}</span>
+                <a href={`mailto:${m.email}`}>{m.email}</a>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Experts */}
+      <section className="section ab-experts">
+        <div className="container">
+          <div className="why-head" style={{ marginInline: "auto", textAlign: "center" }}>
+            <p className="eyebrow">Expert Team</p>
+            <h2 className="section-title">Meet Our Experts</h2>
+            <p className="lead">Award-winning architects, experienced engineers, and dedicated construction professionals committed to excellence</p>
+          </div>
+          <div className="ab-expert-grid">
+            {EXPERTS.map((e) => (
+              <div key={e.t} className="ab-expert">
+                <div>
+                  <strong>{e.n}</strong>
+                  <h4>{e.t}</h4>
+                  <p>{e.d}</p>
+                </div>
+                <span className="ab-expert-icon">◈</span>
+              </div>
+            ))}
+          </div>
+          <div className="ab-badge-grid">
+            {BADGES.map((b) => (
+              <div key={b.t} className="ab-cert">
+                <strong>{b.n}</strong>
+                <span>{b.t}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* How we work */}
+      <section className="section ab-work">
+        <div className="container">
+          <div className="why-head">
+            <p className="eyebrow">Work</p>
+            <h2 className="section-title">How We Work</h2>
+            <p className="lead">Our proven process for excellence</p>
+          </div>
+          <div className="ab-steps">
+            {STEPS.map((s, i) => (
+              <div key={s.n} className="ab-step">
+                {i === 3 && <img className="ab-step-img" src={`${IMG}c376c66c882591b36ac351bdd4592497b8acd713.png`} alt="" />}
+                <strong>{s.n}</strong>
+                <h4>{s.t}</h4>
+                <p>{s.d}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,147 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+const IMG = "/img/";
+
+const TITLES: Record<string, string> = {
+  "construction-planning": "Construction & Planning",
+  "luxury-home-design-trends": "Luxury Home Design Trends",
+  "smart-investment-strategies": "Smart Investment Strategies",
+  "sustainable-living-spaces": "Sustainable Living Spaces",
+  "choosing-the-perfect-villa": "Choosing the Perfect Villa",
+  "future-of-luxury-real-estate": "Future of Luxury Real Estate",
+  "the-art-of-modern-architecture": "The Art of Modern Architecture",
+  "luxury-living-reimagined": "Luxury Living Reimagined",
+  "finding-value-in-prime-locations": "Finding Value in Prime Locations",
+};
+
+const titleFromSlug = (slug: string) =>
+  TITLES[slug] || slug.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+
+export function generateStaticParams() {
+  return Object.keys(TITLES).map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params;
+  return { title: `${titleFromSlug(slug)} — Yamuna Expressway Authority` };
+}
+
+const POPULAR = [
+  { t: "Find Your Adventure Live Your Passion", img: "260673733859890d3cc4cd00cba8c0197bd07e63" },
+  { t: "Ravel Beyond Your Imagination", img: "9a497e6a609739cd2eb4c7c4aab0fe269966a1ed" },
+  { t: "Adventure Awaits Around Every Corner", img: "ccbc8f48917623d3102a140714596c80fbe48ccd" },
+];
+const CATEGORY = ["Flight Booking", "Vacation Packages", "Car Rental Services", "Adventure Travel Planning", "Group Travel Organization", "Insurance Services"];
+const TAGS = ["Luxury Homes", "Modern Architecture", "Interior Design", "Smart Homes"];
+const CHECKS = ["Open and Flexible Floor Plans", "Smart Home Automation Integration", "Sustainable and Energy-Efficient Design", "Indoor-Outdoor Living Experiences", "Premium Natural Materials and Finishes"];
+
+export default async function BlogDetailPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const title = titleFromSlug(slug);
+
+  return (
+    <>
+      <section className="faq-hero">
+        <img src={`${IMG}c376c66c882591b36ac351bdd4592497b8acd713.png`} alt="" className="bl-hero-bg" />
+        <div className="faq-hero-overlay" />
+        <div className="container faq-hero-inner">
+          <h1>Latest Blog</h1>
+          <p>Architecture, approvals, construction, supervision and completion, a single accountable team for your YEIDA villa.</p>
+        </div>
+      </section>
+
+      <section className="section bd-body">
+        <div className="container bd-grid">
+          {/* main */}
+          <article className="bd-main">
+            <img className="bd-feature" src={`${IMG}6db83255bd459fd9990645d1bc5f776f02681de7.png`} alt={title} />
+            <div className="bd-meta">
+              <span><img src={`${IMG}admin.svg`} alt="" /> By admin</span>
+              <span><img src={`${IMG}calenderdetails.svg`} alt="" /> October 30, 2026</span>
+              <span><img src={`${IMG}comment.svg`} alt="" /> Comments (05)</span>
+            </div>
+            <h2 className="bd-title">{title}</h2>
+            <p>Luxury home design continues to evolve as homeowners seek spaces that combine elegance, comfort, technology, and sustainability. Modern luxury is no longer defined solely by size or extravagance—it is about creating a personalized lifestyle experience that reflects sophistication while enhancing everyday living.</p>
+            <p>Today&rsquo;s premium residences feature open-concept layouts, floor-to-ceiling glass facades, smart automation systems, and seamless indoor-outdoor integration. Architects and designers are focusing on maximizing natural light, improving functionality, and creating timeless aesthetics that remain relevant for years to come.</p>
+            <p>Whether you&rsquo;re planning a new villa, renovating an existing property, or exploring investment opportunities, understanding current luxury design trends can help you make informed decisions that add long-term value to your home.</p>
+
+            <div className="bd-split">
+              <img src={`${IMG}3c45a739408e4c5f8901dd031dd17f18921f049c.png`} alt="" />
+              <div>
+                <h3>Explore Beyond Conventional Luxury</h3>
+                <ul className="bd-checks">
+                  {CHECKS.map((c) => <li key={c}>✓ {c}</li>)}
+                </ul>
+              </div>
+            </div>
+
+            <blockquote className="bd-quote">
+              <span className="bd-quote-mark"><img src={`${IMG}quotes.svg`} alt="" /></span>
+              <p>True luxury lies in thoughtful design—where every detail serves a purpose and every space enhances the way people live.</p>
+              <footer><strong>Yamuna Expressway Design Team</strong><span>Architecture &amp; Planning Experts</span></footer>
+            </blockquote>
+
+            <h3 className="bd-h2">The Future of Premium Living</h3>
+            <p>One of the most significant shifts in luxury home design is the integration of advanced technology. Intelligent lighting systems, climate control, voice-enabled assistants, and smart security features have become essential elements of modern residences. These technologies not only improve convenience but also contribute to energy efficiency and sustainability.</p>
+            <p>Another emerging trend is the use of sustainable materials and environmentally responsible construction practices. Homeowners are increasingly choosing eco-friendly solutions that reduce environmental impact while maintaining premium aesthetics and performance.</p>
+
+            <div className="bd-tagrow">
+              <div className="bd-tags">
+                {TAGS.map((t) => <span key={t}>{t}</span>)}
+              </div>
+              <div className="bd-share">
+                <a href="#" aria-label="Facebook">f</a>
+                <a href="#" aria-label="X">x</a>
+                <a href="#" aria-label="Instagram">○</a>
+                <a href="#" aria-label="LinkedIn">in</a>
+              </div>
+            </div>
+
+            <div className="bd-comment">
+              <h3 className="bd-h2">Add a comment</h3>
+              <p className="bd-comment-note">By using form you agree with the message storage, you can contact us directly now</p>
+              <form>
+                <div className="bd-comment-row">
+                  <input type="text" placeholder="Your Name" />
+                  <input type="email" placeholder="Your Email" />
+                  <input type="url" placeholder="Your Website" />
+                </div>
+                <textarea rows={5} placeholder="Write your message" />
+                <label className="bd-check"><input type="checkbox" /> Save my name, email and website</label>
+                <button type="button" className="btn btn-dark">Post comment</button>
+              </form>
+            </div>
+          </article>
+
+          {/* sidebar */}
+          <aside className="bd-side">
+            <div className="bd-widget">
+              <h4>Search Here</h4>
+              <div className="bd-search"><input type="text" placeholder="Search.." /><button aria-label="Search">⌕</button></div>
+            </div>
+            <div className="bd-widget">
+              <h4>Popular Post</h4>
+              {POPULAR.map((p) => (
+                <Link key={p.t} href="/blog" className="bd-pop">
+                  <img src={`${IMG}${p.img}.png`} alt="" />
+                  <div><span><img src={`${IMG}calenderdetails.svg`} alt="" /> October 19, 2022</span><strong>{p.t}</strong></div>
+                </Link>
+              ))}
+            </div>
+            <div className="bd-widget">
+              <h4>Category</h4>
+              {CATEGORY.map((c) => <a key={c} href="#" className="bd-cat">{c}</a>)}
+            </div>
+            <div className="bd-widget">
+              <h4>Popular Tags</h4>
+              <div className="bd-tags">
+                {TAGS.map((t) => <span key={t}>{t}</span>)}
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,56 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = { title: "Latest Blog — Yamuna Expressway Authority" };
+
+const IMG = "/img/";
+const THUMBS = ["260673733859890d3cc4cd00cba8c0197bd07e63", "3c45a739408e4c5f8901dd031dd17f18921f049c", "6db83255bd459fd9990645d1bc5f776f02681de7"];
+
+const POSTS = [
+  { t: "Construction & Planning", c: "Festival", loc: "Vrindavan, India", d: "March 14-15, 2026", x: "Learn how strategic planning, budgeting, and expert guidance help transform your dream property into a successful investment." },
+  { t: "Luxury Home Design Trends", c: "Retreat", loc: "Rishikesh, India", d: "April 5-22, 2026", x: "Explore the latest architectural styles, smart home innovations, and interior concepts shaping modern luxury living." },
+  { t: "Smart Investment Strategies", c: "Workshop", loc: "Vrindavan, India", d: "April 20-22, 2026", x: "Discover practical insights on property appreciation, location selection, and maximizing long-term real estate returns." },
+  { t: "Sustainable Living Spaces", c: "Festival", loc: "Vrindavan, India", d: "March 14-15, 2026", x: "See how eco-friendly materials, energy-efficient designs, and green technologies are redefining contemporary homes." },
+  { t: "Choosing the Perfect Villa", c: "Retreat", loc: "Rishikesh, India", d: "April 5-22, 2026", x: "From location and layout to amenities and future value, learn what matters most when buying a premium villa." },
+  { t: "Future of Luxury Real Estate", c: "Workshop", loc: "Vrindavan, India", d: "April 20-22, 2026", x: "Understand how technology, virtual tours, and intelligent infrastructure are transforming the real estate experience." },
+  { t: "The Art of Modern Architecture", c: "Festival", loc: "Vrindavan, India", d: "March 14-15, 2026", x: "Discover how clean lines, open spaces, and innovative materials create homes that blend beauty with functionality." },
+  { t: "Luxury Living Reimagined", c: "Retreat", loc: "Rishikesh, India", d: "April 5-22, 2026", x: "Experience the perfect balance of comfort, elegance, and technology in today's most desirable residences." },
+  { t: "Finding Value in Prime Locations", c: "Workshop", loc: "Vrindavan, India", d: "April 20-22, 2026", x: "Explore how location influences lifestyle, convenience, and long-term property appreciation." },
+];
+
+const slug = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+
+export default function BlogPage() {
+  return (
+    <>
+      <section className="faq-hero">
+        <img src={`${IMG}c376c66c882591b36ac351bdd4592497b8acd713.png`} alt="" className="bl-hero-bg" />
+        <div className="faq-hero-overlay" />
+        <div className="container faq-hero-inner">
+          <h1>Latest Blog</h1>
+          <p>Architecture, approvals, construction, supervision and completion, a single accountable team for your YEIDA villa.</p>
+        </div>
+      </section>
+
+      <section className="section bl-body">
+        <div className="container bl-grid">
+          {POSTS.map((p, i) => (
+            <article key={p.t} className="bl-card">
+              <div className="bl-card-top">
+                <span className="bl-tag">{p.c}</span>
+                <span className="bl-thumb"><img src={`${IMG}${THUMBS[i % 3]}.png`} alt="" /></span>
+              </div>
+              <div className="bl-meta">
+                <span><img src={`${IMG}location.svg`} alt="" /> {p.loc}</span>
+                <span><img src={`${IMG}calender.svg`} alt="" /> {p.d}</span>
+              </div>
+              <h3>{p.t}</h3>
+              <p>{p.x}</p>
+              <Link href={`/blog/${slug(p.t)}`} className="bl-more">More Details <span className="arrow">→</span></Link>
+            </article>
+          ))}
+        </div>
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,57 @@
+"use client";
+
+export default function ContactForm() {
+  return (
+    <form className="ct-form" onSubmit={(e) => e.preventDefault()}>
+    <h2 className="section-title" style={{ fontSize: 40 }}>Let&rsquo;s connect!</h2>
+    <p className="ct-form-sub">Have questions or need assistance?   <br />  We&rsquo;re here to help!</p>
+    <div className="ct-row">
+      <div className="ct-field">
+        <span className="ct-icon">
+        <img src="/img/firstname.svg" alt="" />
+        </span>
+        <input type="text" placeholder="First Name" />
+      </div>
+      <div className="ct-field">
+        <span className="ct-icon">
+        <img src="/img/firstname.svg" alt="" />
+        </span>
+        <input type="text" placeholder="Last Name" />
+      </div>
+    </div>
+
+    <div className="ct-row">
+      <div className="ct-field">
+        <span className="ct-icon">
+        <img src="/img/emailform.svg" alt="" />
+        </span>
+        <input type="email" placeholder="Email Address" />
+      </div>
+      <div className="ct-field">
+        <span className="ct-icon">
+            <img src="/img/mobilenumber.svg" alt="" />
+        </span>
+        <input type="tel" placeholder="Mobile Number" />
+      </div>
+    </div>
+
+    <div className="ct-field ct-field-full">
+      <span className="ct-icon">
+      <img src="/img/subject.svg" alt="" />
+      </span>
+      <input type="text" placeholder="Subjects" />
+    </div>
+
+    <div className="ct-field ct-field-full ct-textarea-wrap">
+      <span className="ct-icon" style={{ alignSelf: "flex-start", marginTop: "2px" }}>
+      <img src="/img/message.svg" alt="" />
+      </span>
+      <textarea rows={5} placeholder="Write your message here..." />
+    </div>
+
+    <div className="ct-submit-row">
+    <button type="submit" className="btn btn-dark ct-submit">Submit <span className="arrow">→</span></button>
+    </div>
+  </form>
+  );
+}
@@ -0,0 +1,68 @@
+import type { Metadata } from "next";
+import ContactForm from "./ContactForm";
+
+export const metadata: Metadata = { title: "Contact Us — Yamuna Expressway Authority" };
+
+const IMG = "/img/";
+
+const METHODS = [
+  { label: "Send us an Email", value: "studio@yamunaexpressway.in", icon: "email.svg" },
+  { label: "Give us a Call", value: "+91 98106 04200", icon: "call.svg" },
+  { label: "Chat with Us", value: "Open live Chat", icon: "chat.svg" },
+];
+
+const FEATURES = [
+  { t: "Eco-Friendly Living", d: "Sustainable & green spaces", icon: "living.svg" },
+  { t: "Near Sacred Temples", d: "Spiritual locations nearby", icon: "temple.svg" },
+  { t: "Senior-Friendly", d: "Care & community living", icon: "senior.svg" },
+  { t: "Verified Properties", d: "Trusted & certified", icon: "verify.svg" },
+];
+
+export default function ContactPage() {
+  return (
+    <>
+      <section className="ct-hero">
+        <img src={`${IMG}d4614c67fe091d26d96544195cd2d16aaaf5e297.png`} alt="" className="ct-hero-bg" />
+        <div className="faq-hero-overlay" />
+        <div className="container ct-hero-inner">
+          <h1>Contact Us</h1>
+          <p>Showcasing the landmarks, infrastructure, and developments</p>
+        </div>
+        <div className="container ct-methods">
+          {METHODS.map((m) => (
+            <div key={m.label} className="ct-method">
+              <span className="ct-icon"><img src={`${IMG}${m.icon}`} alt="" /></span>
+              <span className="ct-label">{m.label}</span>
+              <strong>{m.value}</strong>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="section ct-connect">
+        <div className="container ct-connect-grid">
+          <div className="ct-photo">
+            <img src={`${IMG}fd7211f5de518867dad8aaa2094ac3528c6f51f7.png`} alt="" />
+          </div>
+          <ContactForm />
+        </div>
+      </section>
+
+      <section className="section ct-spiritual">
+        <div className="container">
+          <p className="eyebrow">02 — Spiritual Growth</p>
+          <h2 className="section-title">Smart Living. Peaceful Life.<br />Secure Investment.</h2>
+          <div className="ct-feature-grid">
+            {FEATURES.map((f, i) => (
+              <div key={f.t} className={`ct-feature ${i === 1 ? "active" : ""}`}>
+                <span className="ct-feature-icon"><img src={`${IMG}${f.icon}`} alt="" /></span>
+                <h4>{f.t}</h4>
+                <p>{f.d}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+
+const IMG = "/img/";
+
+const FAQS: [string, string][] = [
+  ["What services does Yamuna Expressway provide?", "We offer end-to-end real estate solutions, including property consultation, project planning, investment guidance, site visits, virtual walkthroughs, and assistance throughout the buying process."],
+  ["How can I schedule a property visit?", "Simply reach out via our contact form, phone, or live chat. Our team will arrange a convenient slot for an on-site or virtual visit to any of our YEIDA sector locations."],
+  ["Do you provide virtual property walkthroughs?", "Yes. Every design ships with an interactive 3D walkthrough so you can explore rooms, sun angles, view lines and finishes from any device before construction begins."],
+  ["Can I receive personalized property recommendations?", "Absolutely. Share your budget, family programme and preferred sector, and our advisors will curate plot sizes and villa designs tailored to your requirements."],
+  ["Do you assist first-time homebuyers?", "We guide first-time buyers through every step — from plot selection and approvals to design, financing guidance and final handover."],
+  ["What information should I provide when making an inquiry?", "Your name, contact details, preferred plot size or sector, budget range and timeline help us respond with the most relevant options."],
+  ["How do I know if a property is still available?", "Availability is updated in real time. Our team confirms the current status of any plot or villa programme at the time of your inquiry."],
+  ["Are there any consultation charges?", "Your first 90-minute consultation at our Yamuna Expressway studio or online is completely free. We map your needs before quoting a single rupee."],
+  ["How is my personal information protected?", "We follow strict data-protection practices. Your information is used only to assist your inquiry and is never shared with third parties without consent."],
+  ["How can I contact customer support?", "Reach us at +91 98106 04200, studio@yamunaexpressway.in, or via live chat — Monday to Saturday, 10:00 to 19:00."],
+  ["Can international buyers purchase properties through your platform?", "Yes. We assist international and NRI buyers with documentation, approvals and remote walkthroughs throughout the purchase journey."],
+];
+
+export default function FaqPage() {
+  const [open, setOpen] = useState(0);
+  return (
+    <>
+      <section className="faq-hero">
+        <img src={`${IMG}58d2240eff1d4604980dfaa6af286e11d622102d.png`} alt="" className="faq-hero-bg" />
+        <div className="faq-hero-overlay" />
+        <div className="container faq-hero-inner">
+          <h1>Frequently Asked Questions</h1>
+          <p>Last Updated: 26 January 2026</p>
+        </div>
+      </section>
+
+      <section className="section faq-body">
+        <div className="container faq-grid">
+          <div className="faq-photo">
+            <img src={`${IMG}fd7211f5de518867dad8aaa2094ac3528c6f51f7.png`} alt="" />
+          </div>
+          <div className="faq-list">
+            {FAQS.map(([q, a], i) => (
+              <div key={q} className={`faq-item ${i === open ? "open" : ""}`}>
+                <button className="faq-q" onClick={() => setOpen(i === open ? -1 : i)}>
+                  <span>{q}</span>
+                  <i>{i === open ? "−" : "+"}</i>
+                </button>
+                {i === open && <p className="faq-a">{a}</p>}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
@@ -1,26 +0,0 @@
-@import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
@@ -1,20 +1,13 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import "./style.css";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import ScrollFX from "@/components/ScrollFX";

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Yamuna Expressway Authority — Build Your Dream Home",
+  description:
+    "Architecture, approvals, construction, supervision and completion — a single accountable team for your YEIDA villa on the Yamuna Expressway.",
 };

 export default function RootLayout({
@@ -23,11 +16,13 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="min-h-full flex flex-col">{children}</body>
+    <html lang="en">
+      <body>
+        <Header />
+        <main>{children}</main>
+        <Footer />
+        <ScrollFX />
+      </body>
    </html>
  );
 }
@@ -1,65 +1,467 @@
-import Image from "next/image";
+"use client";

-export default function Home() {
+import { useState } from "react";
+import Link from "next/link";
+import DreamStages from "@/components/DreamStages";
+
+const IMG = "/img/";
+
+/* ----------------------------- data ----------------------------- */
+const FEATURES = [
+  "Luxury Construction",
+  "Completion Assistance",
+  "3D Planning",
+  "Transparent Pricing",
+  "Fast-Track Delivery",
+  "Map Sanction",
+  "Authority Support",
+];
+
+const VILLAS = [
+  { name: "The Studio", price: "₹ 62 L Onwards", desc: "Starter luxury villa · YEIDA Sector 18", months: "8 months", bhk: "2 BHK + Study", sqm: "300 SQM", floor: "G", img: "260673733859890d3cc4cd00cba8c0197bd07e63" },
+  { name: "The Concise", price: "₹ 78 L Onwards", desc: "Compact luxury villa · YEIDA Sector 18", months: "10 months", bhk: "2 BHK + Study", sqm: "400 SQM", floor: "G", img: "2b11df2c1b3ab3fe9367d57ff8965f82e176bf9d" },
+  { name: "The Garden", price: "₹ 1.1 Cr Onwards", desc: "Garden-facing villa · YEIDA Sector 20", months: "11 months", bhk: "3 BHK + Study", sqm: "1000 SQM", floor: "G", img: "3c45a739408e4c5f8901dd031dd17f18921f049c" },
+  { name: "The Atrium", price: "₹ 1.4 Cr Onwards", desc: "Family villa with courtyard · YEIDA Sector 20", months: "12 months", bhk: "4 BHK + Family", sqm: "400 SQM", floor: "G", img: "5ac76fa178443b164f80c144e980a590487e6dfe" },
+  { name: "The Veranda", price: "₹ 3.2 Cr Onwards", desc: "Signature villa with pool · YEIDA Sector 22", months: "14 months", bhk: "5 BHK + Lounge", sqm: "1000 SQM", floor: "G", img: "666e01cadb8633aefea2ea4b1bcf69d23eeecf39" },
+  { name: "The Manor", price: "₹ 4.6 Cr Onwards", desc: "Manor villa with pool + lawn · YEIDA Sector 22", months: "16 months", bhk: "4 BHK + Family", sqm: "300 SQM", floor: "G", img: "6db83255bd459fd9990645d1bc5f776f02681de7" },
+  { name: "The Reserve", price: "₹ 6.8 Cr Onwards", desc: "Reserve villa with pavilions · YEIDA Sector 24", months: "18 months", bhk: "6 BHK + Guest", sqm: "1000 SQM", floor: "G", img: "9a497e6a609739cd2eb4c7c4aab0fe269966a1ed" },
+  { name: "The Estate", price: "₹ 9.5 Cr Onwards", desc: "Reserve villa with pavilions · YEIDA Sector 24", months: "20 months", bhk: "6 BHK + Guest Wing", sqm: "1000 SQM", floor: "G", img: "da583e482b78b5c755f13845f0c99fdbf73a78fc" },
+  { name: "The Pavilion", price: "₹ 2.1 Cr Onwards", desc: "Double-height pavilion villa · YEIDA Sector 22", months: "13 months", bhk: "4 BHK + Office", sqm: "300 SQM", floor: "G", img: "e007385022aaad05abe46b68e101211b9623adb5" },
+];
+
+const WALK_TABS = [
+  { label: "VERANDA- 1000 SQM", img: "631d471a32ee1dcc3f6e79f1d5eba77011cf4a50" },
+  { label: "ATRIUM- 500 SQN", img: "6529219216839b0700cdffee82ac9490aba78014" },
+  { label: "CONCISE- 300 say", img: "888fe17730be5dc5dfc0f500a63c3ff6092ada9a" },
+  { label: "ESTATE- 4000 SQM", img: "b531d04468f7eb1eee6b5e3f79b73ed1b8d100ed" },
+];
+
+const PROJECTS = [
+  { name: "Yamuna Expressway 2009 Scheme", desc: "Premium plotted development with world-class infrastructure along the Yamuna Expressway corridor.", area: "2000+ Acres", units: "5000+ Units", time: "36 Months", badge: "Active", img: "4c1a7f34f0e3e77e692b19783a29f6714591867d", big: true },
+  { name: "Tapobhoomi Township", desc: "Spiritual residential community in the sacred city of Vrindavan with premium amenities.", area: "2000+ Acres", units: "5000+ Units", time: "36 Months", badge: "", img: "4e6c629b7443425930d9417cfc1429b56f529ba5", big: true },
+  { name: "Noida Grand Construction", desc: "Large-scale commercial and residential building project in the heart of Noida, architecture and smart building systems.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Planning Stage", img: "64eacbc46d457e3caa7ff1f4c267c7c13c2b0eae", big: false },
+  { name: "Rishikesh Development", desc: "Eco-friendly residential plots near the holy city of Rishikesh with mountain views.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Coming Soon", img: "e4361e334aae2a2478bde9df49bea7404f46c40a", big: false },
+  { name: "Future Smart Township", desc: "Next-generation smart township with integrated technology and sustainable living.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Future Development", img: "f93db7ef0ae5819bafd69306463bb2ed1d3856b1", big: false },
+];
+
+const JOURNEY = [
+  {
+    no: "01 / 06", week: "Week 1", title: "Consultation & Site Survey",
+    sub: "Discuss your vision and verify your site with expert architectural guidance.",
+    body: "Meet with our architects to discuss your vision and project requirements in detail. Our team completes site verification and soil testing to ensure accurate and reliable planning.",
+    img: "ca01253b7173e27cd1fc5ac3280f55a300f96bcc",
+    items: [["Brief & budget calibration", "Day 1"], ["Plot sector advisory", "Day 1"], ["Indicative cost band", "Day 2"], ["Engagement letter", "Day 5"]],
+  },
+  {
+    no: "02 / 06", week: "Week 4-8", title: "Design & Planning",
+    sub: "Create detailed plans, realistic 3D visuals, and refined material selections collaboratively.",
+    body: "Our architects create detailed blueprints, realistic 3D renders, and curated material selections for your vision. We refine every detail through revisions for seamless execution planning.",
+    img: "5cbc2b713ab3173098792ba280d0f70b6b91b370",
+    items: [["Brief & budget calibration", "Day 1"], ["Plot sector advisory", "Day 1"], ["Indicative cost band", "Day 2"], ["Engagement letter", "Day 5"]],
+  },
+  {
+    no: "03 / 06", week: "Week 9-11", title: "Approvals & Permissions",
+    sub: "Sit down with the architecture & approvals team.",
+    body: "Free 90-minute consult at our Yamuna Expressway studio or virtually. We map your budget, family programme, plot sector and timeline before quoting a single rupee.",
+    img: "c7d1d4e66fb753236a565bd1116cdd0e6c9c6c58",
+    items: [["Brief & budget calibration", "Day 1"], ["Plot sector advisory", "Day 1"], ["Indicative cost band", "Day 2"], ["Engagement letter", "Day 5"]],
+  },
+];
+
+const WALK_FEATURES = ["360° Room Views", "Interactive Navigation", "VR Headset Compatible", "Material Customization"];
+
+const COMPANIES = [
+  { name: "JL Contractor", country: "United States", tag: "Excellence in Construction & Infrastructure", desc: "Leading construction and infrastructure solutions provider in the United States, specializing in commercial buildings, highways, and large-scale infrastructure projects.", s1: "150+", s2: "20+", logo: "d48ff36e874da766aa3b84f0db1770e720501a4b" },
+  { name: "HouseCoin", country: "United States", tag: "Redefining Property Technology", desc: "Innovative real estate technology and property management platform transforming how properties are bought, sold, and managed in the digital age.", s1: "5000+", s2: "50K+", logo: "" },
+  { name: "Tapobhumi Projects", country: "India", tag: "Creating Landmark Developments", desc: "Premier residential and commercial development company in India, sustainable communities and iconic structures across major cities and destinations.", s1: "150+", s2: "20+", logo: "cce1388fd0c4acb41f7d5717d9b8be23e0dd0f23" },
+];
+
+const WHY = [
+  { t: "Transparent Pricing", d: "No hidden costs. Detailed BOQ with itemized pricing for every material and service." },
+  { t: "Contract-Based Construction", d: "Legal agreements protecting your investment with clear deliverables and timelines." },
+  { t: "Milestone Payments", d: "Pay only based on verified completion stages. Your money stays safe with escrow options." },
+  { t: "Dedicated Project Manager", d: "Single point of contact managing your entire project from conception to completion." },
+  { t: "Authority Support", d: "We handle all approvals, NOCs, and legal documentation with government authorities." },
+  { t: "Live Project Tracking", d: "Real-time updates via app with photos, videos, and milestone completion reports." },
+];
+
+const TESTIMONIALS = [
+  { name: "Rajeev & Vandana Mehra", role: "Owner · Plot 1000 · Sector 22", stars: 3, avatar: "112456567d96e8cf77540da1be6724c006872d85", quote: "We had spent eighteen months chasing approvals on our own. From the first meeting, the team handed us a written timeline — and then beat it. The completion certificate arrived nine weeks ahead of schedule, and the construction quality is genuinely better than any flat we have ever seen." },
+  { name: "Dr. Aditya Singh", role: "Owner · Plot 500 · Sector 20", stars: 3, avatar: "e988e6ef720aa675113d122b1059a42df6b88463", quote: "What sold us was the architecture — but what kept us was the honesty on the weekly cost sheets. Every rupee accounted for, no surprise change orders, no quiet escalations. As a doctor I rarely have time to chase contractors. I never had to." },
+  { name: "Priya & Karan Kapoor", role: "Owner · Plot 300 · Sector 18", stars: 3, avatar: "0911254513dc8e934b2c3590779029edfc045895", quote: "A first home is supposed to be stressful. Ours was not. The 3D walkthrough let us walk through three iterations before we committed, and the YEIDA approvals were handled while we were on holiday. It just worked." },
+];
+
+function Stars({ n }: { n: number }) {
  return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <span className="stars">
+      {[1, 2, 3, 4, 5].map((i) => (
+        <span key={i} className={i <= n ? "on" : ""}>★</span>
+      ))}
+    </span>
+  );
+}
+
+export default function Home() {
+  const [walk, setWalk] = useState(0);
+  const [projTab, setProjTab] = useState<"current" | "upcoming">("current");
+  const [journey, setJourney] = useState(0);
+  const [why, setWhy] = useState(0);
+
+  return (
+    <>
+      {/* ============================ HERO ============================ */}
+      <section className="hero">
+        <video
+          className="hero-bg"
+          autoPlay
+          muted
+          loop
+          playsInline
+          poster={`${IMG}0aa5ce6385ccc238bd370683062e61a261428786.png`}
+        >
+          <source src={`${IMG}builddream.mp4`} type="video/mp4" />
+        </video>
+        <div className="hero-overlay" />
+        <div className="hero-content">
+          <h1>
+            Build Your Dream Home on
+            <br />
+            <span>Yamuna Expressway</span>
+          </h1>
+          <p className="hero-sub">
+            Architecture, approvals, construction, supervision and completion,
+            <br />a single accountable team for your YEIDA villa.
+          </p>
+          <Link href="/contact" className="btn btn-light hero-cta">
+            Free Consultation <span className="arrow">→</span>
+          </Link>
+        </div>
+        <span className="hero-note">Yamuna Expressway<br />is the new NCR.</span>
+      </section>
+
+      {/* ===================== FEATURE STRIP ========================= */}
+      <div className="feature-strip">
+        <div className="feature-track">
+          {[...FEATURES, ...FEATURES].map((f, i) => (
+            <span key={i} className="feature-item">
+             <img src="/img/luxuryicon.svg" alt="" /> {f}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* ===================== EXCLUSIVE PLOTS ======================= */}
+      <section className="section plots">
+        <div className="container">
+          <div className="section-head">
+            <div>
+              <p className="eyebrow">02 — Choose Your Canvas</p>
+              <h2 className="section-title">Exclusive plot sizes for<br />elite modern homes</h2>
+            </div>
+            <div className="head-aside">
+              <p className="lead">From intimate luxury villas to sprawling palatial estates, find the perfect canvas for your architectural dreams</p>
+              <Link href="/projects" className="btn btn-dark">Explore All Programmes <span className="arrow">→</span></Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="plots-rail container">
+          {VILLAS.map((v) => (
+            <article key={v.name} className="villa-card">
+              <div className="villa-media">
+                <img src={`${IMG}${v.img}.png`} alt={v.name} />
+                <span className="villa-tags">
+                  <span>{v.bhk}</span>  <span className="villa-floor">{v.floor}</span><span>{v.sqm}</span>
+                </span>
+              
+              </div>
+              <div className="villa-body">
+              <span> <h3>{v.name}</h3>
+                <p className="villa-desc">{v.desc}</p></span> 
+                <div className="villa-foot">
+                  <div className="villa-price"><small>FROM</small>{v.price}</div>
+                  <span className="villa-months">{v.months}</span>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        <div className="container plots-pager">
+          <span className="pager-count">01 / 09</span>
+          <div className="pager-line"><span /></div>
+          <div className="pager-btns"><button>←</button><button>→</button></div>
+        </div>
+      </section>
+
+      {/* ================== LUXURY LIVING VISUALIZED ================= */}
+      <section className="section walkthrough">
+        <div className="container">
+          <div className="section-head">
+            <h2 className="section-title">Luxury Living,<br />Visualized in Advance</h2>
+            <p className="lead">Every design ships with an interactive 3D walkthrough — explore rooms, sun angles, view lines and material finishes. Toggle day or night, tap a hotspot, switch villa from any device.</p>
+          </div>
+
+          <div className="walk-stage">
+  <img
+    src={`${IMG}${WALK_TABS[walk].img}.png`}
+    alt={WALK_TABS[walk].label}
+  />
+
+  {/* Corner Borders */}
+  <span className="corner tl"></span>
+  <span className="corner tr"></span>
+  <span className="corner bl"></span>
+  <span className="corner br"></span>
+
+  <div className="walk-overlay" />
+
+  <button className="play-btn" aria-label="Play">
+    <span>▶</span>
+  </button>
+
+  <span className="walk-caption">{WALK_TABS[walk].label}</span>
+  <span className="walk-meta">
+    YEX·E-24-02 &nbsp; 04:32 · 4K · INTERACTIVE · MIDDAY
+  </span>
+</div>
+
+          <div className="walk-tabs">
+            {WALK_TABS.map((t, i) => (
+              <button key={t.label} className={`walk-tab ${i === walk ? "active" : ""}`} onClick={() => setWalk(i)}>
+                {t.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ====================== DREAM REALIZED ====================== */}
+      <DreamStages />
+
+      {/* ==================== FROM LAND TO LANDMARK ================= */}
+      <section className="section landmark">
+        <div className="container">
+          <div className="section-head">
+            <div>
+              <p className="eyebrow">04 — Case Study</p>
+              <h2 className="section-title">From Land To Landmark</h2>
+              <p className="lead" style={{ marginTop: 14 }}>From intimate luxury villas to sprawling palatial estates, find the perfect canvas for your architectural dreams</p>
+            </div>
+            <div className="proj-tabs">
+              <button className={projTab === "current" ? "active" : ""} onClick={() => setProjTab("current")}>Current Project</button>
+              <button className={projTab === "upcoming" ? "active" : ""} onClick={() => setProjTab("upcoming")}>Upcoming Project</button>
+            </div>
+          </div>
+
+          <div className="proj-big">
+            {PROJECTS.filter((p) => p.big).map((p) => (
+              <article key={p.name} className="proj-card big">
+                <div className="proj-media">
+                  <img src={`${IMG}${p.img}.png`} alt={p.name} />
+                  {p.badge && <span className="proj-badge">{p.badge}</span>}
+                </div>
+                <div className="proj-body">
+                  <h3>{p.name}</h3>
+                  <p>{p.desc}</p>
+                  <div className="proj-stats">
+                    <div><strong>{p.area}</strong><span>Total Area</span></div>
+                    <div><strong>{p.units}</strong><span>Units</span></div>
+                    <div><strong>{p.time}</strong><span>Timeline</span></div>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+
+          <div className="proj-small">
+            {PROJECTS.filter((p) => !p.big).map((p) => (
+              <article key={p.name} className="proj-card small">
+                <div className="proj-media">
+                  <img src={`${IMG}${p.img}.png`} alt={p.name} />
+                  {p.badge && <span className="proj-badge dark">{p.badge}</span>}
+                </div>
+                <div className="proj-body">
+                  <h3>{p.name}</h3>
+                  <p>{p.desc}</p>
+                  <div className="proj-stats">
+                    <div><strong>{p.area}</strong><span>Total Area</span></div>
+                    <div><strong>{p.units}</strong><span>Units</span></div>
+                    <div><strong>{p.time}</strong><span>Timeline</span></div>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ======================== YOUR JOURNEY ====================== */}
+      <section className="section journey">
+        <div className="container">
+          <div className="section-head">
+            <div>
+              <p className="eyebrow">Transparent Process</p>
+              <h2 className="section-title">Your Journey</h2>
+            </div>
+            <p className="lead">From intimate luxury villas to sprawling palatial estates, find the perfect canvas for your architectural dreams</p>
+          </div>
+
+          <div className="journey-list">
+            {JOURNEY.map((j, i) => (
+              <div key={j.title} className={`journey-row ${i === journey ? "open" : ""}`} onClick={() => setJourney(i)}>
+                <div className="journey-media">
+                  <img src={`${IMG}${j.img}.png`} alt={j.title} />
+                </div>
+                <div className="journey-main">
+                  <div className="journey-head">
+                    <span className="journey-week">{j.week}</span>
+                    <span className="journey-no">{j.no}</span>
+                  </div>
+                  <h3>{j.title}</h3>
+                  <p className="journey-sub">{j.sub}</p>
+                  {i === journey && <p className="journey-body">{j.body}</p>}
+                </div>
+                <div className="journey-items">
+                  {j.items.map(([label, day]) => (
+                    <div key={label} className="journey-item">
+                      <span>{label}</span><span className="day">{day}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ===================== VIRTUAL WALKTHROUGHS ================= */}
+      <section className="section virtual">
+        <div className="container">
+          <div className="virtual-head">
+            <h2 className="section-title">Virtual Walkthroughs</h2>
+            <p className="lead">Experience your future home in immersive 3D before construction begins. See every detail, every room, every finish.</p>
+          </div>
+          <div className="virtual-stage">
+            <img src={`${IMG}f470f21a29fb7fe287ce1d5ffb94d0b4845b5367.png`} alt="500 sqm Contemporary Villa" />
+            <div className="virtual-overlay" />
+            <button className="play-btn" aria-label="Play"><span>▶</span></button>
+            <div className="virtual-caption">
+              <h3>500 sqm Contemporary Villa</h3>
+              <p>Full 3D Virtual Walkthrough • 4 BHK • ₹85L</p>
+            </div>
+            <div className="virtual-features">
+              {WALK_FEATURES.map((f) => (
+                <span key={f}>● {f}</span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===================== GROUP COMPANIES ====================== */}
+      <section className="section companies">
+        <div className="container">
+          <div className="companies-head">
+            <p className="eyebrow">05 — Brands</p>
+            <h2 className="section-title">Our Group Companies</h2>
+            <p className="lead center">A powerful network of specialized companies delivering excellence across construction, technology, and development</p>
+          </div>
+          <div className="companies-grid">
+            {COMPANIES.map((c) => (
+              <article key={c.name} className="company-card">
+                <div className="company-logo">
+                  {c.logo ? <img src={`${IMG}${c.logo}.png`} alt={c.name} /> : <span className="company-mark">⬢ HOUSECOIN</span>}
+                </div>
+                <span className="company-country">{c.country}</span>
+                <h3>{c.name}</h3>
+                <p className="company-tag">{c.tag}</p>
+                <p className="company-desc">{c.desc}</p>
+                <div className="company-stats">
+                  <div><strong>{c.s1}</strong><span>Projects Completed</span></div>
+                  <div><strong>{c.s2}</strong><span>Years Experience</span></div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ======================= WHY CHOOSE US ====================== */}
+      <section className="section why">
+        <div className="container">
+          <div className="why-head">
+            <p className="eyebrow">Excellence Guaranteed</p>
+            <h2 className="section-title">Why Choose Us</h2>
+            <p className="lead">Industry-leading standards combined with personalized service for an unmatched construction experience</p>
+          </div>
+          <div className="why-grid">
+            <div className="why-visual">
+              <img className="why-tall" src={`${IMG}1cf7daea2239eeca5e11497628834804a0b5ec46.png`} alt="" />
+            </div>
+            <div className="why-list">
+              <img className="why-wide" src={`${IMG}888fe17730be5dc5dfc0f500a63c3ff6092ada9a.png`} alt="" />
+              {WHY.map((w, i) => (
+                <div key={w.t} className={`why-row ${i === why ? "open" : ""}`} onClick={() => setWhy(i)}>
+                  <span className="why-no">{String(i + 1).padStart(2, "0")}</span>
+                  <div className="why-text">
+                    <h4>{w.t}</h4>
+                    {i === why && <p>{w.d}</p>}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ===================== HOUSECOIN SHOWCASE =================== */}
+      <section className="showcase">
+        <img className="showcase-bg" src={`${IMG}e491ff3eb992ddab282e135da4acd830cdd8bf45.png`} alt="" />
+        <div className="showcase-overlay" />
+        <span className="showcase-brand">HOUSECOIN</span>
+        <div className="showcase-card">
+          <img src={`${IMG}dac66fb1980459d72c43173854d68cab518070cd.png`} alt="The PIQUE of Home Design" />
+          <div className="showcase-bar">
+            <span className="sc-menu">☰ MENU</span>
+            <span className="sc-logo">PIQUE</span>
+            <span className="sc-contact">✦ CONTACT</span>
+          </div>
+          <div className="showcase-caption">
+            <h3>The PIQUE of<br />Home Design</h3>
+          </div>
+        </div>
+      </section>
+
+      {/* ======================= TESTIMONIALS ======================= */}
+      <section className="section testimonials">
+        <div className="container">
+          <div className="section-head">
+            <div>
+              <p className="eyebrow">07 — Owner Stories</p>
+              <h2 className="section-title">The villas you can<br />Visit and verify.</h2>
+            </div>
+            <p className="lead">Every owner here is reachable for a reference call. Every plot is registered to verifiable YEIDA records.</p>
+          </div>
+          <div className="testi-grid">
+            {TESTIMONIALS.map((t) => (
+              <article key={t.name} className="testi-card">
+                <span className="quote-mark">&ldquo;</span>
+                <Stars n={t.stars} />
+                <p className="testi-quote">{t.quote}</p>
+                <div className="testi-author">
+                  <img src={`${IMG}${t.avatar}.png`} alt={t.name} />
+                  <div>
+                    <strong>{t.name}</strong>
+                    <span>{t.role}</span>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+          <div className="testi-more"><Link href="/blog">View all Stories</Link></div>
+        </div>
+      </section>
+    </>
  );
 }
@@ -0,0 +1,148 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "Privacy Policy — Yamuna Expressway Authority" };
+
+const IMG = "/img/";
+
+const TOC = [
+  "Overview", "Information We Collect", "How We Use Your Information", "Data Sharing",
+  "Data Security", "Data Retention", "Your Rights (GDPR)", "Cookies & Tracking",
+  "Changes to This Policy", "Governing Law", "Contact",
+];
+
+export default function PrivacyPage() {
+  return (
+    <>
+      <section className="faq-hero">
+        <img src={`${IMG}d4614c67fe091d26d96544195cd2d16aaaf5e297.png`} alt="" className="pp-hero-bg" />
+        <div className="faq-hero-overlay" />
+        <div className="container pp-hero-inner">
+          <h1>Privacy Policy</h1>
+          <p>We value your privacy and are committed to protecting your data.</p>
+        </div>
+      </section>
+
+      <section className="section pp-body">
+       
+        <div className="container pp-grid">
+          <aside className="pp-toc">
+            <h3>Table of Contents</h3>
+            <p className="pp-updated">Last Updated: 26 January 2026</p>
+            <ol>
+              {TOC.map((t, i) => (
+                <li key={t}><a href={`#sec-${i + 1}`}>{i + 1}. {t}</a></li>
+              ))}
+            </ol>
+          </aside>
+
+          <div className="pp-content">
+          <div className="pp-intro">
+          At Yamuna Expressway, we respect your privacy and are committed to protecting the personal
+          information you share with us. This Privacy Policy explains how we collect, use, store, and
+          safeguard your information when you visit our website, inquire about properties, schedule
+          consultations, or interact with our services.
+        </div>
+
+            <section id="sec-1">
+              <h2>1. Overview</h2>
+              <p>Yamuna Expressway is committed to maintaining the confidentiality and security of your personal information. By using our website, you agree to the practices outlined in this Privacy Policy.</p>
+            </section>
+
+            <section id="sec-2">
+              <h2>2. Information We Collect</h2>
+              <h4>Personal Information:</h4>
+              <ul>
+                <li>Full Name</li><li>Email Address</li><li>Phone Number</li>
+                <li>City or Location</li><li>Property Preferences</li>
+                <li>Information submitted through inquiry forms</li>
+              </ul>
+              <h4>Website Usage Information</h4>
+              <ul>
+                <li>IP Address</li><li>Browser Type</li><li>Device Information</li>
+                <li>Pages Visited</li><li>Session and Analytics Data</li>
+              </ul>
+            </section>
+
+            <section id="sec-3">
+              <h2>3. How We Use Your Information</h2>
+              <p>We use your information to:</p>
+              <ul>
+                <li>Respond to inquiries and consultation requests</li>
+                <li>Schedule site visits and property walkthroughs</li>
+                <li>Share project updates and relevant information</li>
+                <li>Improve website functionality and user experience</li>
+                <li>Analyze visitor behavior and website performance</li>
+                <li>Meet legal and regulatory obligations</li>
+              </ul>
+            </section>
+
+            <section id="sec-4">
+              <h2>4. Data Sharing</h2>
+              <p>We do not sell or rent your personal information. Information may only be shared with trusted partners strictly to deliver the services you request, or where required by law.</p>
+            </section>
+
+            <section id="sec-5">
+              <h2>5. Data Security</h2>
+              <p>We implement appropriate technical and organizational measures to protect your personal data against unauthorized access, alteration, disclosure, or destruction.</p>
+            </section>
+
+            <section id="sec-6">
+              <h2>6. Data Retention</h2>
+              <p>Personal information is retained only for as long as necessary to:</p>
+              <ul>
+                <li>Provide requested services</li>
+                <li>Manage customer relationships</li>
+                <li>Comply with legal obligations</li>
+                <li>Resolve disputes and maintain records</li>
+              </ul>
+            </section>
+
+            <section id="sec-7">
+              <h2>7. Your Rights (GDPR)</h2>
+              <p>You may have the right to:</p>
+              <ul>
+                <li>Access your personal information</li>
+                <li>Request corrections to inaccurate data</li>
+                <li>Request deletion of personal data</li>
+                <li>Withdraw marketing consent</li>
+                <li>Request details regarding data processing</li>
+              </ul>
+            </section>
+
+            <section id="sec-8">
+              <h2>8. Cookies &amp; Tracking Technologies</h2>
+              <p>Our website uses cookies to:</p>
+              <ul>
+                <li>Improve browsing experience</li>
+                <li>Remember user preferences</li>
+                <li>Measure website performance</li>
+                <li>Analyze visitor interactions</li>
+              </ul>
+            </section>
+
+            <section id="sec-9">
+              <h2>9. Changes to This Policy</h2>
+              <p>We may update this Privacy Policy from time to time. Any changes will be posted on this page with a revised &ldquo;Last Updated&rdquo; date.</p>
+            </section>
+
+            <section id="sec-10">
+              <h2>10. Governing Law</h2>
+              <p>This Privacy Policy is governed by and construed in accordance with the laws of India, and any disputes shall be subject to the jurisdiction of the courts of Uttar Pradesh.</p>
+            </section>
+
+            <section id="sec-11">
+              <h2>11. Contact</h2>
+              <p>For any privacy-related questions or requests, please contact:</p>
+              <p className="pp-contact">
+                <strong>Yamuna Expressway</strong><br />
+                Sector 18, 12th Floor, Greater Noida<br />
+                Uttar Pradesh, India<br />
+                Email: info@yamunaexpressway.com &nbsp; Phone: +91 XXXXX XXXXX
+              </p>
+            </section>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,205 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+
+const IMG = "/img/";
+
+const PROJECTS = [
+  { name: "Yamuna Expressway 2009 Scheme", desc: "Premium plotted development with world-class infrastructure along the Yamuna Expressway corridor.", area: "2000+ Acres", units: "5000+ Units", time: "36 Months", badge: "Active", img: "4c1a7f34f0e3e77e692b19783a29f6714591867d", big: true },
+  { name: "Tapobhoomi Township", desc: "Spiritual residential community in the sacred city of Vrindavan with premium amenities.", area: "2000+ Acres", units: "5000+ Units", time: "36 Months", badge: "", img: "4e6c629b7443425930d9417cfc1429b56f529ba5", big: true },
+  { name: "Noida Grand Construction", desc: "Large-scale commercial and residential building project in the heart of Noida, architecture and smart building systems.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Planning Stage", img: "64eacbc46d457e3caa7ff1f4c267c7c13c2b0eae", big: false },
+  { name: "Rishikesh Development", desc: "Eco-friendly residential plots near the holy city of Rishikesh with mountain views.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Coming Soon", img: "e4361e334aae2a2478bde9df49bea7404f46c40a", big: false },
+  { name: "Future Smart Township", desc: "Next-generation smart township with integrated technology and sustainable living.", area: "2000+ Acres", units: "5000+", time: "36 Months", badge: "Future Development", img: "f93db7ef0ae5819bafd69306463bb2ed1d3856b1", big: false },
+];
+
+const VILLAS = [
+  { name: "The Studio", price: "₹ 62 L Onwards", desc: "Starter luxury villa · YEIDA Sector 18", months: "8 months", bhk: "2 BHK + Study", sqm: "300 SQM", floor: "G", img: "260673733859890d3cc4cd00cba8c0197bd07e63" },
+  { name: "The Concise", price: "₹ 78 L Onwards", desc: "Compact luxury villa · YEIDA Sector 18", months: "10 months", bhk: "2 BHK + Study", sqm: "400 SQM", floor: "G", img: "2b11df2c1b3ab3fe9367d57ff8965f82e176bf9d" },
+  { name: "The Garden", price: "₹ 1.1 Cr Onwards", desc: "Garden-facing villa · YEIDA Sector 20", months: "11 months", bhk: "3 BHK + Study", sqm: "1000 SQM", floor: "G", img: "3c45a739408e4c5f8901dd031dd17f18921f049c" },
+  { name: "The Atrium", price: "₹ 1.4 Cr Onwards", desc: "Family villa with courtyard · YEIDA Sector 20", months: "12 months", bhk: "4 BHK + Family", sqm: "400 SQM", floor: "G", img: "5ac76fa178443b164f80c144e980a590487e6dfe" },
+  { name: "The Veranda", price: "₹ 3.2 Cr Onwards", desc: "Signature villa with pool · YEIDA Sector 22", months: "14 months", bhk: "5 BHK + Lounge", sqm: "1000 SQM", floor: "G", img: "666e01cadb8633aefea2ea4b1bcf69d23eeecf39" },
+  { name: "The Manor", price: "₹ 4.6 Cr Onwards", desc: "Manor villa with pool + lawn · YEIDA Sector 22", months: "16 months", bhk: "4 BHK + Family", sqm: "300 SQM", floor: "G", img: "6db83255bd459fd9990645d1bc5f776f02681de7" },
+  { name: "The Reserve", price: "₹ 6.8 Cr Onwards", desc: "Reserve villa with pavilions · YEIDA Sector 24", months: "18 months", bhk: "6 BHK + Guest", sqm: "1000 SQM", floor: "G", img: "9a497e6a609739cd2eb4c7c4aab0fe269966a1ed" },
+  { name: "The Estate", price: "₹ 9.5 Cr Onwards", desc: "Reserve villa with pavilions · YEIDA Sector 24", months: "20 months", bhk: "6 BHK + Guest Wing", sqm: "1000 SQM", floor: "G", img: "da583e482b78b5c755f13845f0c99fdbf73a78fc" },
+  { name: "The Pavilion", price: "₹ 2.1 Cr Onwards", desc: "Double-height pavilion villa · YEIDA Sector 22", months: "13 months", bhk: "4 BHK + Office", sqm: "300 SQM", floor: "G", img: "e007385022aaad05abe46b68e101211b9623adb5" },
+];
+
+const ACROSS = [
+  { n: "12", t: "Uttar Pradesh", icon: "🏛" },
+  { n: "5", t: "Uttarakhand", icon: "⛰" },
+  { n: "8", t: "Delhi NCR", icon: "🏙" },
+  { n: "6", t: "Haryana", icon: "🌾" },
+];
+
+const COMPANIES = [
+  { name: "JL Contractor", country: "United States", tag: "Excellence in Construction & Infrastructure", desc: "Leading construction and infrastructure solutions provider in the United States, specializing in commercial buildings, highways, and large-scale infrastructure projects.", s1: "150+", s2: "20+", logo: "d48ff36e874da766aa3b84f0db1770e720501a4b" },
+  { name: "HouseCoin", country: "United States", tag: "Redefining Property Technology", desc: "Innovative real estate technology and property management platform transforming how properties are bought, sold, and managed in the digital age.", s1: "5000+", s2: "50K+", logo: "" },
+  { name: "Tapobhumi Projects", country: "India", tag: "Creating Landmark Developments", desc: "Premier residential and commercial development company in India, sustainable communities and iconic structures across major cities and destinations.", s1: "150+", s2: "20+", logo: "cce1388fd0c4acb41f7d5717d9b8be23e0dd0f23" },
+];
+
+export default function ProjectsPage() {
+  const [projTab, setProjTab] = useState<"current" | "upcoming">("current");
+
+  return (
+    <>
+      <section className="pr-hero">
+        <img src={`${IMG}34f8cb9b04c0ce5ee0362f88dd763769431d82d8.png`} alt="" className="pr-hero-bg" />
+        <div className="pr-hero-overlay" />
+        <div className="container pr-hero-inner">
+          <h1>Our Projects</h1>
+          <p>Showcasing the landmarks, infrastructure, and developments we have successfully delivered with quality, precision, and excellence.</p>
+        </div>
+      </section>
+
+      {/* From Land To Landmark */}
+      <section className="section landmark">
+        <div className="container">
+          <div className="section-head">
+            <div>
+              <p className="eyebrow">05 — Case Study</p>
+              <h2 className="section-title">From Land To Landmark</h2>
+              <p className="lead" style={{ marginTop: 14 }}>From intimate luxury villas to sprawling palatial estates, find the perfect canvas for your architectural dreams</p>
+            </div>
+            <div className="proj-tabs">
+              <button className={projTab === "current" ? "active" : ""} onClick={() => setProjTab("current")}>Current Project</button>
+              <button className={projTab === "upcoming" ? "active" : ""} onClick={() => setProjTab("upcoming")}>Upcoming Project</button>
+            </div>
+          </div>
+
+          <div className="proj-big">
+            {PROJECTS.filter((p) => p.big).map((p) => (
+              <article key={p.name} className="proj-card big">
+                <div className="proj-media">
+                  <img src={`${IMG}${p.img}.png`} alt={p.name} />
+                  {p.badge && <span className="proj-badge">{p.badge}</span>}
+                </div>
+                <div className="proj-body">
+                  <h3>{p.name}</h3>
+                  <p>{p.desc}</p>
+                  <div className="proj-stats">
+                    <div><strong>{p.area}</strong><span>Total Area</span></div>
+                    <div><strong>{p.units}</strong><span>Units</span></div>
+                    <div><strong>{p.time}</strong><span>Timeline</span></div>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+
+          <div className="proj-small">
+            {PROJECTS.filter((p) => !p.big).map((p) => (
+              <article key={p.name} className="proj-card small">
+                <div className="proj-media">
+                  <img src={`${IMG}${p.img}.png`} alt={p.name} />
+                  {p.badge && <span className="proj-badge dark">{p.badge}</span>}
+                </div>
+                <div className="proj-body">
+                  <h3>{p.name}</h3>
+                  <p>{p.desc}</p>
+                  <div className="proj-stats">
+                    <div><strong>{p.area}</strong><span>Total Area</span></div>
+                    <div><strong>{p.units}</strong><span>Units</span></div>
+                    <div><strong>{p.time}</strong><span>Timeline</span></div>
+                  </div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Exclusive plots */}
+      <section className="section plots">
+        <div className="container">
+          <div className="section-head">
+            <div>
+              <p className="eyebrow">02 — Choose Your Canvas</p>
+              <h2 className="section-title">Exclusive plot sizes for<br />elite modern homes</h2>
+            </div>
+            <div className="head-aside">
+              <p className="lead">From intimate luxury villas to sprawling palatial estates, find the perfect canvas for your architectural dreams</p>
+              <Link href="/contact" className="btn btn-dark">Explore All Programmes <span className="arrow">→</span></Link>
+            </div>
+          </div>
+        </div>
+
+        <div className="plots-rail container">
+          {VILLAS.map((v) => (
+            <article key={v.name} className="villa-card">
+              <div className="villa-media">
+                <img src={`${IMG}${v.img}.png`} alt={v.name} />
+                <span className="villa-tags"><span>{v.bhk}</span><span>{v.sqm}</span></span>
+                <span className="villa-floor">{v.floor}</span>
+              </div>
+              <div className="villa-body">
+                <h3>{v.name}</h3>
+                <p className="villa-desc">{v.desc}</p>
+                <div className="villa-foot">
+                  <div className="villa-price"><small>FROM</small>{v.price}</div>
+                  <span className="villa-months">{v.months}</span>
+                </div>
+              </div>
+            </article>
+          ))}
+        </div>
+
+        <div className="container plots-pager">
+          <span className="pager-count">01 / 09</span>
+          <div className="pager-line"><span /></div>
+          <div className="pager-btns"><button>←</button><button>→</button></div>
+        </div>
+      </section>
+
+      {/* Projects across India */}
+      <section className="pr-across">
+        <img className="pr-across-bg" src={`${IMG}b531d04468f7eb1eee6b5e3f79b73ed1b8d100ed.png`} alt="" />
+        <div className="pr-across-overlay" />
+        <div className="container pr-across-inner">
+          <h2>Projects Across India</h2>
+          <p>Crafted with timeless modern architecture, expansive glass facades and refined luxury finishes, our developments span the country.</p>
+          <div className="pr-across-cards">
+            {ACROSS.map((a) => (
+              <div key={a.t} className="pr-across-card">
+                <div>
+                  <strong>{a.n}</strong>
+                  <span>Projects</span>
+                  <h4>{a.t}</h4>
+                </div>
+                <span className="pr-across-icon">{a.icon}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Group companies */}
+      <section className="section companies">
+        <div className="container">
+          <div className="companies-head">
+            <p className="eyebrow">06 — Brands</p>
+            <h2 className="section-title">Our Group Companies</h2>
+            <p className="lead center">A powerful network of specialized companies delivering excellence across construction, technology, and development</p>
+          </div>
+          <div className="companies-grid">
+            {COMPANIES.map((c) => (
+              <article key={c.name} className="company-card">
+                <div className="company-logo">
+                  {c.logo ? <img src={`${IMG}${c.logo}.png`} alt={c.name} /> : <span className="company-mark">⬢ HOUSECOIN</span>}
+                </div>
+                <span className="company-country">{c.country}</span>
+                <h3>{c.name}</h3>
+                <p className="company-tag">{c.tag}</p>
+                <p className="company-desc">{c.desc}</p>
+                <div className="company-stats">
+                  <div><strong>{c.s1}</strong><span>Projects Completed</span></div>
+                  <div><strong>{c.s2}</strong><span>Years Experience</span></div>
+                </div>
+              </article>
+            ))}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = { title: "Services — Yamuna Expressway Authority" };
+
+const IMG = "/img/";
+
+const SERVICES = [
+  { t: "Luxury Construction", d: "End-to-end premium villa construction with world-class materials and expert craftsmanship at every stage.", icon: "🏗" },
+  { t: "Completion Assistance", d: "A single accountable team handling supervision and handover until your dream villa is fully realized.", icon: "✅" },
+  { t: "3D Planning", d: "Interactive 3D walkthroughs and realistic renders so you can visualize every room before construction.", icon: "🧭" },
+  { t: "Transparent Pricing", d: "No hidden costs. Detailed BOQ with itemized pricing for every material and service.", icon: "💎" },
+  { t: "Fast-Track Delivery", d: "Written timelines we beat — milestone-based execution that respects your schedule.", icon: "⚡" },
+  { t: "Map Sanction", d: "We handle plot map sanctions and layout approvals with the relevant authorities.", icon: "🗺" },
+  { t: "Authority Support", d: "All approvals, NOCs, and legal documentation with government authorities, managed for you.", icon: "🏛" },
+  { t: "Live Project Tracking", d: "Real-time updates via app with photos, videos, and milestone completion reports.", icon: "📱" },
+];
+
+export default function ServicesPage() {
+  return (
+    <>
+      <section className="pr-hero">
+        <img src={`${IMG}0aa5ce6385ccc238bd370683062e61a261428786.png`} alt="" className="pr-hero-bg" />
+        <div className="pr-hero-overlay" />
+        <div className="container pr-hero-inner">
+          <h1>Our Services</h1>
+          <p>Architecture, approvals, construction, supervision and completion — a single accountable team for your YEIDA villa.</p>
+        </div>
+      </section>
+
+      <section className="section">
+        <div className="container">
+          <div className="why-head" style={{ marginInline: "auto", textAlign: "center", maxWidth: 600 }}>
+            <p className="eyebrow">What We Do</p>
+            <h2 className="section-title">Everything under one roof</h2>
+            <p className="lead">From land to landmark — a complete construction practice built on transparency, quality and accountability.</p>
+          </div>
+          <div className="sv-grid">
+            {SERVICES.map((s) => (
+              <div key={s.t} className="sv-card">
+                <span className="sv-icon">{s.icon}</span>
+                <h4>{s.t}</h4>
+                <p>{s.d}</p>
+              </div>
+            ))}
+          </div>
+          <div style={{ textAlign: "center", marginTop: 50 }}>
+            <Link href="/contact" className="btn btn-dark">Book a Free Consultation <span className="arrow">→</span></Link>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}