feat!: home page

messages/en.json

@@ -1,7 +1,38 @@
 {
   "home": {
-    "title": "Sorting Algorithm Visualization",
-    "about": "I am a developer who loves to learn new things. I have been programming for over 10 years and I love to explore new technologies and languages. I am currently learning TypeScript and React."
+    "hero": {
+      "title": "Sorting Algorithms Visualized",
+      "about": "Explore and understand how different sorting algorithms work through interactive visualizations",
+      "call-to-action": "Start Exploring"
+    },
+    "info": {
+      "title": "What are Sorting Algorithms?",
+      "description": "<paragraph>Sorting algorithms are methods for reorganizing a sequence of items in a specific order, typically in ascending or descending sequence. These algorithms are fundamental to computer science and form the backbone of many complex systems.</paragraph><paragraph>From organizing databases to optimizing search functions, sorting algorithms play a crucial role in software development. Understanding how they work and their efficiency characteristics helps developers choose the right algorithm for specific tasks.</paragraph>",
+      "title2": "Why Visualize Them?",
+      "description2": "<point>Visual learning enhances understanding of complex concepts</point><point>Compare algorithm efficiency in real-time</point><point>Identify patterns and behaviors in different sorting methods</point><point>Perfect for students, educators, and curious minds</point>"
+    },
+    "algorithms": {
+      "title": "Explore Popular Algorithms",
+      "description": "Select an algorithm to visualize its sorting process in the interactive playground",
+      "call-to-action": "Visualize",
+      "call-to-action2": "View All Algorithms",
+      "bubble-sort": {
+        "title": "Bubble Sort",
+        "description": "Simple comparison-based algorithm"
+      },
+      "selection-sort": {
+        "title": "Selection Sort",
+        "description": "In-place comparison sorting algorithm"
+      },
+      "insertion-sort": {
+        "title": "Insertion Sort",
+        "description": "Builds sorted array one item at a time"
+      },
+      "quick-sort": {
+        "title": "Quick Sort",
+        "description": "Efficient divide-and-conquer algorithm"
+      }
+    }
   },
   "metadata": {
     "title": "Sorting Algorithm Visualization",
@@ -14,11 +45,30 @@
   },
   "locale-switcher": {
     "label": "Change Language",
-    "locale": "{locale, select, en {🇺 English} sk {🇸 Slovenský} other {Unknown}}"
+    "locale": "{locale, select, en {English} sk {Slovak} other {Unknown}}"
   },
   "navigation": {
     "home": "Home",
     "playground": "Playground"
   },
-  "visualizer": {}
+  "footer": {
+    "title": "Sorting Algorithm Visualizer",
+    "description": "Learn through interactive visualization",
+    "copyright": "All rights reserved."
+  },
+  "visualizer": {
+    "start": "Start Sorting",
+    "resume": "Resume",
+    "pause": "Pause",
+    "reset": "Reset",
+    "new-data": "New Data",
+    "speed": "Speed",
+    "select-algorithm": "Select Algorithm",
+    "unsorted": "Unsorted",
+    "comparing": "Comparing",
+    "pivot": "Pivot",
+    "current": "Current Element",
+    "sorted": "Sorted",
+    "length": "Length:"
+  }
 }

messages/sk.json

@@ -1,7 +1,38 @@
 {
   "home": {
-    "title": "Vizualizácia algoritmov pre triedenie",
-    "about": "Som vývojár, ktorý rád sa zaujíma nových vecí. Som programoval od viac ako 10 rokov a rád sa zaujíma nových technológií a jazykov. V súčasnosti sa učím TypeScript a React."
+    "hero": {
+      "title": "Algoritmy Triedení Vizualizované",
+      "about": "Preskúmaj a pochop, ako fungujú rôzne algoritmy triedení cez interaktívne vizualizácie",
+      "call-to-action": "Chcem Vyskúšať"
+    },
+    "info": {
+      "title": "Čo sú Triediace algoritmy?",
+      "description": "<paragraph>Triediace algoritmy sú metódy pre preorganizovanie sekvencie položiek v konkrétnom poradí, obvykle v poradí vzostupne alebo zostupu. Tieto algoritmy sú základné v informatike a tvoria základ pre mnoho zložitejších systémov.</paragraph><paragraph>Od organizácie databáz cez optimalizáciu vyhľadávacích funkcií, triediace algoritmy sú zásadné vo vývoji softvéru. Poznanie ich funkcií a účinností nám pomôže vybrať správny algoritmus pre konkrétnu úlohu.</paragraph>",
+      "title2": "Prečo ich vizualizovať?",
+      "description2": "<point>Vizualizácia pomáha pri pochopení zložitých konceptov</point><point>Porovnávaj efektívnosť algoritmov</point><point>Zisti vzory a správanie v rôznych triediacich algoritmoch</point><point>Ideálne pre študentov, učiteľov a zvedavé hlavy</point>"
+    },
+    "algorithms": {
+      "title": "Pozri si Populárne Algoritmy",
+      "description": "Vyber si algoritmus, ktorý chceš vizualizovať v interaktívnom prehrávaní",
+      "call-to-action": "Vizualizovať",
+      "call-to-action2": "Pozrieť všetky algoritmy",
+      "bubble-sort": {
+        "title": "Bubble Sort",
+        "description": "Jednoduchý porovnávací algoritmus"
+      },
+      "selection-sort": {
+        "title": "Selection Sort",
+        "description": "Porovnávací algoritmus na mieste v pamäti"
+      },
+      "insertion-sort": {
+        "title": "Insertion Sort",
+        "description": "Vytvára zoradený zoznam jednou položkou naraz"
+      },
+      "quick-sort": {
+        "title": "Quick Sort",
+        "description": "Efektívny algoritmus rozdelenia a zlúčenia"
+      }
+    }
   },
   "metadata": {
     "title": "Vizualizácia algoritmov pre triedenie",
@@ -14,10 +45,31 @@
   },
   "locale-switcher": {
     "label": "Zmeniť jazyk",
-    "locale": "{locale, select, en {🇺 Anglický} sk {🇸 Slovenský} other {Neznámy}}"
+    "locale": "{locale, select, en {Anglický} sk {Slovenský} other {Neznámy}}"
   },
   "navigation": {
     "home": "Domov",
     "playground": "Vizualizácia"
+  },
+  "footer": {
+    "title": "Vizualizácia algoritmov pre triedenie",
+    "description": "Nauč sa cez interaktívne vizualizácie",
+
+    "copyright": "Všetky práva vyhradené."
+  },
+  "visualizer": {
+    "start": "Začať triedenie",
+    "resume": "Pokračovať",
+    "pause": "Zastaviť",
+    "reset": "Resetovať",
+    "new-data": "Nové dáta",
+    "speed": "Rýchlosť",
+    "select-algorithm": "Vyber algoritmus",
+    "unsorted": "Nevytriedené",
+    "comparing": "Porovnávanie",
+    "pivot": "Pivot",
+    "current": "Aktuálny prvok",
+    "sorted": "Vytriedené",
+    "length": "Dĺžka"
   }
 }

package.json

@@ -14,14 +14,15 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@icons-pack/react-simple-icons": "^12.7.0",
     "@radix-ui/react-select": "^2.2.2",
     "@radix-ui/react-slider": "^1.3.2",
     "@radix-ui/react-slot": "^1.2.0",
     "@t3-oss/env-nextjs": "^0.12.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
-    "lucide-react": "^0.502.0",
+    "lucide-react": "^0.503.0",
     "motion": "^12.7.4",
     "next": "15.3.1-canary.15",
     "next-intl": "^4.0.3",

src/app/[locale]/globals.css

@@ -41,75 +41,81 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
+  --color-bluesky-blue: var(--bluesky-blue);
+  --color-discord-blue: var(--discord-blue);
 }
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.5rem;
   --background: oklch(1 0 0);
-  --foreground: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.129 0.042 264.695);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
-  --primary-foreground: oklch(0.984 0.003 247.858);
-  --secondary: oklch(0.968 0.007 247.896);
-  --secondary-foreground: oklch(0.208 0.042 265.755);
-  --muted: oklch(0.968 0.007 247.896);
-  --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
-  --accent-foreground: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.623 0.214 259.815);
+  --primary-foreground: oklch(0.97 0.014 254.604);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.929 0.013 255.508);
-  --input: oklch(0.929 0.013 255.508);
-  --ring: oklch(0.704 0.04 256.788);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.623 0.214 259.815);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.984 0.003 247.858);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
-  --sidebar-primary: oklch(0.208 0.042 265.755);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.623 0.214 259.815);
+  --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.623 0.214 259.815);
+
+  --bluesky-blue: #0285ff;
+  --discord-blue: #5865f2;
 }
 
 .dark {
-  --background: oklch(0.129 0.042 264.695);
-  --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
-  --primary: oklch(0.929 0.013 255.508);
-  --primary-foreground: oklch(0.208 0.042 265.755);
-  --secondary: oklch(0.279 0.041 260.031);
-  --secondary-foreground: oklch(0.984 0.003 247.858);
-  --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.546 0.245 262.881);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
+  --ring: oklch(0.488 0.243 264.376);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.546 0.245 262.881);
+  --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --sidebar-ring: oklch(0.488 0.243 264.376);
 }
 
 @layer base {

src/app/[locale]/layout.tsx

@@ -4,6 +4,7 @@ import { hasLocale, type Locale, NextIntlClientProvider } from "next-intl";
 import { getTranslations, setRequestLocale } from "next-intl/server";
 import { routing } from "@/i18n/routing";
 import "./globals.css";
+import Footer from "@/components/footer";
 import Navigation from "@/components/navigation";
 
 const geistSans = Geist({
@@ -55,6 +56,7 @@ export default async function LocaleLayout({
         <NextIntlClientProvider>
           <Navigation />
           {children}
+          <Footer />
         </NextIntlClientProvider>
       </body>
     </html>

src/app/[locale]/not-found.tsx

@@ -4,6 +4,7 @@ import { ArrowRight, Home } from "lucide-react";
 import { motion } from "motion/react";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
+import { GradientText } from "@/components/animate-ui/gradient-text";
 import { HoleBackground } from "@/components/animate-ui/hole-background";
 import { Link } from "@/i18n/navigation";
 
@@ -28,8 +29,8 @@ export default function NotFoundPage() {
           transition={{ duration: 0.8 }}
           className="mb-8"
         >
-          <h1 className="mb-2 bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500 bg-clip-text font-black text-7xl text-transparent">
-            404
+          <h1 className="mb-2 bg-clip-text font-black text-7xl">
+            <GradientText text="404" neon />
           </h1>
           <motion.h2
             className="mb-4 font-bold text-4xl text-white md:text-5xl"