chore(deps): upgrade tailwindcss to 4.0.0

.mega-linter.yml

@@ -22,6 +22,7 @@ DISABLE_LINTERS:
   - REPOSITORY_TRUFFLEHOG # too long to search for secret
   - RUST_CLIPPY # run via an other way, and current version doesn't support `--deny ... --allow ...`
   - SQL_TSQLLINT # "You must install or update .NET to run this application."
+  - TYPESCRIPT_STANDARD
 SHOW_ELAPSED_TIME: true
 FILEIO_REPORTER: false
 # DISABLE_ERRORS: true # Uncomment if you want MegaLinter to detect errors but not block CI to pass

cdviz-site/.gitignore

@@ -142,3 +142,6 @@ dist
 .svelte-kit
 
 # End of https://www.toptal.com/developers/gitignore/api/node
+
+.vite
+dist

cdviz-site/landingpage/.mise.toml

@@ -5,4 +5,4 @@
 install = "bun install"
 dev = "bun run vite dev"
 build = "bun run vite build"
-preview = "bun run vitepreview"
+preview = "bun run vite preview"

cdviz-site/landingpage/index.html

@@ -72,7 +72,7 @@
       work in progress
     </div>
 
-    <header class="sticky top-0 z-10 bg-background/50 shadow-sm backdrop-blur">
+    <header class="sticky top-0 z-10 bg-background/50 shadow-xs backdrop-blur-sm">
       <div
         class="flex flex-row flex-wrap items-center justify-between space-x-4 p-4"
       >
@@ -423,6 +423,6 @@ <h2>Frequently Asked Questions</h2>
     <footer>
       <!-- What else is on the website -->
     </footer>
-    <script type="module" src="./main.js"></script>
+    <script type="module" src="./src/main.js"></script>
   </body>
 </html>

cdviz-site/landingpage/package.json

@@ -4,15 +4,12 @@
   "version": "0.0.0",
   "type": "module",
   "devDependencies": {
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
-    "prettier": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
-    "tailwindcss": "^3.4.15",
-    "vite": "^6.0.0"
-  },
-  "dependencies": {
-    "@iconify-json/simple-icons": "^1.2.12",
-    "@iconify/tailwind": "^1.1.3"
+    "@iconify-json/simple-icons": "^1.2.22",
+    "@iconify/tailwind": "^1.2.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.0.11"
   }
 }

cdviz-site/landingpage/src/style.css

@@ -0,0 +1,217 @@
+@import "tailwindcss";
+
+/*
+The plugin iconify is not working (yet?) with the plugin system of tailwindcss v4 => use the config file instead.
+```
+@plugin "@iconify/tailwind";
+```
+*/
+@config "./tailwind.config.cjs";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@font-face {
+  font-family: "Droid Sans", system-ui, sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src:
+    url("./assets/fonts/droid-sans/DroidSans-webfont.woff2") format("woff2"),
+    url("./assets/fonts/droid-sans/DroidSans-webfont.woff") format("woff");
+}
+
+@theme {
+  /* see [Perfect Ratios & How to Find Them - YouTube](https://www.youtube.com/watch?v=r1DANFZYJDw) */
+  --spacing-2xs: 0.3rem;
+  --spacing-xs: 0.486rem;
+  --spacing-sm: 0.7862rem;
+  --spacing-md: 1.272rem; /* "1rem", the base */
+  --spacing-lg: 2.058rem;
+  --spacing-xl: 3.330rem;
+  --spacing-2xl: 5.388rem;
+  --spacing-4xl: 8.778rem;
+  /*
+  // theme build with:
+  // - https://www.realtimecolors.com/?colors=0e151b-c9d2de-f29107-a294c2-725190&fonts=DroidSans-DroidSans
+  // - alternative: https://www.realtimecolors.com/?colors=0e0d0b-f9f8f6-fbbd23-abbfb9-8d9daa&fonts=DroidSans-DroidSans
+  // - manually set `DEFAULT` when export in Tailwind CSS + Themes + Shades
+  // - export in Tailwind CSS + Themes  in HSL (to be able to use opacity `/5`)
+  // - in source of realtime the number suffixing the color is the opacity
+
+  // fontSize: {
+  //   sm: "0.750rem",
+  //   base: "1rem",
+  //   xl: "1.333rem",
+  //   "2xl": "1.777rem",
+  //   "3xl": "2.369rem",
+  //   "4xl": "3.158rem",
+  //   "5xl": "4.210rem",
+  // },
+  */
+  --font-sans: ["Droid Sans", var(--font-sans)];
+  --font-heading: "Droid Sans";
+  --font-body: "Droid Sans";
+  --font-weight-normal: "400";
+  --font-weight-bold: "700";
+  --color-text: var(--text);
+  --color-background: var(--background);
+  --color-primary: var(--primary);
+  --color-secondary: var(--secondary);
+  --color-accent: var(--accent);
+}
+
+:root {
+  --text: oklch(19.15% 0.016 244.65);
+  --background: oklch(86.05% 0.019 255.54);
+  --primary: oklch(74.22% 0.166 64.29);
+  --secondary: oklch(69.49% 0.068 298.56);
+  --accent: oklch(49.68% 0.104 307.15);
+}
+
+.dark {
+  --text: oklch(93.65% 0.011 243.66);
+  --background: oklch(28.19% 0.026 255.73);
+  --primary: oklch(75.84% 0.168 64.71);
+  --secondary: oklch(39.60% 0.077 296.74);
+  --accent: oklch(59.84% 0.100 307.64);
+}
+
+h1 {
+  @apply text-4xl font-bold leading-[3.2rem] tracking-tight;
+  @apply md:text-6xl md:leading-[4.2rem];
+  @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
+}
+
+h2 {
+  @apply mb-lg text-center text-3xl font-bold tracking-tight;
+  @apply md:text-5xl;
+  @apply relative;
+}
+
+h3 {
+  @apply mb-md text-xl font-bold tracking-tight;
+}
+
+/* @layer components { */
+.clickable {
+  @apply cursor-pointer transition-all duration-300;
+  @apply hover:scale-105 hover:cursor-pointer hover:shadow-lg;
+}
+
+.btn {
+  @apply rounded-lg bg-secondary px-6 py-3 text-text;
+  @apply focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2;
+  @apply active:bg-secondary/80;
+  @apply font-semibold;
+}
+
+.btn-primary {
+  @apply bg-primary text-background;
+  @apply focus:ring-primary;
+  @apply shadow-md hover:shadow-primary/20;
+}
+
+.isDisabled {
+  color: currentColor;
+  cursor: not-allowed;
+  opacity: 0.5;
+  text-decoration: none;
+  pointer-events: none;
+}
+
+.font-outline {
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: var(--text);
+  color: transparent;
+}
+
+.check-circle {
+  background-image: url("assets/icons/check-circle.svg");
+  background-position: 0em 0.2em;
+  background-repeat: no-repeat;
+}
+
+/* Glass effect for cards */
+@utility glass-card {
+  @apply border border-white/20 bg-white/10 backdrop-blur-md;
+  @apply dark:border-white/10 dark:bg-black/10;
+  @apply rounded-xl shadow-xl;
+}
+
+/* Modern section styling */
+section {
+  @apply px-4 py-16;
+  @apply transition-all duration-300;
+}
+
+body {
+  @apply bg-gradient-to-r from-primary/10 to-accent/10;
+}
+/* Enhanced hero section */
+#hero {
+  @apply relative overflow-hidden;
+  /*@apply before:absolute before:inset-0 before:bg-gradient-to-r before:from-primary/10 before:to-accent/10;*/
+}
+
+/* Modern feature cards */
+.feature-card {
+  @apply glass-card p-6;
+  @apply transform transition-all duration-300;
+  @apply hover:scale-105 hover:shadow-2xl;
+}
+
+/* technics from https://iconify.design/docs/usage/css/ */
+.svg-mask {
+  /* Add dimensions to span */
+  display: inline-block;
+  /* width: 32px;
+  height: 32px; */
+  /* Add background color */
+  background-color: currentColor;
+  /* Add mask image, use variable to reduce duplication */
+  --svg: url("https://api.iconify.design/bi/bell-fill.svg");
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.svg-cdevents {
+  /* width: 444px;
+  height: 184px; */
+  --svg: url("./assets/logos/cdevents_monochrome.svg");
+}
+/* } */
+
+/* New animations */
+@keyframes float {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+.float-animation {
+  animation: float 6s ease-in-out infinite;
+}
+
+/* Enhanced scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-background;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply rounded-full bg-primary/50;
+  @apply hover:bg-primary;
+}

cdviz-site/landingpage/src/tailwind.config.cjs

@@ -0,0 +1,11 @@
+const { addDynamicIconSelectors } = require("@iconify/tailwind");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  plugins: [
+    // https://iconify.design/docs/usage/css/tailwind/#installation
+    // Iconify plugin, requires writing list of icon sets to load
+    // addIconSelectors(["simple-icons" /*, 'logos'*/]),
+    addDynamicIconSelectors(),
+  ],
+};