refactor: Create shared components and global styles for improved code organization

website/src/components/Feature.tsx

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

website/src/components/Logo.module.css

@@ -0,0 +1,32 @@
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0px;
+  font-weight: 600;
+}
+
+.logo img {
+  margin-right: 8px;
+}
+
+.small {
+  font-size: 32px;
+}
+
+.small img {
+  width: 40px;
+  height: 40px;
+}
+
+.large {
+  font-size: 48px;
+}
+
+.large img {
+  width: 60px;
+  height: 60px;
+}
+
+.highlight {
+  color: var(--color-primary);
+}

website/src/components/Logo.tsx

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

website/src/components/PackageManager.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useState } from 'react';
+import styles from './PackageManager.module.css';
+
+const PACKAGE_MANAGERS = {
+  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 (
+    <div className={styles.container}>
+      <div className={styles.tabs}>
+        {Object.keys(PACKAGE_MANAGERS).map(pm => (
+          <button 
+            key={pm}
+            className={`${styles.tab} ${activeTab === pm ? styles.active : ''}`}
+            onClick={() => setActiveTab(pm as keyof typeof PACKAGE_MANAGERS)}
+          >
+            {pm}
+          </button>
+        ))}
+      </div>
+      <div className={styles.commandWrapper}>
+        <code className={styles.command}>
+          {PACKAGE_MANAGERS[activeTab]}
+        </code>
+        <button 
+          className={styles.copyButton}
+          onClick={() => navigator.clipboard.writeText(PACKAGE_MANAGERS[activeTab])}
+        >
+          Copy
+        </button>
+      </div>
+    </div>
+  );
+}

website/src/components/Section.module.css

@@ -0,0 +1,19 @@
+.section {
+  padding: var(--section-padding-desktop);
+  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);
+}
+
+@media (max-width: 1200px) {
+  .section {
+    padding: var(--section-padding-mobile);
+  }
+}

website/src/components/Section.tsx

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

website/src/styles/shared.css

@@ -0,0 +1,27 @@
+:root {
+  --color-primary: #ff0080;
+  --color-background: #000;
+  --color-text: #fff;
+  
+  --gray-rgb: 255, 255, 255;
+  --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
+  --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
+  
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 2rem;
+  --spacing-lg: 4rem;
+  --spacing-xl: 6rem;
+  
+  --border-radius-sm: 6px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+  
+  --font-size-sm: 0.9rem;
+  --font-size-md: 1.1rem;
+  --font-size-lg: 1.5rem;
+  --font-size-xl: 2rem;
+  
+  --section-padding-desktop: 6rem 12em;
+  --section-padding-mobile: 4rem 2rem;
+}