feat(pages): home page base

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

README.md

@@ -1 +1,3 @@
 # IT-Tools
+
+It-Tools v3 nuxt exploration branch

package.json

@@ -2,6 +2,8 @@
   "name": "@it-tools/root",
   "version": "0.0.0",
   "description": "IT Tools monorepo root",
+  "packageManager": "[email protected]",
+
   "scripts": {
     "dev": "pnpm -F @it-tools/app dev"
   },
@@ -10,6 +12,5 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/CorentinTh/it-tools"
-  },
-  "packageManager": "[email protected]"
+  }
 }

packages/app/app.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

packages/app/assets/css/tailwind.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border:240 5.9% 90%;
+    --input:240 5.9% 90%;
+    --ring:240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background:0 0% 9%;
+    --foreground:0 0% 98%;
+
+    --card: 0 0% 7%;
+    --card-foreground:0 0% 98%;
+
+    --popover:240 10% 3.9%;
+    --popover-foreground:0 0% 98%;
+
+    --primary: 83 79% 55%;
+    --primary-foreground:240 5.9% 10%;
+
+    --secondary:240 3.7% 15.9%;
+    --secondary-foreground:0 0% 98%;
+
+    --muted:240 3.7% 15.9%;
+    --muted-foreground:240 5% 64.9%;
+
+    --accent:240 3.7% 15.9%;
+    --accent-foreground:0 0% 98%;
+
+    --destructive:0 62.8% 30.6%;
+    --destructive-foreground:0 0% 98%;
+
+    --border:240 3.7% 15.9%;
+    --input:240 3.7% 15.9%;
+    --ring:240 4.9% 83.9%;
+  }
+}
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

packages/app/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/src/modules/ui/components",
+    "ui": "@/src/modules/ui/components",
+    "utils": "@/src/modules/shared/style/cn"
+  }
+}

packages/app/i18n.config.ts

@@ -0,0 +1,12 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      welcome: 'Welcome',
+    },
+    fr: {
+      welcome: 'Bienvenue',
+    },
+  },
+}));

packages/app/nuxt.config.ts

@@ -2,4 +2,40 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
+
+  extends: [
+    'src/modules/app',
+  ],
+
+  modules: [
+    '@nuxtjs/tailwindcss',
+    'shadcn-nuxt',
+    '@nuxt/fonts',
+    '@nuxt/icon',
+    '@vueuse/nuxt',
+    '@nuxtjs/color-mode',
+    '@nuxtjs/i18n',
+  ],
+
+  fonts: {
+    provider: 'bunny',
+    defaults: {
+      weights: [400, 500, 600, 700, 800],
+    },
+  },
+
+  colorMode: {
+    preference: 'system',
+    fallback: 'dark',
+    classSuffix: '',
+    storage: 'cookie',
+    storageKey: 'itts-color-mode',
+  },
+
+  i18n: {
+    strategy: 'prefix',
+    vueI18n: './i18n.config.ts',
+    locales: ['en', 'fr'],
+    defaultLocale: 'en',
+  },
 });

packages/app/package.json

@@ -2,6 +2,8 @@
   "name": "@it-tools/app",
   "type": "module",
   "private": true,
+  "packageManager": "[email protected]",
+
   "scripts": {
     "dev": "nuxt dev",
     "build": "nuxt build",
@@ -17,13 +19,28 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@nuxt/fonts": "^0.10.2",
+    "@nuxt/icon": "^1.5.6",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/i18n": "^8.5.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-vue-next": "^0.453.0",
     "nuxt": "^3.13.2",
+    "radix-vue": "^1.9.7",
+    "shadcn-nuxt": "^0.10.4",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
     "vue": "latest",
     "vue-router": "latest"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.8.0",
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/nuxt": "^11.1.0",
     "eslint": "^9.13.0",
+    "typescript": "^5.6.3",
     "vitest": "^2.1.3"
   }
 }

packages/app/src/modules/app/components/app-footer.vue

@@ -0,0 +1,113 @@
+<script setup>
+const localePath = useLocalePath();
+
+const sections = computed(() => [
+  {
+    title: 'Lorem',
+    items: [
+      { label: 'Foo', to: '/foo' },
+      { label: 'Bar', to: '/bar' },
+      { label: 'Baz', to: '/baz' },
+    ],
+  },
+  {
+    title: 'Ipsum',
+    items: [
+      { label: 'Foo', to: '/foo' },
+      { label: 'Bar', to: '/bar' },
+      { label: 'Baz', to: '/baz' },
+    ],
+  },
+  {
+    title: 'Dolor',
+    items: [
+      { label: 'Foo', to: '/foo' },
+      { label: 'Bar', to: '/bar' },
+      { label: 'Baz', to: '/baz' },
+    ],
+  },
+
+]);
+
+const socialLinks = [
+  {
+    icon: 'i-tabler-brand-github',
+    href: 'https://github.com/CorentinTh/it-tools',
+    label: 'GitHub',
+  },
+  {
+    icon: 'i-tabler-brand-x',
+    href: 'https://x.com/ittoolsdottech',
+    label: 'X',
+  },
+  {
+    icon: 'i-tabler-coffee',
+    href: 'https://buymeacoffee.com/cthmsst',
+    label: 'Support the project',
+  },
+];
+</script>
+
+<template>
+  <footer class="bg-card border-t border-border">
+    <div class="py-12 px-6 max-w-screen-xl mx-auto ">
+      <div class="flex items-start justify-between flex-col md:flex-row gap-12">
+        <div>
+          <div class="flex items-center gap-2">
+            <NuxtLink :to="localePath('/')" class="text-2xl font-semibold border-b border-transparent hover:no-underline h-auto py-0 px-1 ml--1 rounded-none !transition-border-color-250 group text-muted-foreground flex items-center gap-1">
+              <span class="font-bold group-hover:text-foreground transition">IT</span>
+              <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 pt-0.5 ml-1 group-hover:text-primary transition">TOOLS</span>
+            </NuxtLink>
+          </div>
+
+          <div class="flex items-center gap-2 mt-4">
+            <!-- {socialLinks.map(({ icon, href, label }) => (
+            <a href="{href}" target="_blank" rel="noopener noreferrer" class="text-2xl text-muted-foreground hover:text-primary transition" aria-label="{label}">
+              <div class="{icon}" />
+            </a>
+            ))} -->
+            <a
+              v-for="socialLink in socialLinks" :key="socialLink.label" :href="socialLink.href" target="_blank" rel="noopener noreferrer" class="text-2xl text-muted-foreground hover:text-primary transition" :aria-label="socialLink.label"
+            >
+              <Icon :name="socialLink.icon" />
+            </a>
+          </div>
+
+          <div class="text-muted-foreground mt-2">
+            Crafted on Earth by
+            <a href="https://corentin.tech" target="_blank" rel="noopener" class="hover:text-primary transition">
+              Corentin Thomasset
+            </a>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-12">
+          <div v-for="section in sections" :key="section.title">
+            <h4 class="font-semibold text-foreground">
+              {{ section.title }}
+            </h4>
+            <ul class="mt-4">
+              <li v-for="item in section.items" :key="item.label" class="mt-1">
+                <NuxtLink v-if="item.to" :to="localePath(item.to)" class="text-muted-foreground hover:text-primary transition">
+                  {{ item.label }}
+                </NuxtLink>
+                <a v-else :href="item.href" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition">
+                  {{ item.label }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-xs text-muted-foreground border-t border-border pt-4 mt-12">
+        <span>
+          &copy;
+          {{ new Date().getFullYear() }}
+          Corentin Thomasset
+        </span>
+      </div>
+      <div class="text-xs text-foreground opacity-80%" />
+    </div>
+  </footer>
+</template>

packages/app/src/modules/app/components/app-header.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { Button } from '@/src/modules/ui/components/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu';
+
+const colorMode = useColorMode();
+</script>
+
+<template>
+  <div class="w-full border-b">
+    <div class="max-w-screen-xl mx-auto flex items-center justify-between py-2 px-6">
+      <NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
+        <span class="font-bold text-foreground">IT</span>
+        <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
+      </NuxtLink>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="ghost" size="icon">
+            <Icon name="i-tabler-moon" class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Icon name="i-tabler-sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <span class="sr-only">Toggle theme</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'light' }" @click="colorMode.preference = 'light'">
+            <Icon name="i-tabler-sun" class="mr-2 size-4" />
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'dark' }" @click="colorMode.preference = 'dark'">
+            <Icon name="i-tabler-moon" class="mr-2 size-4" />
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'system' }" @click="colorMode.preference = 'system'">
+            <Icon name="i-tabler-device-laptop" class="mr-2 size-4" />
+            System
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </div>
+</template>

packages/app/src/modules/app/components/grid-background.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ fadeBottom?: boolean; faderClass?: string }>(), { fadeBottom: true });
+</script>
+
+<template>
+  <div class="w-full bg-[linear-gradient(to_right,#80808010_1px,transparent_1px),linear-gradient(to_bottom,#80808010_1px,transparent_1px)] bg-[size:48px_48px] pt-20">
+    <slot />
+
+    <div v-if="props.fadeBottom" class="bg-gradient-to-t from-background to-transparent h-24 mt-24" :class="props.faderClass" />
+  </div>
+</template>