refactor: Update Section and PackageManager components for improved type safety and consistency

This commit includes the following changes:
- Refactored PackageManager to use a more type-safe approach
- Updated Section component to use semantic `<section>` tag
- Adjusted background prop types and default values
- Simplified type definitions
- Improved code readability and maintainability

website/src/components/PackageManager.tsx

@@ -3,40 +3,46 @@
 import { useState } from 'react';
 import styles from './PackageManager.module.css';
 
-const PACKAGE_MANAGERS = {
+const PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm', 'bun'] as const;
-  npm: 'npm install unicord',
+type PackageManager = typeof PACKAGE_MANAGERS[number];
-  yarn: 'yarn add unicord',
-  pnpm: 'pnpm add unicord',
-  bun: 'bun add unicord'
-} as const;
 
 export function PackageManager() {
-  const [activeTab, setActiveTab] = useState<keyof typeof PACKAGE_MANAGERS>('npm');
+    const [activeTab, setActiveTab] = useState<PackageManager>('npm');
 
-  return (
+    const getInstallCommand = (pm: PackageManager) => {
-    <div className={styles.container}>
+        const commands = {
-      <div className={styles.tabs}>
+            npm: 'npm install unicord',
-        {Object.keys(PACKAGE_MANAGERS).map(pm => (
+            yarn: 'yarn add unicord',
-          <button 
+            pnpm: 'pnpm add unicord',
-            key={pm}
+            bun: 'bun add unicord'
-            className={`${styles.tab} ${activeTab === pm ? styles.active : ''}`}
+        };
-            onClick={() => setActiveTab(pm as keyof typeof PACKAGE_MANAGERS)}
+        return commands[pm];
-          >
+    };
-            {pm}
+
-          </button>
+    return (
-        ))}
+        <div className={styles.container}>
-      </div>
+            <div className={styles.tabs}>
-      <div className={styles.commandWrapper}>
+                {PACKAGE_MANAGERS.map(pm => (
-        <code className={styles.command}>
+                    <button 
-          {PACKAGE_MANAGERS[activeTab]}
+                        key={pm}
-        </code>
+                        className={`${styles.tab} ${activeTab === pm ? styles.active : ''}`}
-        <button 
+                        onClick={() => setActiveTab(pm)}
-          className={styles.copyButton}
+                    >
-          onClick={() => navigator.clipboard.writeText(PACKAGE_MANAGERS[activeTab])}
+                        {pm}
-        >
+                    </button>
-          Copy
+                ))}
-        </button>
+            </div>
-      </div>
+            <div className={styles.commandWrapper}>
-    </div>
+                <code className={styles.command}>
-  );
+                    {getInstallCommand(activeTab)}
+                </code>
+                <button 
+                    className={styles.copyButton}
+                    onClick={() => navigator.clipboard.writeText(getInstallCommand(activeTab))}
+                >
+                    Copy
+                </button>
+            </div>
+        </div>
+    );
 }

website/src/components/Section.module.css

@@ -1,19 +1,23 @@
 .section {
-  padding: var(--section-padding-desktop);
+  padding: 6rem 12em;
   min-height: 50vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  border-top: 1px solid var(--gray-alpha-200);
 }
 
 .dark {
   background: var(--gray-alpha-100);
+  border-top: 1px solid var(--gray-alpha-200);
+}
+
+.light {
+  border-top: 1px solid var(--gray-alpha-200);
 }
 
 @media (max-width: 1200px) {
   .section {
-    padding: var(--section-padding-mobile);
+    padding: 4rem 2rem;
   }
 }

website/src/components/Section.tsx

@@ -2,14 +2,14 @@ import styles from './Section.module.css';
 
 type SectionProps = {
   children: React.ReactNode;
-  background?: 'default' | 'dark';
+  background?: 'light' | 'dark';
   className?: string;
 };
 
-export function Section({ children, background = 'default', className = '' }: SectionProps) {
+export function Section({ children, background = 'light', className = '' }: SectionProps) {
   return (
-    <div className={`${styles.section} ${styles[background]} ${className}`}>
+    <section className={`${styles.section} ${styles[background]} ${className}`}>
       {children}
-    </div>
+    </section>
   );
 }