Final prototype of website

website/src/app/page.tsx

@@ -20,9 +20,9 @@ export default function Home() {
                     <div><span className={styles.logoMarkSpan}>uni</span>cord</div>
                 </div>
                 <nav className={styles.nav}>
-                    <a href="/docs" className={styles.navLink}>Docs</a>
-                    <a href="https://github.com/unicorddev/unicord" className={styles.navLink}>Source</a>
-                    <a href="https://discord.gg/your-invite-here" className={styles.navLink}>Discord</a>
+                    {/* <a href="/docs" className={styles.navLink}>Docs</a> */}
+                    <a href="https://github.com/jaronpate/unicord" target='_blank' className={styles.navLink}>Source</a>
+                    <a href="https://discord.gg/6kFfqa5bde" target='_blank' className={styles.navLink}>Discord</a>
                 </nav>
             </header>
             <main className={styles.main}>

website/src/components/Feature.tsx

@@ -1,38 +0,0 @@
-'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: ReactNode;
-    code: string;
-    codeHeight?: number;
-    reversed?: boolean;
-}
-
-export function Feature({ title, description, code, codeHeight, reversed = false }: FeatureProps) {
-    const content = (
-        <>
-            <div className={styles.featureText}>
-                <h2>{title}</h2>
-                {description}
-            </div>
-            <div className={styles.featureCode}>
-                <CodeExample code={code} height={codeHeight} noScroll={true} />
-            </div>
-        </>
-    );
-
-    return (
-        <div className={styles.featureContainer}>
-            {reversed ? content : content}
-        </div>
-    );
-}

website/src/components/Logo.module.css

@@ -1,32 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-'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.logoMark}>
-            {showImage && <img src="/unicord.png" alt="Unicord logo" />}
-            <div><span className={styles.logoMarkSpan}>uni</span>cord</div>
-        </div>
-    );
-}

website/src/components/PackageManager.tsx

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

@@ -1,23 +0,0 @@
-.section {
-  padding: 6rem 12em;
-  min-height: 50vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.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: 4rem 2rem;
-  }
-}

website/src/components/Section.tsx

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