docs: improve the introduction story

Author: khatastroffik

src/components/introduction.mdx

@@ -115,7 +115,7 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
     <DateRenderer value={new Date()} locale="ja-JP" pure /><br />
 </div>
 <section className="accordion">
-  <input type="checkbox" name="collapse2" id="preview1" tabIndex="0" />
+  <input type="checkbox" name="collapse1" id="preview1" tabIndex="0" />
   <div className="handle" >
     <label htmlFor="preview1">source code</label>
   </div>
@@ -166,7 +166,7 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
     <DateTimeRenderer value={new Date()} formatOptions={{ dateStyle: "full", timeStyle: "short", timeZone: "Australia/Sydney", hour12: true, calendar: "persian" }} /><br />
 </div>
 <section className="accordion">
-  <input type="checkbox" name="collapse2" id="preview3" tabIndex="0" />
+  <input type="checkbox" name="collapse3" id="preview3" tabIndex="0" />
   <div className="handle" >
     <label htmlFor="preview3">source code</label>
   </div>
@@ -195,18 +195,18 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
     <DateRenderer value={new Date("2027-10-04T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2027-10-04T11:11:11.111Z")} displayYear /><br />
 </div>
 <section className="accordion">
-  <input type="checkbox" name="collapse2" id="preview4" tabIndex="0" />
+  <input type="checkbox" name="collapse4" id="preview4" tabIndex="0" />
   <div className="handle" >
     <label htmlFor="preview4">source code</label>
   </div>
   <div className="content">
     <Source code={`
-<DateRenderer value={new Date()} /> &rarr; <QuarterRenderer value={new Date()} />
-<DateRenderer value={new Date("2024-12-31T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2024-12-31T11:11:11.111Z")} pure />
-<DateRenderer value={new Date("2025-01-01T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2025-01-01T11:11:11.111Z")} displayYear pure />
-<DateRenderer value={new Date("2026-04-28T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2026-04-28T11:11:11.111Z")} pure />
-<DateRenderer value={new Date("2027-07-31T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2027-07-31T11:11:11.111Z")} displayYear pure />
-<DateRenderer value={new Date("2027-10-04T11:11:11.111Z")} /> &rarr; <QuarterRenderer value={new Date("2027-10-04T11:11:11.111Z")} displayYear />
+<QuarterRenderer value={new Date()} />
+<QuarterRenderer value={new Date("2024-12-31T11:11:11.111Z")} pure />
+<QuarterRenderer value={new Date("2025-01-01T11:11:11.111Z")} displayYear pure />
+<QuarterRenderer value={new Date("2026-04-28T11:11:11.111Z")} pure />
+<QuarterRenderer value={new Date("2027-07-31T11:11:11.111Z")} displayYear pure />
+<QuarterRenderer value={new Date("2027-10-04T11:11:11.111Z")} displayYear />
     `} dark />
   </div>
   <p>Note: the Date value passed as property to the TimeRenderer component should be a **UTC** date</p>
@@ -227,13 +227,13 @@ import banner from '../../docs/johannes-plenio-2QUvkQTBh5s-unsplash.jpg';
     <DateRenderer value={new Date("2025-12-29T11:11:11.111Z")} /> &rarr; <WeekRenderer value={new Date("2025-12-29T11:11:11.111Z")} displayYear pure /><br />
 </div>
 <section className="accordion">
-  <input type="checkbox" name="collapse2" id="preview4" tabIndex="0" />
+  <input type="checkbox" name="collapse5" id="preview5" tabIndex="0" />
   <div className="handle" >
-    <label htmlFor="preview4">source code</label>
+    <label htmlFor="preview5">source code</label>
   </div>
   <div className="content">
     <Source code={`
-<DateRenderer value={new Date()} /> &rarr; <WeekRenderer value={new Date()} />
+<WeekRenderer value={new Date()} />
 <WeekRenderer value={new Date("2024-10-06T19:40:55.221Z")} pure />
 <WeekRenderer value={new Date("2025-12-29T11:11:11.111Z")} displayYear pure />
 <WeekRenderer value={new Date("2024-12-30T11:11:11.111Z")} pure />