Merge pull request #1 from Talha-Ashraf420/talha-dev

Talha dev

app.vue

@@ -1,6 +1,18 @@
 <template>
-   <NuxtRouteAnnouncer />
    <NuxtLayout>
-      <NuxtPage />
+      <NuxtPage/>
    </NuxtLayout>
-</template>
+
+</template>
+
+<style>
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.3s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>

assets/css/tailwind.css

@@ -35,6 +35,9 @@
     --input:240 5.9% 90%;
     --ring:346.8 77.2% 49.8%;
     --radius: 0.5rem;
+    --color-red: #E11D47; /* New red color */
+    --color-black: #000;  /* Black color */
+    --color-white: #ffffff;
   }
 
   .dark {
@@ -65,16 +68,18 @@
     --border:240 3.7% 15.9%;
     --input:240 3.7% 15.9%;
     --ring:346.8 77.2% 49.8%;
+    --color-black: var(--color-white);
   }
-}
 
 
+}
 
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
+    overflow-x: hidden;
   }
 }

components/Hero.vue

@@ -1,29 +1,100 @@
 <template>
-    <main class="grid lg:grid-cols-2 place-items-center">
-      <div class="py-6 md:order-1 hidden md:block">
-        <img src="@/assets/images/watchtowerheader.png" alt="watchtower girl standing next to it" loading="eager" class="w-full h-auto" />
+  <div class="grid lg:grid-cols-2 place-items-center">
+    <div class="py-6 md:order-1 hidden md:block">
+      <img v-if="colorMode.preference !== 'dark'" src="@/assets/images/dark-tower.svg"
+        alt="watchtower girl standing next to it" loading="eager" class="w-full h-auto" />
+      <img v-if="colorMode.preference === 'dark'" src="@/assets/images/light-tower.svg"
+        alt="watchtower girl standing next to it" loading="eager" class="w-full h-auto" />
+      <!-- <svg xmlns="http://www.w3.org/2000/svg" width="25em" height="25em" viewBox="0 0 512 512">
+          <path fill="currentColor"
+            d="m256 32l-96 48h23v71h-32v50h30.945L155.36 440.244l-.653.477l.522.72l-4.175 37.566l-.994 8.945l17.89 1.99l.995-8.946L171.61 457h168.78l2.665 23.994l.994 8.945l17.89-1.99l-.995-8.944l-4.174-37.567l.523-.72l-.654-.476L330.054 201H361v-50h-32V80h23zm-48 64h32v48h-32zm64 0h32v48h-32zm-103 73h14v14h-14zm32 0h14v14h-14zm32 0h14v14h-14zm32 0h14v14h-14zm32 0h14v14h-14zm32 0h14v14h-14zm-113.328 32h80.656L256 236.848zm-16.65 9.283L240.33 247h-45.385l4.08-36.717zm113.955 0l4.08 36.717h-45.385zM192.945 265h31.383l-34.822 30.953l3.44-30.953zm58.477 0h9.156l51.75 46H199.672zm36.25 0h31.383l3.44 30.953L287.67 265zm-83.994 64h104.644L256 367.053zm-18.8 8.586L236.323 375h-55.6l4.157-37.414zm142.243 0L331.278 375h-55.6l51.444-37.414zM178.724 393h41.6l-45.26 32.914zm72.205 0h10.144l63.25 46H187.678l63.25-46zm40.75 0h41.6l3.658 32.914z" />
+        </svg> -->
+    </div>
+    <div>
+      <div class="wrapper">
+        <div class="text-container">
+          <h1 class="scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-5xl multi-colored-text">
+            Watch
+            Tower
+          </h1>
+        </div>
       </div>
-      <div>
-        <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
-          Watchtower
-        </h1>
-        <p class="text-xl text-muted-foreground">
-            Elevating Digital Governance with Vigilance
-        </p>
-        <p class="leading-7 [&:not(:first-child)]:mt-6"> 
-            Watchtower monitors and analyzes government websites to ensure top performance, accessibility, and transparency.
-        </p>
-        <div class="mt-6 flex flex-col sm:flex-row gap-3">
-        <Button @click="$router.push('/data')">Get Started</Button>
-        <Button variant="outline" @click="$router.push('/performance')">
-            More Info
+
+      <p class="text-xl text-muted-foreground inline-flex whitespace-nowrap justify-start mt-4">
+        Elevating Digital
+        <span class="text-primary ml-2">Governance with Vigilance</span>
+      </p>
+      <p class="leading-7 [&:not(:first-child)]:mt-6">
+        Watchtower monitors and analyzes government websites to ensure top performance, accessibility, and transparency.
+      </p>
+      <div class="mt-6 flex flex-col sm:flex-row gap-3">
+        <Button size="lg" class="rounded-full" @click="$router.push('/performance')">Get Started</Button>
+        <Button size="lg" class="rounded-full" variant="outline" @click="$router.push('/performance')">
+          More Info
         </Button>
-        </div>
       </div>
-    </main>
-  </template>
-
-  <script setup>
-    import { Icon } from '@iconify/vue';
-  </script>
-
+    </div>
+
+  </div>
+  <div class="px-96 py-16">
+    <div class="border-b ">
+
+    </div>
+  </div>
+</template>
+
+
+<script setup>
+const colorMode = useColorMode();
+
+</script>
+
+<style scoped>
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-black: var(--color-white);
+    --color-white: #000000;
+  }
+}
+
+.multi-colored-text {
+  font-family: "Exo", sans-serif;
+  font-weight: 900;
+  width: min-content;
+  text-transform: uppercase;
+  background: linear-gradient(45deg,
+      var(--color-black) 50%,
+      var(--color-red) 50%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.wrapper {
+  line-height: 1;
+  min-height: 100%;
+}
+
+.text-container {
+  background: radial-gradient(circle at 98% 98%, var(--color-red) .8%, transparent .8%),
+    radial-gradient(circle at 95% 95%, var(--color-2) .45%, transparent .45%),
+    radial-gradient(circle at 94.5% 97.5%, var(--color-3) .5%, transparent .5%),
+    radial-gradient(circle at 98.5% 95.5%, var(--color-4) .25%, transparent .25%),
+    radial-gradient(circle at 1.4% 1.4%, var(--color-red) .8%, transparent .8%),
+    radial-gradient(circle at 5.5% 3%, var(--color-2) .45%, transparent .45%),
+    radial-gradient(circle at 2.5% 3.5%, var(--color-3) .5%, transparent .5%),
+    radial-gradient(circle at 4.5% 1.2%, var(--color-4) .25%, transparent .25%);
+}
+
+@media screen and (min-width: 768px) {
+  .multi-colored-text {
+    font-size: 4rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .invert-on-dark-mode {
+    filter: invert(1);
+  }
+}
+</style>

components/Navbar.vue

@@ -1,43 +1,61 @@
 <template>
-    <nav class="relative flex w-full flex-nowrap items-center justify-between py-2 lg:flex-wrap lg:justify-start lg:py-4" data-twe-navbar-ref>
-      <div class="flex w-full flex-wrap items-center justify-between px-3">
-        <button class="block border-0 bg-transparent px-2 text-black/50 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden" type="button" @click="isMenuOpen = !isMenuOpen" aria-controls="navbarSupportedContent13" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-              <path fill-rule="evenodd" d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
-            </svg>
-          </span>
-        </button>
-        <div :class="{'!visible mt-2': isMenuOpen, 'hidden': !isMenuOpen, 'flex-grow basis-[100%] items-center lg:mt-0 lg:!flex lg:basis-auto': true}" id="navbarSupportedContent13">
-          <div class="ms-2">
-            <a class="text-xl text-black dark:text-white" href="/"><img src="@/assets/images/logosm.png" alt="Logo" class="h-6 w-6" /></a>
-          </div>
-          <ul class="list-style-none me-auto flex flex-col ps-0 lg:mt-1 lg:flex-row">
-            <li class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2">
-              <a class="text-black dark:text-white lg:px-2" aria-current="page" href="/performance">Data</a>
-            </li>
-            <li class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2">
-              <a class="text-black dark:text-white lg:px-2" aria-current="page" href="/about">About</a>
-            </li>
-            <li class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0">
-              <a lass="text-black dark:text-white lg:px-2" aria-current="page" href="/contact">Contact</a>
-            </li>
-          </ul>
-          <div class="flex items-center">
-            <Button class="text-gray-800 dark:text-gray-200 mr-4" @click="colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'">
-                <Icon :icon="colorMode.preference === 'dark' ? 'radix-icons:sun' : 'radix-icons:moon'" class="h-[1.2rem] w-[1.2rem]" />
-                <span class="sr-only">Toggle theme</span>
-            </Button>
-          </div>
+  <nav class="relative flex w-full flex-nowrap items-center justify-between py-2 lg:flex-wrap lg:justify-start lg:py-4"
+    data-twe-navbar-ref>
+    <div class="flex w-full flex-wrap items-center justify-between">
+      <button
+        class="block border-0 bg-transparent px-2 text-black/50 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
+        type="button" @click="isMenuOpen = !isMenuOpen" aria-controls="navbarSupportedContent13" aria-expanded="false"
+        aria-label="Toggle navigation">
+        <span class="[&>svg]:w-7 [&>svg]:stroke-black/50 dark:[&>svg]:stroke-neutral-200">
+          <svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
+            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"
+              d="M20 7H4m16 5H4m16 5H4" />
+          </svg>
+        </span>
+      </button>
+      <div
+        :class="{ '!visible mt-2': isMenuOpen, 'hidden': !isMenuOpen, 'flex-grow basis-[100%] items-center lg:mt-0 lg:!flex lg:basis-auto': true }"
+        id="navbarSupportedContent13">
+        <div class="ms-2">
+          <NuxtLink class="text-xl text-black dark:text-white" to="/">
+            <img v-if="colorMode.preference !== 'dark'" src='@/assets/images/logo-dark.svg' alt="Logo"
+              class="h-20 w-20" />
+            <img v-if="colorMode.preference === 'dark'" src='@/assets/images/logo-light.svg' alt="Logo"
+              class="h-20 w-20" />
+          </NuxtLink>
         </div>
+        <ul class="list-style-none flex flex-col ps-0 lg:mt-1 lg:flex-row ml-auto mr-24">
+          <li class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2">
+            <NuxtLink :class="{ 'underline text-primary': route.path === '/performance', 'text-black dark:text-white lg:px-2': true }"
+              aria-current="page" to="/performance">Data</NuxtLink>
+          </li>
+          <li class="my-4 ps-2 lg:my-0 lg:pe-1 lg:ps-2">
+            <NuxtLink :class="{ 'underline text-primary': route.path === '/about', 'text-black dark:text-white lg:px-2': true }"
+              aria-current="page" to="/about">About</NuxtLink>
+          </li>
+          <li class="mb-4 ps-2 lg:mb-0 lg:pe-1 lg:ps-0">
+            <NuxtLink :class="{ 'underline text-primary': route.path === '/contact', 'text-black dark:text-white lg:px-2': true }"
+              aria-current="page" to="/contact">Contact</NuxtLink>
+          </li>
+        </ul>
       </div>
-    </nav>
-  </template>
-
-  <script setup lang="ts">
-    import { Icon } from '@iconify/vue';
-    import { Button } from '@/components/ui/button';
-    
-    const colorMode = useColorMode();
-    const isMenuOpen = ref(false);
-  </script>
+      <div class="flex items-center">
+          <a class="text-gray-800 dark:text-gray-200 mr-4"
+            @click="colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'">
+            <Icon :icon="colorMode.preference === 'dark' ? 'radix-icons:moon' : 'radix-icons:sun'"
+              class="h-[1.2rem] w-[1.2rem]" />
+            <span class="sr-only">Toggle theme</span>
+          </a>
+        </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import { Button } from '@/components/ui/button';
+
+const colorMode = useColorMode();
+const isMenuOpen = ref(false);
+const route = useRoute();
+</script>