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

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>
   );
 }