Added tailwindcss, the main pages to create the Website and routes

2025-11-13 22:31:20 +00:00
parent 98a2ca4611
commit 4ac9487605
17 changed files with 4919 additions and 74 deletions
@@ -0,0 +1,8 @@
+<script setup></script>
+
+<template>
+  <h1>Game Board</h1>
+  <p>Game board page content goes here</p>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,8 @@
+<script setup></script>
+
+<template>
+  <h1>Game Selection</h1>
+  <p>Game selection page content goes here</p>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,65 @@
+<script setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+</script>
+
+<template>
+  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center px-4">
+    <div class="max-w-4xl w-full">
+      <div class="text-center mb-16">
+        <div class="mb-6">
+          <div class="text-7xl mb-4">🎰</div>
+          <h1 class="text-6xl font-bold text-white mb-2">Bisca</h1>
+          <p class="text-xl text-purple-200">The Traditional Portuguese Card Game Online</p>
+        </div>
+        <p class="text-lg text-slate-300 max-w-2xl mx-auto">
+          Challenge players from around the world in this classic card game. Master the rules, build your strategy, and climb the leaderboards.
+        </p>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 max-w-2xl mx-auto">
+        <div class="group relative bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-8 hover:shadow-2xl cursor-pointer overflow-hidden"
+             @click="router.push('/game-selection')">
+          <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10"></div>
+          <div class="relative z-10">
+            <div class="text-5xl mb-4">🎮</div>
+            <h2 class="text-2xl font-bold text-white mb-2">Play Game</h2>
+            <p class="text-blue-100 text-sm">Start a new match and test your skills</p>
+          </div>
+        </div>
+
+        <div class="group relative bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl p-8 hover:shadow-2xl cursor-pointer overflow-hidden"
+             @click="router.push('/leader-boards')">
+          <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10"></div>
+          <div class="relative z-10">
+            <div class="text-5xl mb-4">🏆</div>
+            <h2 class="text-2xl font-bold text-white mb-2">Leaderboards</h2>
+            <p class="text-amber-100 text-sm">Compete globally and see the rankings</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <button
+          @click="router.push('/login')"
+          class="px-8 py-3 bg-white text-slate-900 font-bold rounded-lg hover:bg-slate-100 shadow-lg"
+        >
+          Sign In
+        </button>
+        <button
+          @click="router.push('/register')"
+          class="px-8 py-3 border-2 border-white text-white font-bold rounded-lg hover:bg-white hover:text-slate-900"
+        >
+          Create Account
+        </button>
+      </div>
+
+      <div class="mt-16 pt-8 border-t border-slate-700 text-center text-slate-400 text-sm">
+        <p>Play anonymously or sign in to compete with others and earn rewards</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,8 @@
+<script setup></script>
+
+<template>
+  <h1>LeaderBoards</h1>
+  <p>LeaderBoards page content goes here</p>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,8 @@
+<script setup></script>
+
+<template>
+  <h1>Profile</h1>
+  <p>Login page content goes here</p>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,8 @@
+<script setup></script>
+
+<template>
+  <h1>Profile</h1>
+  <p>Profile page content goes here</p>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,8 @@
+<script setup></script>
+
+<template>
+  <h1>Profile</h1>
+  <p>Register page content goes here</p>
+</template>
+
+<style scoped></style>