Typography

"use client";

import "@/src/styles/typography.css";
import { Poppins } from "next/font/google";
import Image from "next/image";

const myFont = Poppins({
  weight: ["400", "700"],
  subsets: ["latin-ext"],
});

const Example = () => (
  <div className={`${myFont.className} size-full py-10 h-[600px] overflow-y-auto`}>
    <div className="typography">
      <h1>भविष्य की डिज़ाइनिंग: सुंदर डिजिटल अनुभवों का निर्माण</h1>

      <p>
        आधुनिक डिज़ाइन केवल सौंदर्यशास्त्र के बारे में नहीं है — यह सार्थक
        अनुभव बनाने की कला है। रंग प्रणाली से लेकर गति (motion) तक, आज के
        डिज़ाइन टूल रचनाकारों को सटीकता और सुंदरता के साथ विचारों को व्यक्त
        करने की शक्ति देते हैं। इस लेख में, हम जानेंगे कि विचारशील डिज़ाइन
        सिस्टम आधुनिक वेब को कैसे आकार देते हैं।
      </p>

      <h2>परिचय</h2>
      <p>
        Figma, Framer और Penpot जैसे डिज़ाइन टूल के साथ, डिज़ाइनरों और
        डेवलपर्स के बीच सहयोग पहले से कहीं अधिक सहज हो गया है। एकीकृत डिज़ाइन
        भाषा ब्रांड की एकरूपता सुनिश्चित करती है और उत्पाद विकास की गति बढ़ाती
        है।
      </p>

      <h3>आधुनिक डिज़ाइन के मूल सिद्धांत</h3>
      <ul>
        <li>जटिलता पर स्पष्टता</li>
        <li>उद्देश्यपूर्ण रंग और टाइपोग्राफी</li>
        <li>पहुँचयोग्यता और समावेशिता को प्राथमिकता देना</li>
      </ul>

      <h3>डिज़ाइनरों के लिए आवश्यक टूल</h3>
      <ol>
        <li>UI डिज़ाइन के लिए Figma या Sketch</li>
        <li>वेक्टर ग्राफ़िक्स के लिए Adobe Illustrator</li>
        <li>प्रोटोटाइपिंग के लिए Framer या Webflow</li>
      </ol>

      <h2>डिज़ाइन वर्कफ़्लो चेकलिस्ट</h2>
      <ul>
        <li>
          <input checked disabled type="checkbox" />{" "}
          <p>रंग और टाइप स्केल निर्धारित करें</p>
        </li>
        <li>
          <input disabled type="checkbox" />{" "}
          <p>पुन: उपयोग योग्य डिज़ाइन घटक बनाएँ</p>
        </li>
        <li>
          <input disabled type="checkbox" />{" "}
          <p>पहुँचयोग्यता के लिए लेआउट का परीक्षण करें</p>
        </li>
      </ul>

      <h2>नमूना छवि</h2>
      <p>
        यहाँ एक साफ़ और संतुलित दृश्य रचना का उदाहरण दिया गया है। अच्छी डिज़ाइन
        में व्हाइटस्पेस, कंट्रास्ट और लय (rhythm) का संतुलन होता है — जिससे हर
        तत्व उद्देश्यपूर्ण महसूस होता है।
      </p>
      <center>
        <Image
          alt="आधुनिक डिज़ाइन लेआउट"
          height={400}
          src="/placeholder.svg"
          unoptimized
          width={600}
        />
      </center>

      <h2>कोड उदाहरण</h2>
      <pre>
        <code>{`/* डिज़ाइन टोकन उदाहरण */
:root {
  --color-primary: #6366f1;
  --radius-lg: 1rem;
  --font-display: "Inter", sans-serif;
}`}</code>
      </pre>

      <h2>उद्धरण</h2>
      <blockquote>
        "डिज़ाइन संस्कृति बनाता है। संस्कृति मूल्य निर्धारित करती है। मूल्य
        भविष्य को आकार देते हैं।" — रॉबर्ट एल. पीटर्स
      </blockquote>

      <h2>डिज़ाइन सिस्टम तुलना</h2>
      <table>
        <thead>
          <tr>
            <th>सिस्टम</th>
            <th>दृष्टिकोण</th>
            <th>किसके द्वारा उपयोग</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Material Design</td>
            <td>घटक-आधारित (Component-Driven)</td>
            <td>Google, Android</td>
          </tr>
          <tr>
            <td>Human Interface</td>
            <td>मार्गदर्शक-आधारित (Guideline-Based)</td>
            <td>Apple</td>
          </tr>
          <tr>
            <td>Fluent Design</td>
            <td>गति और गहराई (Motion & Depth)</td>
            <td>Microsoft</td>
          </tr>
        </tbody>
      </table>

      <h2>इनलाइन तत्व</h2>
      <p>
        ज़ोर देने के लिए <strong>बोल्ड</strong> टेक्स्ट का उपयोग करें, स्वर के
        लिए <em>इटैलिक</em>, स्पष्टता के लिए <u>रेखांकित</u> टेक्स्ट, और
        कार्रवाई के लिए <a href="#">लिंक</a> का उपयोग करें। इनलाइन{" "}
        <code>टोकन</code> और <mark>हाइलाइट किए गए शब्द</mark> डिज़ाइन
        दस्तावेज़ों में ध्यान केंद्रित करने में मदद करते हैं।
      </p>

      <h2>परिभाषा सूची</h2>
      <dl>
        <dt>डिज़ाइन टोकन</dt>
        <dd>
          UI शैलियों जैसे रंग या स्पेसिंग के लिए एकल स्रोत सत्य (Single source of
          truth)।
        </dd>
        <dt>घटक (Component)</dt>
        <dd>एक पुन: उपयोग योग्य UI तत्व जिसके व्यवहार और रूप परिभाषित हों।</dd>
        <dt>प्रोटोटाइप</dt>
        <dd>एक इंटरैक्टिव मॉकअप जिसका उपयोग उपयोगकर्ता प्रवाह और लेआउट को
          परीक्षण करने के लिए किया जाता है।</dd>
      </dl>

      <h2>विवरण और सारांश</h2>
      <details>
        <summary>डिज़ाइन सिस्टम टिप्स देखने के लिए क्लिक करें</summary>
        <p>
          छोटे से शुरू करें — पहले बटन, रंग और टाइपोग्राफी का दस्तावेज़ बनाएँ।
          फिर धीरे-धीरे जटिल घटकों तक विस्तार करें।
        </p>
      </details>

      <h2>सुपरस्क्रिप्ट और सबस्क्रिप्ट</h2>
      <p>
        8<sup>n</sup> जैसी एक परिपूर्ण ग्रिड अनुपात दृश्य सामंजस्य सुनिश्चित
        करता है, जबकि 4<sub>px</sub> का बेसलाइन स्पेसिंग सब कुछ संरेखित रखता
        है।
      </p>

      <h2>निष्कर्ष</h2>
      <p>
        अच्छी डिज़ाइन अदृश्य होती है — यह मार्गदर्शन करती है, जानकारी देती है और
        ध्यान भटकाए बिना प्रसन्न करती है। चाहे आप एक पोर्टफोलियो बना रहे हों या
        एक पूर्ण डिज़ाइन सिस्टम, स्थिरता और सावधानी ही स्थायी प्रभाव के लिए
        आपकी सर्वोत्तम उपकरण हैं।
      </p>
    </div>
  </div>
);

export default Example;