From 9514f01dba130eeed470bfcd7911b76a492ffb5d Mon Sep 17 00:00:00 2001
From: pd0a6847 <pd0a6847@posco.com>
Date: Fri, 21 Nov 2025 16:19:36 +0900
Subject: [PATCH] feat: add Header, Footer, and GameBoard components for
 enhanced layout

---
 src/lib/components/custom/Footer.svelte    |  66 +++
 src/lib/components/custom/GameBoard.svelte | 452 +++++++++++++++++++++
 src/lib/components/custom/Header.svelte    |  43 ++
 src/routes/design/+page.svelte             |  12 +-
 svelte.config.js                           |  10 +-
 5 files changed, 574 insertions(+), 9 deletions(-)
 create mode 100644 src/lib/components/custom/Footer.svelte
 create mode 100644 src/lib/components/custom/GameBoard.svelte
 create mode 100644 src/lib/components/custom/Header.svelte

diff --git a/src/lib/components/custom/Footer.svelte b/src/lib/components/custom/Footer.svelte
new file mode 100644
index 0000000..2ea83f3
--- /dev/null
+++ b/src/lib/components/custom/Footer.svelte
@@ -0,0 +1,66 @@
+<footer class="sticky bottom-0 isolate z-50 border-border bg-background text-foreground " role="contentinfo" aria-label="Site footer">
+   	<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
+		<div class="relative flex flex-col justify-between border-x border-t border-border ">
+			<div class="flex w-full items-stretch">
+                <div class=" items-center pl-5">
+                    <div class="flex flex-col h-full justify-center">
+                        <div class="flex justify-center items-center">
+                            <div class="w-9 h-9 border border-gray-400 rounded flex items-center justify-center mr-0.5 text-xs">2</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="min-w-[90px] items-center pl-1 pr-5 py-4 border-r">
+					<div class="flex flex-col">
+						<div class="flex justify-between text-sm">
+							<span>UserNickname</span>
+						</div>
+                        <div class="flex justify-between text-[10px]">
+							<span>Level: 21</span>
+						</div>
+					</div>
+				</div>
+                <div class="min-w-[250px] flex items-center justify-center px-5 py-4 border-r">
+                    <div class="flex flex-col w-full">
+                        <div class="flex justify-between text-lg">
+                            <span>Account:</span><span>₩ 1,493,000</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="min-w-[180px] flex items-center justify-center px-5 py-4 border-r">
+                    <div class="flex flex-col w-full">
+                        <div class="flex justify-between text-lg">
+                            <span>Bets:</span><span>₩ 43,000</span>
+                        </div>
+                    </div>
+                </div>
+				<div class="flex flex-1 items-center justify-center px-5 py-4 text-center text-lg">
+					PLACE YOUR BETS
+				</div>
+				<div class="ml-auto flex flex-row gap-1">
+					<div class="flex min-w-[80px] items-center justify-center border-l text-sm">
+					<div class="flex flex-col">
+						<div class="items-center justify-center text-sm  text-center">
+							<span>GAME</span>
+						</div>
+						<div class="items-center justify-center text-sm text-center">
+							<span>BOARD</span>
+						</div>
+					</div>
+                    </div>
+				</div>
+				<div class="ml-auto flex flex-row gap-1 bg-red-100">
+					<div class="flex min-w-[80px] items-center justify-center border-l text-sm">
+					<div class="flex flex-col">
+						<div class="items-center justify-center text-sm  text-center">
+							<span>CLEAR</span>
+						</div>
+						<div class="items-center justify-center text-sm text-center">
+							<span>BETS</span>
+						</div>
+					</div>
+                    </div>
+				</div>
+			</div>
+		</div>
+	</div>
+</footer>
diff --git a/src/lib/components/custom/GameBoard.svelte b/src/lib/components/custom/GameBoard.svelte
new file mode 100644
index 0000000..706ab9c
--- /dev/null
+++ b/src/lib/components/custom/GameBoard.svelte
@@ -0,0 +1,452 @@
+<footer class="bg-background text-foreground" role="contentinfo" aria-label="Site footer">
+	<div class="mx-auto flex max-w-3xl flex-col gap-8 px-5 md:gap-12 lg:max-w-6xl lg:gap-16 lg:px-6">
+		<div class="flex flex-col border-x">
+			<div
+				class="grid grid-cols-1 items-start gap-12 px-5 py-16 text-center md:grid-cols-2 md:px-12 md:text-left lg:grid-cols-4 lg:gap-x-6 lg:gap-y-16"
+			>
+				<div class="flex flex-col gap-4">
+					<h2 class="text-sm font-semibold tracking-tighter">Menu</h2>
+					<nav class="flex flex-col gap-3" aria-label="Menu links">
+						<a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/">Home</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/preview">Preview</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pricing">Pricing</a
+						>
+					</nav>
+				</div>
+				<div class="flex flex-col gap-4">
+					<h2 class="text-sm font-semibold tracking-tighter">Products</h2>
+					<nav class="flex flex-col gap-3" aria-label="Products links">
+						<a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components">Figma Kit</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks">Pro Blocks</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/plugin">Figma Plugin</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/templates">Templates</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/themes">Themes</a
+						>
+					</nav>
+				</div>
+				<div class="flex flex-col gap-4">
+					<h2 class="text-sm font-semibold tracking-tighter">Resources</h2>
+					<nav class="flex flex-col gap-3" aria-label="Resources links">
+						<a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/docs/getting-started">Docs</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/academy">Academy</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/blog">Blog</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/roadmap">Roadmap</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/help">Help &amp; Contact</a
+						>
+					</nav>
+				</div>
+				<div class="flex flex-col gap-4">
+					<h2 class="text-sm font-semibold tracking-tighter">Legal</h2>
+					<nav class="flex flex-col gap-3" aria-label="Legal links">
+						<a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/licensing">Licensing Agreement</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/terms">Terms &amp; Conditions</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/privacy-policy">Privacy Policy</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/cookies">Cookies</a
+						>
+					</nav>
+				</div>
+				<div class="flex hidden flex-col gap-4 lg:col-span-2 lg:flex">
+					<h2 class="text-sm font-semibold tracking-tighter">Components</h2>
+					<nav class="grid grid-cols-2 gap-3" aria-label="Components links">
+						<a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/accordion">Accordion</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/alert">Alert</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/alert-dialog">Alert Dialog</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/aspect-ratio">Aspect Ratio</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/avatar">Avatar</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/badge">Badge</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/breadcrumb">Breadcrumb</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/button">Button</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/button-group">Button Group</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/calendar">Calendar</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/card">Card</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/carousel">Carousel</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/chart">Chart</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/checkbox">Checkbox</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/collapsible">Collapsible</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/combobox">Combobox</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/command">Command</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/context-menu">Context Menu</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/data-table">Data Table</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/date-picker">Date Picker</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/dialog">Dialog</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/drawer">Drawer</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/dropdown-menu">Dropdown Menu</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/empty">Empty</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/field">Field</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/form">Form</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/hover-card">Hover Card</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/input">Input</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/input-group">Input Group</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/input-otp">Input OTP</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/item">Item</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/kbd">Kbd</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/label">Label</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/menubar">Menubar</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/navigation-menu">Navigation Menu</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/pagination">Pagination</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/popover">Popover</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/progress">Progress</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/radio-group">Radio Group</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/resizable">Resizable</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/scroll-area">Scroll-area</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/select">Select</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/separator">Separator</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/sheet">Sheet</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/sidebar">Sidebar</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/skeleton">Skeleton</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/slider">Slider</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/sonner">Sonner</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/spinner">Spinner</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/switch">Switch</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/table">Table</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/tabs">Tabs</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/textarea">Textarea</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/toggle">Toggle</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/toggle-group">Toggle Group</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/tooltip">Tooltip</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/components/typography">Typography</a
+						>
+					</nav>
+				</div>
+				<div class="flex hidden flex-col gap-4 lg:flex">
+					<h2 class="text-sm font-semibold tracking-tighter">Landing Page Blocks</h2>
+					<nav class="flex flex-col gap-3" aria-label="Landing Page Blocks links">
+						<a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/404-sections">404 Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/banners">Banners</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/bento-grids">Bento Grids</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/blog-sections">Blog Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/cta-sections">CTA Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/comparison-sections">Comparison Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/contact-sections">Contact Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/empty-lp-sections">Empty LP Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/faq-sections">FAQ Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/feature-sections">Feature Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/footers">Footers</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/gallery-sections">Gallery Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/header-sections">Header Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/hero-sections">Hero Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/lp-navbars">LP Navbars</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/landing-page-examples">Landing Page Examples</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/logo-sections">Logo Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/patterns">Patterns</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/pricing-sections">Pricing Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/rich-text-sections">Rich Text Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/stats-sections">Stats Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/team-sections">Team Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/testimonials-sections">Testimonials Sections</a
+						>
+					</nav>
+				</div>
+				<div class="flex hidden flex-col gap-4 lg:flex">
+					<h2 class="text-sm font-semibold tracking-tighter">Application Blocks</h2>
+					<nav class="flex flex-col gap-3" aria-label="Application Blocks links">
+						<a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/app-shells">App Shells</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/application-examples">Application Examples</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/buttons">Buttons</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/cards">Cards</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/description-lists">Description Lists</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/empty-sections">Empty Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/navbars">Navbars</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/page-headers">Page Headers</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/section-footers">Section Footers</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/section-headers">Section Headers</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/sections">Sections</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/settings">Settings</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/sign-in">Sign in</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/sign-up">Sign up</a
+						><a
+							class="text-sm text-muted-foreground transition-colors hover:text-foreground"
+							href="/pro-blocks/table-headers">Table Headers</a
+						>
+					</nav>
+				</div>
+			</div>
+			<div
+				data-orientation="horizontal"
+				role="presentation"
+				data-slot="separator"
+				class="shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"
+			></div>
+			<div
+				class="flex flex-col gap-8 px-5 py-12 text-center text-sm md:items-center md:gap-12 md:p-12 lg:flex-row lg:justify-between lg:text-left"
+			>
+				<p class="order-2 text-center text-muted-foreground lg:order-1 lg:text-left">
+					This project is independent and not affiliated with Figma or shadcn/ui.<br />Copyright © <!-- -->2025<!-- -->
+					<a
+						class="text-center text-muted-foreground underline hover:text-foreground"
+						target="_blank"
+						href="https://twitter.com/matsugfx">Matt Wierzbicki</a
+					>
+				</p>
+				<div
+					class="order-1 flex flex-col items-center gap-4 text-center md:flex-row lg:order-2 lg:flex-row lg:items-center lg:text-left"
+				>
+					<button
+						data-slot="dropdown-menu-trigger"
+						class="[&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-full border border-border bg-background text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:border-input dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40"
+						type="button"
+						id="radix-_R_1e5flb_"
+						aria-haspopup="menu"
+						aria-expanded="false"
+						data-state="closed"
+						><svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="lucide lucide-sun h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
+							aria-hidden="true"
+							><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"
+							></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"
+							></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path
+								d="m6.34 17.66-1.41 1.41"
+							></path><path d="m19.07 4.93-1.41 1.41"></path></svg
+						><svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="lucide lucide-moon absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
+							aria-hidden="true"
+							><path
+								d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
+							></path></svg
+						><span class="sr-only">Toggle theme</span></button
+					>
+				</div>
+			</div>
+		</div>
+	</div>
+</footer>
diff --git a/src/lib/components/custom/Header.svelte b/src/lib/components/custom/Header.svelte
new file mode 100644
index 0000000..245988e
--- /dev/null
+++ b/src/lib/components/custom/Header.svelte
@@ -0,0 +1,43 @@
+<nav class="sticky top-0 isolate z-50 border-b border-border bg-background">
+	<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
+		<div class="relative flex flex-col justify-between border-x border-border">
+			<div class="flex w-full items-stretch">
+				<div class="min-w-[180px] items-center border-r px-5 py-4">
+					<div class="flex flex-col">
+						<div class="flex justify-between text-[10px]">
+							<span>GameID:</span><span>EPX93A</span>
+						</div>
+						<div class="flex justify-between text-sm ">
+							<span>Online Users:</span><span>723</span>
+						</div>
+					</div>
+				</div>
+				<div class="min-w-[270px] items-center px-5 py-4">
+					<div class="flex flex-col">
+						<div class="flex justify-between text-[10px]">
+							<span>Accumulated:</span><span>10 Games</span>
+						</div>
+						<div class="flex justify-between text-sm ">
+							<span>Jackpot Prize:</span><span>₩ 12,413,493,000</span>
+						</div>
+					</div>
+				</div>
+                <div class=" items-center border-r pr-5">
+                    <div class="flex flex-col h-full justify-center">
+                        <div class="flex justify-center items-center">
+                            <div class="w-8 h-8 border border-gray-400 rounded flex items-center justify-center mr-0.5 text-xs">2</div>
+                            <div class="w-8 h-8 border border-gray-400 rounded flex items-center justify-center mr-0.5 text-xs">4</div>
+                            <div class="w-8 h-8 border border-gray-400 rounded flex items-center justify-center text-xs">5</div>
+                        </div>
+                    </div>
+                </div>
+				<div class="flex flex-1 items-center justify-center px-5 py-4 text-center text-lg">
+					PLACE YOUR BETS
+				</div>
+				<div class="ml-auto flex flex-row gap-1">
+					<div class="flex min-w-[80px] items-center justify-center border-l text-lg">45</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</nav>
diff --git a/src/routes/design/+page.svelte b/src/routes/design/+page.svelte
index 7d76d77..d0e7b2c 100644
--- a/src/routes/design/+page.svelte
+++ b/src/routes/design/+page.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-  import { Button } from "$lib/components/ui/button/index.js";
+	import Header from '@/components/custom/Header.svelte';
+  import Footer from '@/components/custom/Footer.svelte';
+  import GameBoard from '@/components/custom/GameBoard.svelte';
+	import { Button } from '@/components/ui/button/index.js';
 </script>
- 
-<Button variant="ghost">Ghost</Button>
-<Button>Button</Button>
\ No newline at end of file
+
+<Header />
+<GameBoard />
+<Footer />
diff --git a/svelte.config.js b/svelte.config.js
index afb9401..31f39fb 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -9,11 +9,11 @@ const config = {
 			routes: {
 				include: ['/*'],
 				exclude: ['<all>']
-			},
-			    alias: {
-      				"@/*": "./src/lib/*",
-    		},
-		})
+			}
+		}),
+		alias: {
+			'@': './src/lib'
+		}
 	}
 };