diff --git a/astro.config.mjs b/astro.config.mjs
index 6f7f837..8d7830d 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -3,7 +3,11 @@ import { defineConfig } from 'astro/config';
 
 import tailwind from '@astrojs/tailwind';
 
+import svelte from '@astrojs/svelte';
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()]
+  integrations: [tailwind({
+    applyBaseStyles:false
+  }), svelte()]
 });
\ No newline at end of file
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..05bf706
--- /dev/null
+++ b/components.json
@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.mjs",
+		"css": "src/globals.css",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/utils"
+	},
+	"typescript": true
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1660aea..3ccee0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,21 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/check": "^0.9.4",
+        "@astrojs/svelte": "^6.0.2",
         "@astrojs/tailwind": "^5.1.2",
         "astro": "^4.16.18",
+        "embla-carousel-autoplay": "^8.5.1",
+        "svelte": "^5.2.11",
         "tailwindcss": "^3.4.15",
-        "typescript": "^5.6.3"
+        "typescript": "^5.7.2"
+      },
+      "devDependencies": {
+        "bits-ui": "^0.21.16",
+        "clsx": "^2.1.1",
+        "embla-carousel-svelte": "^8.5.1",
+        "lucide-svelte": "^0.462.0",
+        "tailwind-merge": "^2.5.5",
+        "tailwind-variants": "^0.3.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -148,6 +159,25 @@
         "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
       }
     },
+    "node_modules/@astrojs/svelte": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/svelte/-/svelte-6.0.2.tgz",
+      "integrity": "sha512-Jn60LLH+AbjtLIOQuL0SUI0fxMwpT89VraoGkEwF33ZgCT59H8fMQOj9eNf632P/SHRbKpD+Q+PJjODn5OcKoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte": "^4.0.0",
+        "svelte2tsx": "^0.7.22",
+        "vite": "^5.4.10"
+      },
+      "engines": {
+        "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
+      },
+      "peerDependencies": {
+        "astro": "^4.0.0",
+        "svelte": "^5.1.16",
+        "typescript": "^5.3.3"
+      }
+    },
     "node_modules/@astrojs/tailwind": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-5.1.2.tgz",
@@ -888,6 +918,34 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@@ -1249,6 +1307,16 @@
         "url": "https://opencollective.com/libvips"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.6.0.tgz",
+      "integrity": "sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1713,6 +1781,54 @@
       "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.1.tgz",
       "integrity": "sha512-79QfK1393x9Ho60QFyLti+QfdJzRQCVLFb97kOIV7Eo9vQU/roINgk7m24uv0a7AUvN//RDH36FLjjK48v0s9g=="
     },
+    "node_modules/@sveltejs/vite-plugin-svelte": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.2.tgz",
+      "integrity": "sha512-Y9r/fWy539XlAC7+5wfNJ4zH6TygUYoQ0Eegzp0zDDqhJ54+92gOyOX1l4MO1cJSx0O+Gp13YePT5XEa3+kX0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
+        "debug": "^4.3.7",
+        "deepmerge": "^4.3.1",
+        "kleur": "^4.1.5",
+        "magic-string": "^0.30.12",
+        "vitefu": "^1.0.3"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0-next.96 || ^5.0.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-3.0.1.tgz",
+      "integrity": "sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.7"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22"
+      },
+      "peerDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.0||^4.0.0",
+        "svelte": "^5.0.0-next.96 || ^5.0.0",
+        "vite": "^5.0.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1928,6 +2044,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-typescript": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+      "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": ">=8.9.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
@@ -2240,6 +2365,61 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bits-ui": {
+      "version": "0.21.16",
+      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.16.tgz",
+      "integrity": "sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@internationalized/date": "^3.5.1",
+        "@melt-ui/svelte": "0.76.2",
+        "nanoid": "^5.0.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/huntabyte"
+      },
+      "peerDependencies": {
+        "svelte": "^4.0.0 || ^5.0.0-next.118"
+      }
+    },
+    "node_modules/bits-ui/node_modules/@melt-ui/svelte": {
+      "version": "0.76.2",
+      "resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.76.2.tgz",
+      "integrity": "sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.3.1",
+        "@floating-ui/dom": "^1.4.5",
+        "@internationalized/date": "^3.5.0",
+        "dequal": "^2.0.3",
+        "focus-trap": "^7.5.2",
+        "nanoid": "^5.0.4"
+      },
+      "peerDependencies": {
+        "svelte": ">=3 <5"
+      }
+    },
+    "node_modules/bits-ui/node_modules/nanoid": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.9.tgz",
+      "integrity": "sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/boxen": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-8.0.1.tgz",
@@ -2711,6 +2891,21 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/dedent-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+      "integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
+      "license": "MIT"
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -2803,6 +2998,45 @@
       "integrity": "sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg==",
       "license": "ISC"
     },
+    "node_modules/embla-carousel": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.1.tgz",
+      "integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-autoplay": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.5.1.tgz",
+      "integrity": "sha512-FnZklFpePfp8wbj177UwVaGFehgs+ASVcJvYLWTtHuYKURynCc3IdDn2qrn0E5Qpa3g9yeGwCS4p8QkrZmO8xg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.5.1"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.5.1.tgz",
+      "integrity": "sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.5.1"
+      }
+    },
+    "node_modules/embla-carousel-svelte": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-svelte/-/embla-carousel-svelte-8.5.1.tgz",
+      "integrity": "sha512-sCQDCn+kyuLUysXFRCTboSTslI0LUV5OhVqBAXnSphJ/mYdlbYfMhk03MGck+Mogdgpf9zYrBocp2uF6qUBNAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.5.1",
+        "embla-carousel-reactive-utils": "8.5.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.49.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
     "node_modules/emmet": {
       "version": "2.4.11",
       "resolved": "https://registry.npmjs.org/emmet/-/emmet-2.4.11.tgz",
@@ -2906,6 +3140,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/esm-env": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.1.tgz",
+      "integrity": "sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==",
+      "license": "MIT"
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -2919,6 +3159,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/esrap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+      "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.4.15",
+        "@types/estree": "^1.0.1"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
@@ -3045,6 +3295,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/focus-trap": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.2.tgz",
+      "integrity": "sha512-9FhUxK1hVju2+AiQIDJ5Dd//9R2n2RAfJ0qfhF4IHGHgcoEUTMpbTeG/zbEuwaiYXfuAH6XE0/aCyxDdRM+W5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tabbable": "^6.2.0"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
@@ -3576,6 +3836,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-reference": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.6"
+      }
+    },
     "node_modules/is-unicode-supported": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
@@ -3760,6 +4029,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/locate-character": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3816,6 +4091,15 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3825,6 +4109,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-svelte": {
+      "version": "0.462.0",
+      "resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.462.0.tgz",
+      "integrity": "sha512-BTY44UyXEhlakuPMS4w7NayKhDYARzmhEv3E2YchTiNZ/aySS0F2ktPscTlXRgSZ9xwqoozhnhO1oKhm/nnmqg==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^3 || ^4 || ^5.0.0-next.42"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -4783,6 +5077,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -4988,6 +5292,16 @@
         "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -6031,6 +6345,79 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svelte": {
+      "version": "5.2.11",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.2.11.tgz",
+      "integrity": "sha512-rAVKne02inlyw//aD1QXuUbxDBNnyW6sagS7JfxzUbGVuJnHrf2WfQdJDYlBq8mOz8NBGQAZdD6KEITd0NUDtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "acorn-typescript": "^1.4.13",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "esm-env": "^1.2.0",
+        "esrap": "^1.2.2",
+        "is-reference": "^3.0.3",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/svelte2tsx": {
+      "version": "0.7.28",
+      "resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.7.28.tgz",
+      "integrity": "sha512-TJjA+kU8AnkyoprZPgQACMfTX8N0MA5NsIL//h9IuHOxmmaCLluqhcZU+fCkWipi5c/pooHLFOMpqjhq4v7JLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "dedent-js": "^1.0.1",
+        "pascal-case": "^3.1.1"
+      },
+      "peerDependencies": {
+        "svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+        "typescript": "^4.9.4 || ^5.0.0"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
+      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwind-variants": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.3.0.tgz",
+      "integrity": "sha512-ho2k5kn+LB1fT5XdNS3Clb96zieWxbStE9wNLK7D0AV64kdZMaYzAKo0fWl6fXLPY99ffF9oBJnIj5escEl/8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tailwind-merge": "^2.5.4"
+      },
+      "engines": {
+        "node": ">=16.x",
+        "pnpm": ">=7.x"
+      },
+      "peerDependencies": {
+        "tailwindcss": "*"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.15",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.15.tgz",
@@ -6238,8 +6625,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "optional": true
+      "license": "0BSD"
     },
     "node_modules/type-fest": {
       "version": "4.26.1",
@@ -6260,9 +6646,9 @@
       "license": "MIT"
     },
     "node_modules/typescript": {
-      "version": "5.6.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
-      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -7165,6 +7551,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zimmerframe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+      "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+      "license": "MIT"
+    },
     "node_modules/zod": {
       "version": "3.23.8",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
diff --git a/package.json b/package.json
index 2e795ac..9c1d7cc 100644
--- a/package.json
+++ b/package.json
@@ -5,15 +5,27 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
+    "start-lan": "astro dev --host",
     "build": "astro check && astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/svelte": "^6.0.2",
     "@astrojs/tailwind": "^5.1.2",
     "astro": "^4.16.18",
+    "embla-carousel-autoplay": "^8.5.1",
+    "svelte": "^5.2.11",
     "tailwindcss": "^3.4.15",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
+  },
+  "devDependencies": {
+    "bits-ui": "^0.21.16",
+    "clsx": "^2.1.1",
+    "embla-carousel-svelte": "^8.5.1",
+    "lucide-svelte": "^0.462.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwind-variants": "^0.3.0"
   }
 }
diff --git a/public/fonts/RubikMonoOne-Regular.ttf b/public/fonts/RubikMonoOne-Regular.ttf
new file mode 100644
index 0000000..a91fa56
Binary files /dev/null and b/public/fonts/RubikMonoOne-Regular.ttf differ
diff --git a/public/images/IMG_7294.JPG b/public/images/IMG_7294.JPG
new file mode 100644
index 0000000..287d676
Binary files /dev/null and b/public/images/IMG_7294.JPG differ
diff --git a/public/images/IMG_7311.JPG b/public/images/IMG_7311.JPG
new file mode 100644
index 0000000..3f8e4bc
Binary files /dev/null and b/public/images/IMG_7311.JPG differ
diff --git a/public/images/IMG_7343.JPG b/public/images/IMG_7343.JPG
new file mode 100644
index 0000000..6e617aa
Binary files /dev/null and b/public/images/IMG_7343.JPG differ
diff --git a/public/images/IMG_7360.JPG b/public/images/IMG_7360.JPG
new file mode 100644
index 0000000..eb1bd0a
Binary files /dev/null and b/public/images/IMG_7360.JPG differ
diff --git a/public/images/IMG_7394.JPG b/public/images/IMG_7394.JPG
new file mode 100644
index 0000000..a3fa9d3
Binary files /dev/null and b/public/images/IMG_7394.JPG differ
diff --git a/public/images/IMG_7462.JPG b/public/images/IMG_7462.JPG
new file mode 100644
index 0000000..e4241d9
Binary files /dev/null and b/public/images/IMG_7462.JPG differ
diff --git a/public/images/IMG_7468.JPG b/public/images/IMG_7468.JPG
new file mode 100644
index 0000000..c06bbe9
Binary files /dev/null and b/public/images/IMG_7468.JPG differ
diff --git a/public/images/IMG_7521.JPG b/public/images/IMG_7521.JPG
new file mode 100644
index 0000000..be27649
Binary files /dev/null and b/public/images/IMG_7521.JPG differ
diff --git a/public/images/IMG_7815.JPG b/public/images/IMG_7815.JPG
new file mode 100644
index 0000000..9dfa794
Binary files /dev/null and b/public/images/IMG_7815.JPG differ
diff --git a/public/images/IMG_7830.JPG b/public/images/IMG_7830.JPG
new file mode 100644
index 0000000..6365003
Binary files /dev/null and b/public/images/IMG_7830.JPG differ
diff --git a/src/components/FooterLink.astro b/src/components/FooterLink.astro
new file mode 100644
index 0000000..a98d647
--- /dev/null
+++ b/src/components/FooterLink.astro
@@ -0,0 +1,8 @@
+---
+interface Props {
+    href: string;
+}
+
+const {href} = Astro.props;
+---
+<a class="font-sans underline text-sm block" href={href}><slot /></a>
\ No newline at end of file
diff --git a/src/components/HomepageCarousel.svelte b/src/components/HomepageCarousel.svelte
new file mode 100644
index 0000000..cb0b8a2
--- /dev/null
+++ b/src/components/HomepageCarousel.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+    import * as Carousel from "@/components/ui/carousel/index.ts";
+    import { type CarouselAPI } from "@/components/ui/carousel/context.js";
+    import Autoplay from "embla-carousel-autoplay";
+    import { Button } from "@/components/ui/button";
+    import HomepageCarouselItem from "@/components/HomepageCarouselItem.svelte";
+    interface Props {
+        speed: number;
+        slides: {
+            image: {
+                path: string;
+                alt?: string;
+            };
+            title: string;
+            text: string;
+            actionLabel: string;
+            actionTo: string;
+        }[];
+    }
+    let { slides, speed }: Props = $props();
+
+    let currentSlide: number = $state(0); // TODO: make check for actual value here. Could break if not starting at 0
+
+    // Theres probably a less hacky way but my ts only started working after I had written all this so hey.
+    // Type safety by "Trust me bro"
+    //@ts-ignore
+    let api: CarouselAPI = $state();
+
+    $effect(() => {
+        if (api) {
+            api.on("scroll", (el) => { // Yes this gets spammed as the slide slides, but `settle` from the embla docs doesnt seem to be working.
+                currentSlide = el.slidesInView()[0] ?? 0 // default to 0 if no slides in view (something has gone horrible wrong)
+                // console.log(currentSlide)
+            });
+        }
+    });
+</script>
+<Carousel.Root
+    opts={{
+        loop: true,
+    }}
+    plugins={[
+        Autoplay({
+          delay: speed,
+        }),
+      ]}
+    class="w-full h-fit"
+    bind:api
+>
+    <Carousel.Content class="bg-red-400">
+        {#each slides as slide}
+            <HomepageCarouselItem
+                src={slide.image.path}
+                alt={slide.image.alt ?? ""}
+            />
+        {/each}
+    </Carousel.Content>
+    <div
+        class="m-12 w-auto sm:w-72 bg-background absolute bottom-0 sm:bottom-4 px-8 py-6"
+    >
+        <h1 class="font-display text-xl">{slides[currentSlide]?.title ?? "Error"}</h1>
+        <div class="text-base font-sans">{slides[currentSlide]?.text ?? "It looks like something went wrong. Try refreshing"}</div>
+        <Button class="h-8 mt-2 text-lg p-5 font-mono font-semibold" href={slides[currentSlide]?.actionTo ?? "/"}>{slides[currentSlide]?.actionLabel ?? ":("}</Button>
+    </div>
+    <Carousel.Previous class="top-auto -bottom-0 left-14 hidden sm:flex" />
+    <Carousel.Next
+        class="top-auto -bottom-0 right-auto left-[6.6rem] hidden sm:flex"
+    />
+</Carousel.Root>
diff --git a/src/components/HomepageCarouselItem.svelte b/src/components/HomepageCarouselItem.svelte
new file mode 100644
index 0000000..551d9ae
--- /dev/null
+++ b/src/components/HomepageCarouselItem.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import * as Carousel from "@/components/ui/carousel";
+    interface Props {
+        src: string;
+        alt?: string;
+    }
+    let { src, alt }: Props = $props();
+    if (alt === undefined) {
+        console.warn("No image alt text supplied!");
+    }
+</script>
+
+<Carousel.Item>
+    <div class="w-full h-[80vh] overflow-hidden justify-center">
+        <img {src} {alt} class="w-full h-full object-cover" />
+    </div>
+</Carousel.Item>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 63e88b3..d6d4b3e 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -3,9 +3,10 @@ import "@/globals.css";
 import RCLogo from "@/components/RoboConLogo.astro"
 import NavbarLink from "./NavbarLink.astro";
 ---
-<div class="navbar bg-white p-2 h-12">
+<div class="navbar bg-white p-2 h-12 shadow-md">
     <RCLogo/>
-    <div class="flex float-end items-center h-full">
+    <div class="md:flex float-end items-center h-full hidden"> 
+        <!-- NOTE these being hidden on small aspect rations is a dev fix to stop them messing with other layout. should fix in future. -->
         <NavbarLink to="/about">About Us</NavbarLink>
         <NavbarLink to="/blog">Blog</NavbarLink>
         <NavbarLink to="/docs">Docs</NavbarLink>
diff --git a/src/components/NavbarLink.astro b/src/components/NavbarLink.astro
index 3170a73..6b67ff9 100644
--- a/src/components/NavbarLink.astro
+++ b/src/components/NavbarLink.astro
@@ -5,4 +5,4 @@ interface Props {
 }
 let {to} = Astro.props;
 ---
-<a href={to} class="mx-3 float-right font-mono hover:underline my-auto"><slot /></a>
+<a href={to} class="mx-3 font-mono hover:underline my-auto"><slot /></a>
diff --git a/src/components/RoboConLogo.astro b/src/components/RoboConLogo.astro
index d61fddc..4192d28 100644
--- a/src/components/RoboConLogo.astro
+++ b/src/components/RoboConLogo.astro
@@ -6,7 +6,7 @@ interface Props {
 }
 let { clickable = true, href="/" } = Astro.props
 ---
-<a href={clickable ? href : ""} class="logo" >
+<a href={clickable ? href : ""} class="logo text-primary" >
     ROBOCON
 </a>
 <style>
@@ -17,7 +17,6 @@ let { clickable = true, href="/" } = Astro.props
         line-height: 1em;
         padding-left: 0.1em;
         padding-right:0.1em;
-        color: var(--rc-red);
         text-decoration: none;
         text-shadow: -0.05em 0.05em black;
         cursor: {clickable ? "auto" : "default"};
diff --git a/src/components/ui/button/button.svelte b/src/components/ui/button/button.svelte
new file mode 100644
index 0000000..ea8735b
--- /dev/null
+++ b/src/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "@/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
new file mode 100644
index 0000000..af1e188
--- /dev/null
+++ b/src/components/ui/button/index.ts
@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			outline:
+				"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-10 px-4 py-2",
+			sm: "h-9 rounded-md px-3",
+			lg: "h-11 rounded-md px-8",
+			icon: "h-10 w-10",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["size"];
+
+type Props = ButtonPrimitive.Props & {
+	variant?: Variant;
+	size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+	Root,
+	type Props,
+	type Events,
+	//
+	Root as Button,
+	type Props as ButtonProps,
+	type Events as ButtonEvents,
+	buttonVariants,
+};
diff --git a/src/components/ui/carousel/carousel-content.svelte b/src/components/ui/carousel/carousel-content.svelte
new file mode 100644
index 0000000..7bbdb4a
--- /dev/null
+++ b/src/components/ui/carousel/carousel-content.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "@/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<div
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...$options,
+			axis: $orientation === "horizontal" ? "x" : "y",
+		},
+		plugins: $plugins,
+	}}
+	on:emblaInit={onInit}
+>
+	<div
+		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+		data-embla-container=""
+		{...$$restProps}
+	>
+		<slot />
+	</div>
+</div>
diff --git a/src/components/ui/carousel/carousel-item.svelte b/src/components/ui/carousel/carousel-item.svelte
new file mode 100644
index 0000000..5359c09
--- /dev/null
+++ b/src/components/ui/carousel/carousel-item.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "@/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	const { orientation } = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		"min-w-0 shrink-0 grow-0 basis-full",
+		$orientation === "horizontal" ? "pl-4" : "pt-4",
+		className
+	)}
+	data-embla-slide=""
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/components/ui/carousel/carousel-next.svelte b/src/components/ui/carousel/carousel-next.svelte
new file mode 100644
index 0000000..5747a7b
--- /dev/null
+++ b/src/components/ui/carousel/carousel-next.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import ArrowRight from "lucide-svelte/icons/arrow-right";
+	import type { VariantProps } from "tailwind-variants";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "@/utils.js";
+	import {
+		Button,
+		type Props,
+		type buttonVariants,
+	} from "@/components/ui/button/index.js";
+
+	type $$Props = Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
+	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+	const { orientation, canScrollNext, scrollNext, handleKeyDown } =
+		getEmblaContext("<Carousel.Next/>");
+</script>
+
+<Button
+	{variant}
+	{size}
+	class={cn(
+		"absolute h-8 w-8 touch-manipulation rounded-full",
+		$orientation === "horizontal"
+			? "-right-12 top-1/2 -translate-y-1/2"
+			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+		className
+	)}
+	disabled={!$canScrollNext}
+	on:click={scrollNext}
+	on:keydown={handleKeyDown}
+	{...$$restProps}
+>
+	<ArrowRight class="h-4 w-4" />
+	<span class="sr-only">Next slide</span>
+</Button>
diff --git a/src/components/ui/carousel/carousel-previous.svelte b/src/components/ui/carousel/carousel-previous.svelte
new file mode 100644
index 0000000..d6e20ea
--- /dev/null
+++ b/src/components/ui/carousel/carousel-previous.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import ArrowLeft from "lucide-svelte/icons/arrow-left";
+	import type { VariantProps } from "tailwind-variants";
+	import { getEmblaContext } from "./context.js";
+	import { cn } from "@/utils.js";
+	import {
+		Button,
+		type Props,
+		type buttonVariants,
+	} from "@/components/ui/button/index.js";
+
+	type $$Props = Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let variant: VariantProps<typeof buttonVariants>["variant"] = "outline";
+	export let size: VariantProps<typeof buttonVariants>["size"] = "icon";
+
+	const { orientation, canScrollPrev, scrollPrev, handleKeyDown } =
+		getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+	{variant}
+	{size}
+	class={cn(
+		"absolute h-8 w-8 touch-manipulation rounded-full",
+		$orientation === "horizontal"
+			? "-left-12 top-1/2 -translate-y-1/2"
+			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+		className
+	)}
+	disabled={!$canScrollPrev}
+	on:click={scrollPrev}
+	on:keydown={handleKeyDown}
+	{...$$restProps}
+>
+	<ArrowLeft class="h-4 w-4" />
+	<span class="sr-only">Previous slide</span>
+</Button>
diff --git a/src/components/ui/carousel/carousel.svelte b/src/components/ui/carousel/carousel.svelte
new file mode 100644
index 0000000..95f0aeb
--- /dev/null
+++ b/src/components/ui/carousel/carousel.svelte
@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { writable } from "svelte/store";
+	import { onDestroy } from "svelte";
+	import { type CarouselAPI, type CarouselProps, setEmblaContext } from "./context.js";
+	import { cn } from "@/utils.js";
+
+	type $$Props = CarouselProps;
+
+	export let opts = {};
+	export let plugins: NonNullable<$$Props["plugins"]> = [];
+	export let api: $$Props["api"] = undefined;
+	export let orientation: NonNullable<$$Props["orientation"]> = "horizontal";
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+
+	const apiStore = writable<CarouselAPI | undefined>(undefined);
+	const orientationStore = writable(orientation);
+	const canScrollPrev = writable(false);
+	const canScrollNext = writable(false);
+	const optionsStore = writable(opts);
+	const pluginStore = writable(plugins);
+	const scrollSnapsStore = writable<number[]>([]);
+	const selectedIndexStore = writable(0);
+
+	$: orientationStore.set(orientation);
+	$: pluginStore.set(plugins);
+	$: optionsStore.set(opts);
+
+	function scrollPrev() {
+		api?.scrollPrev();
+	}
+	function scrollNext() {
+		api?.scrollNext();
+	}
+	function scrollTo(index: number, jump?: boolean) {
+		api?.scrollTo(index, jump);
+	}
+
+	function onSelect(api: CarouselAPI) {
+		if (!api) return;
+		canScrollPrev.set(api.canScrollPrev());
+		canScrollNext.set(api.canScrollNext());
+		selectedIndexStore.set(api.selectedScrollSnap());
+	}
+
+	$: if (api) {
+		onSelect(api);
+		api.on("select", onSelect);
+		api.on("reInit", onSelect);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	setEmblaContext({
+		api: apiStore,
+		scrollPrev,
+		scrollNext,
+		orientation: orientationStore,
+		canScrollNext,
+		canScrollPrev,
+		handleKeyDown,
+		options: optionsStore,
+		plugins: pluginStore,
+		onInit,
+		scrollSnaps: scrollSnapsStore,
+		selectedIndex: selectedIndexStore,
+		scrollTo,
+	});
+
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		api = event.detail;
+		apiStore.set(api);
+		scrollSnapsStore.set(api.scrollSnapList());
+	}
+
+	onDestroy(() => {
+		api?.off("select", onSelect);
+	});
+</script>
+
+<div
+	class={cn("relative", className)}
+	on:mouseenter
+	on:mouseleave
+	role="region"
+	aria-roledescription="carousel"
+	{...$$restProps}
+>
+	<slot />
+</div>
diff --git a/src/components/ui/carousel/context.ts b/src/components/ui/carousel/context.ts
new file mode 100644
index 0000000..c90b4cb
--- /dev/null
+++ b/src/components/ui/carousel/context.ts
@@ -0,0 +1,56 @@
+import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type emblaCarouselSvelte from "embla-carousel-svelte";
+import { getContext, hasContext, setContext } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Readable, Writable } from "svelte/store";
+
+export type CarouselAPI =
+	NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
+		evt: CustomEvent<infer CarouselAPI>
+	) => void
+		? CarouselAPI
+		: never;
+
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+
+export type CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+
+////
+
+export type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugins;
+	api?: CarouselAPI;
+	orientation?: "horizontal" | "vertical";
+} & HTMLAttributes<HTMLDivElement>;
+
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+
+type EmblaContext = {
+	api: Writable<CarouselAPI | undefined>;
+	orientation: Writable<"horizontal" | "vertical">;
+	scrollNext: () => void;
+	scrollPrev: () => void;
+	canScrollNext: Readable<boolean>;
+	canScrollPrev: Readable<boolean>;
+	handleKeyDown: (e: KeyboardEvent) => void;
+	options: Writable<CarouselOptions>;
+	plugins: Writable<CarouselPlugins>;
+	onInit: (e: CustomEvent<CarouselAPI>) => void;
+	scrollTo: (index: number, jump?: boolean) => void;
+	scrollSnaps: Readable<number[]>;
+	selectedIndex: Readable<number>;
+};
+
+export function setEmblaContext(config: EmblaContext): EmblaContext {
+	setContext(EMBLA_CAROUSEL_CONTEXT, config);
+	return config;
+}
+
+export function getEmblaContext(name = "This component") {
+	if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+		throw new Error(`${name} must be used within a <Carousel.Root> component`);
+	}
+	return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
+}
diff --git a/src/components/ui/carousel/index.ts b/src/components/ui/carousel/index.ts
new file mode 100644
index 0000000..78102bf
--- /dev/null
+++ b/src/components/ui/carousel/index.ts
@@ -0,0 +1,5 @@
+export { default as Root } from "./carousel.svelte";
+export { default as Content } from "./carousel-content.svelte";
+export { default as Item } from "./carousel-item.svelte";
+export { default as Previous } from "./carousel-previous.svelte";
+export { default as Next } from "./carousel-next.svelte";
diff --git a/src/globals.css b/src/globals.css
index 678cdd3..d720ae6 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @font-face {
     font-family: 'FugazOne';
     src: url('/fonts/FugazOne-Regular.ttf') format('truetype');
@@ -14,6 +18,85 @@
     font-display: swap;
 }
 
-:root {
-    --rc-red:#FF3123
+@font-face {
+  font-family: 'Rubik Mono One';
+  src: url('/fonts/RubikMonoOne-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 4 100% 57%; /* #FF3123 robocon red */
+    --primary-foreground: 210 40% 98%; /* idk, to change */
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.4rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
\ No newline at end of file
diff --git a/src/layouts/RCHeaderFooterLayout.astro b/src/layouts/RCHeaderFooterLayout.astro
new file mode 100644
index 0000000..8421442
--- /dev/null
+++ b/src/layouts/RCHeaderFooterLayout.astro
@@ -0,0 +1,34 @@
+---
+import Layout from "./Layout.astro";
+import Navbar from "@/components/Navbar.astro";
+import FooterLink from "@/components/FooterLink.astro";
+
+interface Props {
+    title: string;
+}
+---
+
+<Layout {...Astro.props}>
+    <header class="sticky top-0 z-50">
+        <Navbar />
+    </header>
+    <main>
+        <slot />
+    </main>
+    <footer class="flex bg-gray-800 w-full text-white flex-col items-center p-2">
+        <div class="flex w-full items-start justify-evenly m-2">
+            <div>
+                <!-- Logo, etc here? -->
+            </div>
+            <div>
+                <h1>Pages</h1>
+                <FooterLink href="">Test</FooterLink>
+                <FooterLink href="">Test</FooterLink>
+            </div>
+            <div>
+                <!-- More pages? -->
+            </div>
+        </div>
+        <div class="m-2">© Hills Road Sixth Form College 2025</div>
+    </footer>
+</Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3e125d1..aedfef5 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,14 +1,61 @@
 ---
-import Layout from '@/layouts/Layout.astro';
-import Navbar from '@/components/Navbar.astro';
-import '@/globals.css';
+import "@/globals.css";
+import Layout from "@/layouts/RCHeaderFooterLayout.astro";
+import Navbar from "@/components/Navbar.astro";
+import HomepageCarousel from "@/components/HomepageCarousel.svelte";
+import { Button } from "@/components/ui/button";
 ---
 
 <Layout title="Home">
-	<header>
-		<Navbar/>
+	<header class="sticky top-0 z-50">
+		<Navbar />
 	</header>
-	<main>
-
+	<main class="h-auto">
+		<HomepageCarousel
+			client:load
+			speed={10000}
+			slides={[
+				{
+					title: "Lorem Ipsum",
+					image: {
+						path: "/images/IMG_7815.JPG",
+					},
+					text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat in ante dignissim euismod id quis diam.",
+					actionLabel: "Click",
+					actionTo: "/",
+				},
+				{
+					title: "2 Lorem 2 Ipsum",
+					image: {
+						path: "/images/IMG_7294.JPG",
+					},
+					text: "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat in ante dignissim euismod id quis diam.",
+					actionLabel: "Click 2",
+					actionTo: "/",
+				},
+				{
+					title: "Lorem Ipsum 3: Revenge of the if()",
+					image: {
+						path: "/images/IMG_7311.JPG",
+					},
+					text: "3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat in ante dignissim euismod id quis diam.",
+					actionLabel: "Click 3",
+					actionTo: "/",
+				},
+			]}
+		/>
+		<div class="p-8 flex items-center content-around">
+			<div class="overflow-hidden m-8 w-1/2 hidden md:block">
+				<img src="/images/IMG_7360.JPG" class="-right-4"/>
+			</div>
+			<div class="m-8 h-full w-full md:w-1/2 center flex flex-col items-center content-around">
+				<h1 class="font-display text-xl m-4">About Us</h1>
+				<div class="font-sans max-w-[60ch]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis erat in ante dignissim euismod id quis diam.</div>
+				<Button variant="outline" class="m-4">Action Here</Button>
+			</div>
+		</div>
+		<div class="p-8 w-full bg-gray-300">
+			
+		</div>
 	</main>
 </Layout>
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..8871245
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+	y?: number;
+	x?: number;
+	start?: number;
+	duration?: number;
+};
+
+export const flyAndScale = (
+	node: Element,
+	params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+	const style = getComputedStyle(node);
+	const transform = style.transform === "none" ? "" : style.transform;
+
+	const scaleConversion = (
+		valueA: number,
+		scaleA: [number, number],
+		scaleB: [number, number]
+	) => {
+		const [minA, maxA] = scaleA;
+		const [minB, maxB] = scaleB;
+
+		const percentage = (valueA - minA) / (maxA - minA);
+		const valueB = percentage * (maxB - minB) + minB;
+
+		return valueB;
+	};
+
+	const styleToString = (
+		style: Record<string, number | string | undefined>
+	): string => {
+		return Object.keys(style).reduce((str, key) => {
+			if (style[key] === undefined) return str;
+			return str + `${key}:${style[key]};`;
+		}, "");
+	};
+
+	return {
+		duration: params.duration ?? 200,
+		delay: 0,
+		css: (t) => {
+			const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+			const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+			const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+			return styleToString({
+				transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+				opacity: t
+			});
+		},
+		easing: cubicOut
+	};
+};
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..522c1ef
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@astrojs/svelte';
+
+export default {
+	preprocess: vitePreprocess(),
+}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 19f0614..70571a3 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,8 +1,66 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+
 /** @type {import('tailwindcss').Config} */
-export default {
+const config = {
+	darkMode: ["class"],
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+	safelist: ["dark"],
 	theme: {
-		extend: {},
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px"
+			}
+		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border) / <alpha-value>)",
+				input: "hsl(var(--input) / <alpha-value>)",
+				ring: "hsl(var(--ring) / <alpha-value>)",
+				background: "hsl(var(--background) / <alpha-value>)",
+				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				primary: {
+					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+				},
+				card: {
+					DEFAULT: "hsl(var(--card) / <alpha-value>)",
+					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+				}
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)"
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans],
+				display:["Rubik Mono One", ...fontFamily.sans],
+				mono:["Overpass Mono","mono"]
+			}
+		}
 	},
-	plugins: [],
-}
+};
+
+export default config;