1 files changed, 103 insertions, 3 deletions
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 82ffd99..48fa46e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,13 +1,62 @@
 import { Link } from "waku";
 
-import { Counter } from "../components/counter";
+import { Progress } from "@/components/ui/progress";
 import { getContextData } from "waku/middleware/context";
-import Main from "../components/Main";
+
+type LanguageChoice = "th" | "en" | "zh" | "ja" | "es" | "fr";
+type LangMeta = { flag: string; name: string };
+const langs: Record<LanguageChoice, LangMeta> = {
+  th: { flag: "🇹🇭", name: "Thai" },
+  en: { flag: "🇬🇧", name: "English" },
+  zh: { flag: "🇨🇳", name: "Chinese" },
+  ja: { flag: "🇯🇵", name: "Japanese" },
+  es: { flag: "🇪🇸", name: "Spanish" },
+  fr: { flag: "🇫🇷", name: "French" },
+};
 
 export default async function HomePage() {
   const { user } = getContextData();
 
-  return <Main />;
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="bg-white shadow-sm sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center">
+              <h1 className="text-2xl font-bold text-indigo-600">Prosody</h1>
+            </div>
+
+            {/* Desktop Navigation */}
+            <nav className="hidden md:flex space-x-8">
+              <Link to="/">
+                <button
+                  className={`py-2 font-medium text-indigo-600 border-b-2 border-indigo-600`}
+                >
+                  Home
+                </button>
+              </Link>
+              <Link to="/parse">
+                <button
+                  className={`py-2 font-medium text-gray-600 hover:text-indigo-600`}
+                >
+                  Analyze Text
+                </button>
+              </Link>
+            </nav>
+          </div>
+        </div>
+
+        {/* Mobile Navigation */}
+      </header>
+      <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <h2 className="text-lg"> Your Languages</h2>
+        <LanguageItem lang="en" />
+        <LanguageItem lang="th" />
+        <LanguageItem lang="zh" />
+        <LanguageItem lang="ja" />
+      </section>
+    </div>
+  );
 }
 
 const getData = async () => {
@@ -25,3 +74,54 @@ export const getConfig = async () => {
     render: "dynamic",
   } as const;
 };
+
+async function LanguageItem({ lang }: { lang: LanguageChoice }) {
+  return (
+    <Link to={`/lang/${lang}`}>
+      <div className="bg-white rounded-xl h-32 shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
+        <div className="p-6">
+          <div className="flex">
+            <div className="text-lg">{langs[lang].flag}</div>
+            <div className="text-lg">{langs[lang].name}</div>
+          </div>
+          <Progress value={50} className="w-[60%]" />
+        </div>
+      </div>
+    </Link>
+  );
+}
+{
+  /* Language Cards */
+}
+// <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+//   {languages.slice(0, 3).map((lang) => (
+//     <div
+//       key={lang.id}
+//       className="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"
+//     >
+//       <div className="p-6">
+//         <div className="flex items-center justify-between mb-4">
+//           <div className="flex items-center">
+//             <span className="text-3xl mr-3">{lang.flag}</span>
+//             <h3 className="text-xl font-semibold">{lang.name}</h3>
+//           </div>
+//           <span className="text-xs font-semibold bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full">
+//             Beginner
+//           </span>
+//         </div>
+//         <div className="mb-4">
+//           <div className="w-full bg-gray-200 rounded-full h-2.5 mb-1">
+//             <div
+//               className="bg-indigo-600 h-2.5 rounded-full"
+//               style={{ width: "40%" }}
+//             ></div>
+//           </div>
+//           <div className="text-right text-sm text-gray-500">40% Complete</div>
+//         </div>
+//         <button className="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors duration-300">
+//           Continue Learning
+//         </button>
+//       </div>
+//     </div>
+//   ))}
+// </div>;