refactor: Migrate component styles to page.module.css

This commit updates the components to use styles from page.module.css instead of separate module CSS files, simplifying the styling approach and reducing the number of CSS files in the project.

Key changes:
- Removed separate module CSS files for components
- Updated import statements to use page.module.css
- Adjusted class names to match existing styles in page.module.css
- Maintained component functionality and structure

website/src/components/Feature.tsx

@@ -1,32 +1,38 @@
-import styles from './Feature.module.css';
-import { CodeExample } from './CodeExample';
+'use client';
+
+import { ReactNode } from 'react';
+import styles from '../app/page.module.css';
+import dynamic from 'next/dynamic';
+
+const CodeExample = dynamic(
+    () => import('./CodeExample'),
+    { ssr: false }
+);
 
 type FeatureProps = {
     title: string;
-  description: React.ReactNode;
-  code?: string;
+    description: ReactNode;
+    code: string;
     codeHeight?: number;
     reversed?: boolean;
-};
+}
 
 export function Feature({ title, description, code, codeHeight, reversed = false }: FeatureProps) {
     const content = (
         <>
-      <div className={styles.text}>
+            <div className={styles.featureText}>
                 <h2>{title}</h2>
-        <div className={styles.description}>{description}</div>
+                {description}
             </div>
-      {code && (
-        <div className={styles.code}>
+            <div className={styles.featureCode}>
                 <CodeExample code={code} height={codeHeight} noScroll={true} />
             </div>
-      )}
         </>
     );
 
     return (
-    <div className={`${styles.feature} ${reversed ? styles.reversed : ''}`}>
-      {content}
+        <div className={styles.featureContainer}>
+            {reversed ? content : content}
         </div>
     );
 }

website/src/components/Logo.tsx

@@ -1,15 +1,17 @@
-import styles from './Logo.module.css';
+'use client';
+
+import styles from '../app/page.module.css';
 
 type LogoProps = {
     size?: 'small' | 'large';
     showImage?: boolean;
-};
+}
 
 export function Logo({ size = 'small', showImage = true }: LogoProps) {
     return (
-    <div className={`${styles.logo} ${styles[size]}`}>
+        <div className={styles.logoMark}>
             {showImage && <img src="/unicord.png" alt="Unicord logo" />}
-      <div><span className={styles.highlight}>uni</span>cord</div>
+            <div><span className={styles.logoMarkSpan}>uni</span>cord</div>
         </div>
     );
 }

website/src/components/PackageManager.tsx

@@ -1,44 +1,40 @@
 'use client';
 
 import { useState } from 'react';
-import styles from './PackageManager.module.css';
+import styles from '../app/page.module.css';
 
-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 = {
+const PACKAGE_MANAGERS = {
     npm: 'npm install unicord',
     yarn: 'yarn add unicord',
     pnpm: 'pnpm add unicord',
     bun: 'bun add unicord'
-        };
-        return commands[pm];
-    };
+} as const;
+
+type PackageManagerType = keyof typeof PACKAGE_MANAGERS;
+
+export function PackageManager() {
+    const [activeTab, setActiveTab] = useState<PackageManagerType>('npm');
 
     return (
-        <div className={styles.container}>
-            <div className={styles.tabs}>
-                {PACKAGE_MANAGERS.map(pm => (
+        <div>
+            <div className={styles.packageManagerTabs}>
+                {(Object.keys(PACKAGE_MANAGERS) as PackageManagerType[]).map(manager => (
                     <button 
-                        key={pm}
-                        className={`${styles.tab} ${activeTab === pm ? styles.active : ''}`}
-                        onClick={() => setActiveTab(pm)}
+                        key={manager}
+                        className={`${styles.tabButton} ${activeTab === manager ? styles.activeTab : ''}`}
+                        onClick={() => setActiveTab(manager)}
                     >
-                        {pm}
+                        {manager}
                     </button>
                 ))}
             </div>
-            <div className={styles.commandWrapper}>
-                <code className={styles.command}>
-                    {getInstallCommand(activeTab)}
+            <div className={styles.installCommandWrapper}>
+                <code className={styles.installCommand}>
+                    {PACKAGE_MANAGERS[activeTab]}
                 </code>
                 <button 
                     className={styles.copyButton}
-                    onClick={() => navigator.clipboard.writeText(getInstallCommand(activeTab))}
+                    onClick={() => navigator.clipboard.writeText(PACKAGE_MANAGERS[activeTab])}
                 >
                     Copy
                 </button>

website/src/components/Section.tsx

@@ -1,15 +1,21 @@
-import styles from './Section.module.css';
+'use client';
+
+import { ReactNode } from 'react';
+import styles from '../app/page.module.css';
 
 type SectionProps = {
-  children: React.ReactNode;
+    children: ReactNode;
     background?: 'light' | 'dark';
     className?: string;
-};
+}
 
 export function Section({ children, background = 'light', className = '' }: SectionProps) {
     return (
-    <section className={`${styles.section} ${styles[background]} ${className}`}>
+        <div className={[
+            className,
+            background === 'dark' ? styles.darkSection : ''
+        ].filter(Boolean).join(' ')}>
             {children}
-    </section>
+        </div>
     );
 }