diff --git a/package.json b/package.json
index 3a27f9a..dc6d521 100644
--- a/package.json
+++ b/package.json
@@ -28,11 +28,12 @@
"radix-ui": "^1.4.3",
"react": "19.2.3",
"react-dom": "19.2.3",
+ "react-icons": "^5.6.0",
"shadcn": "^4.6.0",
"sharp": "^0.34.5",
+ "stripe": "^22.1.0",
"tailwind-merge": "^3.5.0",
- "tw-animate-css": "^1.4.0",
- "stripe": "^22.1.0"
+ "tw-animate-css": "^1.4.0"
},
"devDependencies": {
"@biomejs/biome": "2.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a67135f..7546187 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,9 @@ importers:
react-dom:
specifier: 19.2.3
version: 19.2.3(react@19.2.3)
+ react-icons:
+ specifier: ^5.6.0
+ version: 5.6.0(react@19.2.3)
shadcn:
specifier: ^4.6.0
version: 4.6.0(@types/node@20.19.37)(babel-plugin-macros@3.1.0)(typescript@5.9.3)
@@ -3676,6 +3679,11 @@ packages:
peerDependencies:
react: ^18.0.0 || ^19.0.0
+ react-icons@5.6.0:
+ resolution: {integrity: sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==}
+ peerDependencies:
+ react: '*'
+
react-image-crop@10.1.8:
resolution: {integrity: sha512-4rb8XtXNx7ZaOZarKKnckgz4xLMvds/YrU6mpJfGhGAsy2Mg4mIw1x+DCCGngVGq2soTBVVOxx2s/C6mTX9+pA==}
peerDependencies:
@@ -8127,6 +8135,10 @@ snapshots:
dependencies:
react: 19.2.3
+ react-icons@5.6.0(react@19.2.3):
+ dependencies:
+ react: 19.2.3
+
react-image-crop@10.1.8(react@19.2.3):
dependencies:
react: 19.2.3
diff --git a/src/app/(frontend)/globals.css b/src/app/(frontend)/globals.css
index bcc0120..6a708a6 100644
--- a/src/app/(frontend)/globals.css
+++ b/src/app/(frontend)/globals.css
@@ -33,6 +33,37 @@
--color-popover-foreground: var(--popover-foreground);
}
+/* Custom animation */
+@keyframes wiggle {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 20% {
+ transform: rotate(-5deg);
+ }
+
+ 40% {
+ transform: rotate(5deg);
+ }
+
+ 60% {
+ transform: rotate(-4deg);
+ }
+
+ 75% {
+ transform: rotate(4deg);
+ }
+
+ 85% {
+ transform: rotate(-2deg);
+ }
+
+ 100% {
+ transform: rotate(0deg);
+ }
+}
+
:root {
--radius: 9999px;
--background: white;
diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
index ee03e77..e19b802 100644
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@@ -1,7 +1,7 @@
import { Inter, Staatliches } from "next/font/google"
import type React from "react"
-import { Navbar } from "@/components"
import "./globals.css"
+import { Footer, Navbar } from "@/components"
const staatliches = Staatliches({
subsets: ["latin"],
@@ -26,9 +26,10 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
return (
-
+
- {children}
+ {children}
+
)
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
new file mode 100644
index 0000000..614503f
--- /dev/null
+++ b/src/components/Footer/Footer.tsx
@@ -0,0 +1,147 @@
+import Link from "next/link"
+import { FaDiscord, FaInstagram, FaTiktok } from "react-icons/fa"
+import { Logo } from "@/components/Logo/Logo"
+
+export function Footer() {
+ return (
+
+ )
+}
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
new file mode 100644
index 0000000..bed2f5b
--- /dev/null
+++ b/src/components/Logo/Logo.tsx
@@ -0,0 +1,20 @@
+import Image from "next/image"
+import Link from "next/link"
+
+const FOCUS_RING =
+ "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+
+export function Logo() {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 7eb6f9e..4fba659 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1 +1,3 @@
+export { Footer } from "./Footer/Footer"
+export { Logo } from "./Logo/Logo"
export { Navbar } from "./Navbar/Navbar"