:root{--page-title-display:none;}/* Start custom CSS */<!doctype html>
<html lang="hi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>आपकी साइट का नाम — होम</title>
  <meta name="description" content="आपकी साइट का छोटा परिचय — ताज़ा खबरें, ब्लॉग और विश्लेषण" />
  <meta name="robots" content="index,follow" />

  <!-- Basic styling (pure CSS, copy‑right free) -->
  <style>
    :root{--bg:#f7f7f9;--card:#fff;--muted:#6b7280;--accent:#0f172a}
    *{box-sizing:border-box}
    body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg);color:var(--accent);line-height:1.45}
    .container{max-width:1100px;margin:0 auto;padding:20px}

    /* Header */
    header{background:#fff;border-bottom:1px solid #e6e9ee;position:sticky;top:0;z-index:50}
    .topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
    .brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--accent)}
    .brand img{width:46px;height:46px;border-radius:8px;object-fit:cover}
    .nav{display:flex;gap:10px;align-items:center}
    .nav a{padding:8px 12px;border-radius:8px;text-decoration:none;color:var(--accent);font-size:14px}
    .search{border:1px solid #e2e8f0;padding:6px 10px;border-radius:999px}

    /* Layout grid */
    .layout{display:grid;grid-template-columns:1fr 320px;gap:22px;margin-top:22px}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr 320px;gap:18px}
    .hero-main{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(19,24,31,0.04)}
    .hero-main h1{margin:0;font-size:22px}
    .hero-main p{color:var(--muted);margin-top:8px}
    .hero-side{background:linear-gradient(180deg,#fff,#fafafa);padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:12px}

    /* Cards grid */
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
    .card{background:var(--card);padding:12px;border-radius:12px;border:1px solid #eef2f7}
    .card img{width:100%;height:140px;object-fit:cover;border-radius:8px}
    .card h3{margin:8px 0 4px;font-size:16px}
    .card p{margin:0;color:var(--muted);font-size:14px}

    /* Sidebar widgets */
    .widget{background:var(--card);padding:12px;border-radius:12px;border:1px solid #eef2f7}
    .small{font-size:13px;color:var(--muted)}

    /* Footer */
    footer{margin-top:36px;padding:18px 0;text-align:center;color:var(--muted);font-size:13px}

    /* Responsive */
    @media (max-width:980px){.layout{grid-template-columns:1fr}.hero{grid-template-columns:1fr}}
  </style>
</head>
<body>
  <!-- Header -->
  <header>
    <div class="container topbar">
      <a class="brand" href="/">
        <!-- अपना लोगो रखिए: logo.png -->
        <img src="https://picsum.photos/seed/logo/200/200" alt="logo">
        <div>
          <div style="font-weight:700">SITE NAME</div>
          <div style="font-size:12px;color:var(--muted)">ताज़ा खबरें • ब्लॉग</div>
        </div>
      </a>

      <div style="display:flex;gap:10px;align-items:center">
        <input class="search" placeholder="खोजें..." aria-label="Search">
        <nav class="nav" aria-label="Main navigation">
          <a href="/category/latest">लेटेस्ट</a>
          <a href="/category/tech">टेक</a>
          <a href="/category/business">बिज़नेस</a>
        </nav>
      </div>
    </div>
  </header>

  <main class="container">
    <!-- Hero -->
    <section class="hero">
      <div class="hero-main">
        <div style="display:flex;gap:12px;align-items:flex-start">
          <img src="https://picsum.photos/seed/hero/800/450" alt="featured" style="width:48%;border-radius:10px;object-fit:cover">
          <div style="flex:1">
            <div style="font-size:12px;color:var(--muted);text-transform:uppercase;margin-bottom:6px">Featured</div>
            <h1 style="margin:0 0 8px;font-size:20px">मुख्य समाचार: यहां आपकी प्रमुख कहानी की सुर्ख़ियाँ लिखें</h1>
            <p class="small">छोटा विवरण — यह जगह आकर्षक सार लिखने के लिए है जिससे पढ़ने वाला क्लिक करे।</p>
            <div style="margin-top:12px;display:flex;gap:8px;align-items:center">
              <a href="/post/featured" style="padding:9px 12px;border-radius:10px;background:#111827;color:#fff;text-decoration:none;font-weight:600">पूरा पढ़ें</a>
              <span class="small">• 3 मिनट पढ़ने को</span>
            </div>
          </div>
        </div>
      </div>

      <aside class="hero-side">
        <!-- Ad placeholder - Google AdSense code डालें जहां आवश्यक हो -->
        <div class="widget">
          <div style="font-weight:600">विज्ञापन</div>
          <div style="height:120px;display:grid;place-items:center;background:#f3f4f6;border-radius:8px;margin-top:8px;color:var(--muted)">300×250 Ad</div>
        </div>

        <div class="widget">
          <div style="font-weight:600">सब्सक्राइब करें</div>
          <p class="small">हमारे टॉप लेख अपने इनबॉक्स में पाएं</p>
          <form action="/subscribe" method="post" style="margin-top:8px;display:flex;gap:8px">
            <input name="email" type="email" placeholder="ईमेल" style="flex:1;padding:8px;border-radius:8px;border:1px solid #e6e9ee">
            <button style="padding:8px 12px;border-radius:8px;background:#111827;color:#fff;border:none">सब्सक्राइब</button>
          </form>
        </div>
      </aside>
    </section>

    <!-- Main layout: posts + sidebar -->
    <section class="layout">
      <!-- Posts column -->
      <div>
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px">
          <h2 style="margin:0">लेटेस्ट पोस्ट</h2>
          <a class="small" href="/category/latest">सभी देखें →</a>
        </div>

        <div class="grid" id="postsGrid">
          <!-- JS से पोस्ट कार्ड्स आएँगे -->
        </div>

        <!-- Pagination (simple) -->
        <div style="margin-top:18px;display:flex;gap:8px;justify-content:center">
          <button style="padding:8px 12px;border-radius:8px;border:1px solid #e6e9ee;background:#fff">← पिछला</button>
          <button style="padding:8px 12px;border-radius:8px;border:1px solid #e6e9ee;background:#fff">आगे →</button>
        </div>
      </div>

      <!-- Sidebar -->
      <aside style="display:flex;flex-direction:column;gap:12px">
        <div class="widget">
          <div style="font-weight:600">लोकप्रिय</div>
          <ol style="margin:8px 0 0;padding-left:18px;color:var(--muted)">
            <li><a href="#">सबसे लोकप्रिय लेख 1</a></li>
            <li><a href="#">लोकप्रिय लेख 2</a></li>
            <li><a href="#">लोकप्रिय लेख 3</a></li>
          </ol>
        </div>

        <div class="widget">
          <div style="font-weight:600">कौन लिखा</div>
          <p class="small">यहाँ साइट के संपादकीय नियम, लेखक और संपर्क जानकारी रखें।</p>
        </div>

        <div class="widget">
          <div style="font-weight:600">विज्ञापन</div>
          <div style="height:100px;display:grid;place-items:center;background:#f3f4f6;border-radius:8px;color:var(--muted)">Sidebar Ad</div>
        </div>
      </aside>
    </section>

    <!-- Footer -->
    <footer>
      <div class="container">
        <div style="display:flex;flex-direction:column;gap:8px;align-items:center">
          <div style="font-weight:700">SITE NAME</div>
          <div class="small">© <span id="year"></span> SITE NAME. All rights reserved. | <a href="/privacy">Privacy</a> • <a href="/terms">Terms</a></div>
        </div>
      </div>
    </footer>
  </main>

  <!-- Minimal JS: posts render + small helpers -->
  <script>
    const posts = [
      {title:'नयी शिक्षा नीति पर बड़ा अपडेट',excerpt:'सरकार ने शिक्षा नीति में संशोधन किए...',img:'https://picsum.photos/seed/p1/600/400',slug:'/post/1'},
      {title:'5G का अगला विस्तार',excerpt:'कई शहरों में 5G की लागू करने की योजना...',img:'https://picsum.photos/seed/p2/600/400',slug:'/post/2'},
      {title:'स्टार्टअप फंडिंग में वृद्धि',excerpt:'नए निवेश के संकेत...',img:'https://picsum.photos/seed/p3/600/400',slug:'/post/3'},
      {title:'ओटीटी पर गर्म रिलीज़',excerpt:'यह हफ्ता कौन‑सी फिल्में देखें...',img:'https://picsum.photos/seed/p4/600/400',slug:'/post/4'}
    ];

    const grid = document.getElementById('postsGrid');
    grid.innerHTML = posts.map(p => `\n      <article class="card">\n        <a href="${p.slug}" style="text-decoration:none;color:inherit">\n          <img src="${p.img}" alt="${p.title}" loading="lazy">\n          <h3>${p.title}</h3>\n          <p>${p.excerpt}</p>\n        </a>\n      </article>\n    `).join('');

    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</body>
</html>/* End custom CSS */