Fix landing docs api

Author: hyu-dev

apps/landing/src/app/(detail)/docs/api/box/page.mdx

@@ -64,12 +64,12 @@ By using the as prop, you can render it as another element as shown below:
 
 ```tsx
 function App() {
-  return <span className="aa" />
+  return <span className="a" />
 }
 ```
 
 ```css
-.aa {
+.a {
   background: red;
 }
 ```

apps/landing/src/app/(detail)/docs/api/button/page.mdx

@@ -29,21 +29,21 @@ The Button component defined above will render like this:
 ```tsx
 function App() {
   return (
-    <button className="aa ab ac" onClick="alert('clicked!!')">
+    <button className="a b c" onClick="alert('clicked!!')">
       click me
     </button>
   )
 }
 ```
 
 ```css
-.aa {
+.a {
   background: red;
 }
-.ab {
+.b {
   width: 100px;
 }
-.ac {
+.c {
   height: 100px;
 }
 ```

apps/landing/src/app/(detail)/docs/api/center/page.mdx

@@ -32,35 +32,35 @@ The Center component defined above will render like this:
 ```tsx
 function App() {
   return (
-    <div className="ae af ag">
-      <div className="aa ab ac"></div>
-      <div className="aa ab ac a-d"></div>
-      <div className="aa ab ac"></div>
+    <div className="e f g">
+      <div className="a b c"></div>
+      <div className="a b c d"></div>
+      <div className="a b c"></div>
     </div>
   )
 }
 ```
 
 ```css
-.aa {
+.a {
   background: blue;
 }
-.ab {
+.b {
   height: 100px;
 }
-.ac {
+.c {
   width: 100px;
 }
-.a-d {
+.d {
   display: flex;
 }
-.ae {
+.e {
   display: flex;
 }
-.af {
+.f {
   justify-content: center;
 }
-.ag {
+.g {
   align-items: center;
 }
 ```

apps/landing/src/app/(detail)/docs/api/css/page.mdx

@@ -37,18 +37,18 @@ The content above is rendered/transformed as shown below:
 
 ```tsx
 function App() {
-  return <div className="aa ab ac" />
+  return <div className="a b c" />
 }
 ```
 
 ```css
-.aa {
+.a {
   background: red;
 }
-.ab {
+.b {
   width: 100px;
 }
-.ac {
+.c {
   height: 100px;
 }
 ```
@@ -77,18 +77,18 @@ The content above is rendered/transformed as shown below:
 
 ```tsx
 function App() {
-  return <div className="aa ab ac" />
+  return <div className="a b c" />
 }
 ```
 
 ```css
-.aa {
+.a {
   background: red;
 }
-.ab {
+.b {
   width: 100px;
 }
-.ac {
+.c {
   height: 100px;
 }
 ```

apps/landing/src/app/(detail)/docs/api/flex/page.mdx

@@ -26,12 +26,12 @@ The Flex component defined above will render like this:
 
 ```tsx
 function App() {
-  return <div className="aa" />
+  return <div className="a" />
 }
 ```
 
 ```css
-.aa {
+.a {
   display: flex;
 }
 ```

apps/landing/src/app/(detail)/docs/api/grid/page.mdx

@@ -33,26 +33,26 @@ The Grid component defined above will render like this:
 ```tsx
 function App() {
   return (
-    <div className="a-d">
-      <div className="aa ab ac"></div>
-      <div className="aa ab ac"></div>
-      <div className="aa ab ac"></div>
+    <div className="d">
+      <div className="a b c"></div>
+      <div className="a b c"></div>
+      <div className="a b c"></div>
     </div>
   )
 }
 ```
 
 ```css
-.aa {
+.a {
   background: blue;
 }
-.ab {
+.b {
   height: 100px;
 }
-.ac {
+.c {
   width: 100px;
 }
-.a-d {
+.d {
   display: grid;
 }
 ```

apps/landing/src/app/(detail)/docs/api/input/page.mdx

@@ -26,12 +26,12 @@ The Input component defined above will render like this:
 
 ```tsx
 function App() {
-  return <input className="aa" />
+  return <input className="a" />
 }
 ```
 
 ```css
-.aa {
+.a {
   border: 3px solid black;
 }
 ```

apps/landing/src/app/(detail)/docs/api/text/page.mdx

@@ -30,15 +30,15 @@ The Text component defined above will render like this:
 
 ```tsx
 function App() {
-  return <span className="aa ab">This is Text component.</span>
+  return <span className="a b">This is Text component.</span>
 }
 ```
 
 ```css
-.aa {
+.a {
   color: red;
 }
-.ab {
+.b {
   font-size: 24px;
 }
 ```
@@ -63,15 +63,15 @@ The Text component defined above will render like this:
 
 ```tsx
 function App() {
-  return <p className="aa ab">This is Text component.</p>
+  return <p className="a b">This is Text component.</p>
 }
 ```
 
 ```css
-.aa {
+.a {
   color: red;
 }
-.ab {
+.b {
   font-size: 24px;
 }
 ```

apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx

@@ -33,32 +33,32 @@ The VStack component defined above will render like this:
 ```tsx
 function App() {
   return (
-    <div className="ae af">
-      <div className="aa ab ac"></div>
-      <div className="aa ab ac a-d"></div>
-      <div className="aa ab ac"></div>
+    <div className="e f">
+      <div className="a b c"></div>
+      <div className="a b c d"></div>
+      <div className="a b c"></div>
     </div>
   )
 }
 ```
 
 ```css
-.aa {
+.a {
   background: blue;
 }
-.ab {
+.b {
   height: 100px;
 }
-.ac {
+.c {
   width: 100px;
 }
-.a-d {
+.d {
   display: flex;
 }
-.ae {
+.e {
   display: flex;
 }
-af {
+.f {
   flex-direction: column;
 }
 ```