odoro 0.3.4 → 1.0.1

package/templates/react-ts/_variantes/sans-libs/src/styles.css

@@ -1,18 +1,23 @@
 /* Styles de l'application.
 
    Les bibliotheques Odoro n'ont pas ete retenues a la creation : il n'y a donc
-   ni jetons ni classes utilitaires, et cette feuille porte tout. C'est du CSS
-   ordinaire, a remplacer par ce que vous voulez.
+   ni jetons ni classes utilitaires, et cette feuille porte tout. Le dessin est
+   celui de la version complete — meme typographie, memes cartes, meme teinte
+   de marque — en CSS ordinaire.
+
+   Une seule variable commande la couleur : `--marque`. La changer repeint le
+   signe, les accents et les boutons d'un seul coup.
 
    Pour passer aux jetons plus tard : `npm i @odoro-cli/libs`, puis importer
    `@odoro-cli/libs/styles.css` dans `main.tsx` avant cette feuille. */
 
 :root {
+  --marque: #f97316;
   --fond: #ffffff;
   --encre: #18181b;
   --doux: #71717a;
   --filet: #e4e4e7;
-  --accent: #4f46e5;
+  --surface: #fafafa;
   color-scheme: light dark;
 }
 
@@ -25,7 +30,7 @@
     --encre: #fafafa;
     --doux: #a1a1aa;
     --filet: #27272a;
-    --accent: #818cf8;
+    --surface: #18181b;
   }
 }
 
@@ -37,102 +42,379 @@ body {
   margin: 0;
   background: var(--fond);
   color: var(--encre);
-  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
   line-height: 1.6;
 }
 
+code,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
 .app-shell {
   min-height: 100dvh;
   display: grid;
   grid-template-rows: auto 1fr auto;
 }
 
-.nav,
-.pied {
-  padding: 1rem 1.5rem;
+/* ----- Marque ------------------------------------------------------------- */
+
+.marque {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.marque-signe {
+  color: var(--marque);
+  display: inline-flex;
+}
+
+.signe {
+  width: 1.15em;
+  height: 1.15em;
 }
 
+/* ----- Coquille ----------------------------------------------------------- */
+
 .nav {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem 1.5rem;
   border-bottom: 1px solid var(--filet);
+  background: color-mix(in oklab, var(--fond) 75%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.nav-lien,
+.lien-discret {
+  margin-left: auto;
+  color: var(--doux);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+
+.nav-lien:hover,
+.lien-discret:hover {
+  color: var(--marque);
+}
+
+.principal {
+  position: relative;
 }
 
 .pied {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 2rem 1.5rem;
   border-top: 1px solid var(--filet);
   color: var(--doux);
   font-size: 0.875rem;
 }
 
-.marque {
-  font-weight: 600;
-  color: var(--accent);
+/* ----- Fond decoratif ----------------------------------------------------- */
+
+.fond {
+  position: absolute;
+  inset-inline: 0;
+  top: 0;
+  height: 42rem;
+  overflow: hidden;
+  pointer-events: none;
 }
 
-.contenu {
+.fond-nappe {
+  position: absolute;
+  border-radius: 9999px;
+  filter: blur(64px);
+}
+
+.fond-nappe-haute {
+  left: 50%;
+  top: -18rem;
+  width: 46rem;
+  height: 46rem;
+  transform: translateX(-50%);
+  opacity: 0.3;
+  background: radial-gradient(closest-side, var(--marque), transparent);
+}
+
+.fond-nappe-droite {
+  right: -10rem;
+  top: 6rem;
+  width: 30rem;
+  height: 30rem;
+  opacity: 0.18;
+  background: radial-gradient(closest-side, var(--marque), transparent);
+}
+
+/* ----- Mise en page ------------------------------------------------------- */
+
+.contenu,
+.contenu-etroit {
   width: 100%;
-  max-width: 48rem;
   margin: 0 auto;
-  padding: 3rem 1.5rem;
+  position: relative;
 }
 
-h1 {
-  font-size: 2.25rem;
-  letter-spacing: -0.02em;
-  margin: 0;
+.contenu {
+  max-width: 64rem;
 }
 
-.chapeau {
-  color: var(--doux);
+.contenu-etroit {
+  max-width: 48rem;
+  text-align: center;
+}
+
+.hero {
+  padding: 6rem 1.5rem 5rem;
+}
+
+.section {
+  padding: 5rem 1.5rem;
+  border-top: 1px solid var(--filet);
+}
+
+.section-centre {
+  padding: 6rem 1.5rem;
+}
+
+/* ----- Hero --------------------------------------------------------------- */
+
+.pastille-marque {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in oklab, var(--marque) 30%, transparent);
+  background: color-mix(in oklab, var(--marque) 10%, transparent);
+  color: var(--marque);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.hero-titre {
+  margin: 1.5rem 0 0;
+  max-width: 46rem;
+  font-size: clamp(2.5rem, 6vw, 3.75rem);
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+}
+
+.accent {
+  color: var(--marque);
+}
+
+.hero-chapeau {
+  margin: 1.25rem 0 0;
+  max-width: 36rem;
   font-size: 1.125rem;
-  max-width: 60ch;
+  color: var(--doux);
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 2rem;
+}
+
+.faits {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+.fait {
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--filet);
+  color: var(--doux);
+  font-size: 0.75rem;
+}
+
+.hero-fenetre {
+  margin-top: 3.5rem;
+}
+
+/* ----- Fenetre du produit ------------------------------------------------- */
+
+.fenetre {
+  overflow: hidden;
+  border-radius: 1rem;
+  border: 1px solid var(--filet);
+  background: var(--surface);
+  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}
+
+.fenetre-barre {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  border-bottom: 1px solid var(--filet);
+}
+
+.fenetre-pastilles {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.fenetre-pastilles span {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  background: var(--filet);
 }
 
-code {
+.fenetre-chemin {
+  margin-left: 0.5rem;
+  color: var(--doux);
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.9em;
+  font-size: 0.75rem;
+}
+
+.fenetre-code {
+  margin: 0;
+  padding: 1.25rem;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  line-height: 1.7;
+  color: var(--doux);
+}
+
+/* ----- Cartes ------------------------------------------------------------- */
+
+.sur-titre {
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--doux);
 }
 
 .grille {
   display: grid;
   gap: 1rem;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
-  margin: 3rem 0;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  margin-top: 2rem;
 }
 
 .carte {
   border: 1px solid var(--filet);
-  border-radius: 0.5rem;
-  padding: 1.25rem;
+  border-radius: 0.75rem;
+  background: var(--surface);
+  padding: 1.5rem;
 }
 
-.carte h2 {
-  font-size: 1rem;
-  margin: 0;
+.carte-numero {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.75rem;
+  color: var(--marque);
+}
+
+.carte h3 {
+  margin: 0.75rem 0 0;
+  font-size: 1.125rem;
+  letter-spacing: -0.01em;
 }
 
 .carte p {
-  color: var(--doux);
-  font-size: 0.875rem;
   margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  color: var(--doux);
+}
+
+/* ----- Cloture ------------------------------------------------------------ */
+
+.cloture-titre {
+  margin: 0;
+  font-size: clamp(1.75rem, 4vw, 2.25rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.cloture-chapeau {
+  margin: 1rem auto 0;
+  max-width: 40rem;
+  color: var(--doux);
 }
 
-.ligne {
+.commande {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
+  max-width: 28rem;
+  margin: 2rem auto 0;
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+  border: 1px solid var(--filet);
+  border-radius: 0.75rem;
+  background: var(--surface);
+}
+
+.commande code {
+  flex: 1;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+.lien-discret {
+  display: inline-block;
+  margin: 1.5rem auto 0;
 }
 
+/* ----- Boutons ------------------------------------------------------------ */
+
 .bouton {
-  background: var(--accent);
-  color: var(--fond);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding: 0 1rem;
   border: 0;
   border-radius: 0.5rem;
-  padding: 0.5rem 1rem;
   font: inherit;
+  font-size: 0.9375rem;
   font-weight: 500;
+  text-decoration: none;
   cursor: pointer;
 }
 
-.compteur {
-  font-size: 1.125rem;
-  font-variant-numeric: tabular-nums;
+.bouton-primaire {
+  background: var(--marque);
+  color: #ffffff;
+}
+
+.bouton-primaire:hover {
+  background: color-mix(in oklab, var(--marque) 85%, black);
+}
+
+.bouton-secondaire {
+  background: var(--surface);
+  color: var(--encre);
+  border: 1px solid var(--filet);
+}
+
+.bouton-fantome {
+  height: 2rem;
+  padding: 0 0.75rem;
+  background: transparent;
+  color: var(--encre);
+  font-size: 0.875rem;
+}
+
+.bouton-fantome:hover {
+  background: var(--filet);
 }

package/templates/react-ts/_variantes/sans-routeur/src/App.tsx

@@ -1,92 +1,50 @@
-import { useState } from 'react'
+import type { ReactElement } from 'react'
 
-import { Reveal, Stagger, useAnimate } from '@odoro-cli/libs/motion'
-import { Button } from '@odoro-cli/libs/ui'
-
-/** Trois arguments mis en avant. */
-const FEATURES = [
-  {
-    title: 'Animations',
-    body: "Une couche mince sur le moteur du navigateur. Les animations reduites sont respectees d'office.",
-  },
-  {
-    title: 'Styles',
-    body: 'Des tokens en source de verite, une feuille statique, aucun scan a l execution.',
-  },
-  {
-    title: 'Interface',
-    body: 'Des composants qui lisent les memes tokens que votre code : les rethemer suffit.',
-  },
-]
+import { Marque } from '@/composants/Marque'
+import { Cloture } from '@/sections/Cloture'
+import { Fond } from '@/sections/Fond'
+import { Hero } from '@/sections/Hero'
+import { Piliers } from '@/sections/Piliers'
 
 /**
  * Racine de l'application.
  *
- * Une seule page : le routeur n'a pas ete retenu a la creation. Pour en
- * ajouter un plus tard, `@odoro-cli/libs/router` est deja installe — il vient
- * avec les bibliotheques.
+ * Une seule page : le routeur n'a pas ete retenu a la creation. Les sections
+ * sont les memes que dans la version routee — meme dessin, memes fichiers — et
+ * seul leur assemblage change.
+ *
+ * Pour ajouter un routeur plus tard, `@odoro-cli/libs/router` est deja
+ * installe : il vient avec les bibliotheques.
  */
-export function App() {
-  const [ref, controls] = useAnimate<HTMLSpanElement>()
-  const [count, setCount] = useState(0)
-
+export function App(): ReactElement {
   return (
     <div className="app-shell">
-      <nav className="o-flex o-items-center o-gap-4 o-px-6 o-py-4 o-border-b o-border-zinc-200 dark:o-border-zinc-800">
-        <span className="o-font-semibold o-text-brand-600 dark:o-text-brand-400">
-          Odoro
-        </span>
-      </nav>
-
-      <main className="o-mx-auto o-w-full o-max-w-3xl o-px-6 o-py-12 o-flex o-flex-col o-gap-12">
-        <Reveal>
-          <h1 className="o-text-4xl o-font-bold o-tracking-tight">
-            Un point de depart maitrise.
-          </h1>
-          <p className="o-mt-4 o-text-lg o-text-zinc-500 dark:o-text-zinc-400 o-max-w-prose">
-            Ce projet a ete genere par <code className="o-font-mono">odoro create</code>.
-            Le moteur d animation et le systeme de style viennent de la meme librairie.
-          </p>
-        </Reveal>
-
-        <Stagger step={80} className="o-grid o-grid-cols-1 md:o-grid-cols-3 o-gap-4">
-          {FEATURES.map((feature) => (
-            <article
-              key={feature.title}
-              className="o-rounded-lg o-border-w-1 o-border-zinc-200 dark:o-border-zinc-800 o-bg-white dark:o-bg-zinc-900 o-p-5"
-            >
-              <h2 className="o-font-semibold">{feature.title}</h2>
-              <p className="o-mt-2 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
-                {feature.body}
-              </p>
-            </article>
-          ))}
-        </Stagger>
-
-        <div className="o-flex o-items-center o-gap-4">
-          <Button
-            onClick={() => {
-              setCount((value) => value + 1)
-              void controls.play(
-                [
-                  { transform: 'translateY(0)' },
-                  { transform: 'translateY(-0.4rem)' },
-                  { transform: 'translateY(0)' },
-                ],
-                { duration: 'fast', easing: 'emphasized' },
-              )
-            }}
+      <nav className="o-sticky o-top-0 o-z-20 o-border-b o-border-zinc-200/70 dark:o-border-zinc-800/70 o-bg-white/70 dark:o-bg-zinc-950/70 o-backdrop-blur">
+        <div className="o-mx-auto o-flex o-w-full o-max-w-5xl o-items-center o-px-6 o-py-4">
+          <Marque />
+          <a
+            href="https://odoro.dev"
+            target="_blank"
+            rel="noreferrer"
+            className="o-ml-auto o-text-sm o-text-zinc-500 dark:o-text-zinc-400 o-no-underline hover:o-text-brand-500"
           >
-            Compter
-          </Button>
-          <span ref={ref} className="o-inline-block o-text-lg o-tabular-nums">
-            {count}
-          </span>
+            odoro.dev
+          </a>
         </div>
+      </nav>
+
+      <main className="o-relative">
+        <Fond />
+        <Hero />
+        <Piliers />
+        <Cloture />
       </main>
 
-      <footer className="o-px-6 o-py-6 o-text-sm o-text-zinc-500 dark:o-text-zinc-400 o-border-t o-border-zinc-200 dark:o-border-zinc-800">
-        Construit avec Odoro.
+      <footer className="o-border-t o-border-zinc-200 dark:o-border-zinc-800 o-px-6 o-py-8">
+        <div className="o-mx-auto o-flex o-w-full o-max-w-5xl o-items-center o-justify-between o-gap-4 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
+          <Marque />
+          <span>Construit avec Odoro.</span>
+        </div>
       </footer>
     </div>
   )

package/templates/react-ts/src/App.tsx

@@ -1,57 +1,84 @@
 import { Link, Outlet, Route, Router, Routes, useLocation } from '@odoro-cli/libs/router'
+import type { ReactElement } from 'react'
 
+import { Marque } from '@/composants/Marque'
 import { About } from '@/routes/About'
 import { Home } from '@/routes/Home'
 import { NotFound } from '@/routes/NotFound'
 
-/** Barre de navigation, avec mise en valeur de la route courante. */
-function Nav() {
-  const { pathname } = useLocation()
+/** Les entrees de la navigation. */
+const LIENS = [
+  { to: '/', label: 'Accueil' },
+  { to: '/a-propos', label: 'A propos' },
+]
 
-  const links = [
-    { to: '/', label: 'Accueil' },
-    { to: '/a-propos', label: 'A propos' },
-  ]
+/**
+ * La barre de navigation.
+ *
+ * Elle flotte sur le fond plutot que de le couper : un filet clair et un flou
+ * d'arriere-plan suffisent a la detacher, et la nappe de couleur continue de
+ * passer dessous.
+ */
+function Nav(): ReactElement {
+  const { pathname } = useLocation()
 
   return (
-    <nav className="o-flex o-items-center o-gap-4 o-px-6 o-py-4 o-border-b o-border-zinc-200 dark:o-border-zinc-800">
-      <span className="o-font-semibold o-text-brand-600 dark:o-text-brand-400">
-        Odoro
-      </span>
-      {links.map((link) => (
-        <Link
-          key={link.to}
-          to={link.to}
-          className={
-            pathname === link.to
-              ? 'o-text-zinc-900 dark:o-text-zinc-50 o-font-medium o-no-underline'
-              : 'o-text-zinc-500 dark:o-text-zinc-400 o-no-underline hover:o-text-zinc-900 dark:hover:o-text-zinc-50 o-transition'
-          }
-        >
-          {link.label}
+    <nav className="o-sticky o-top-0 o-z-20 o-border-b o-border-zinc-200/70 dark:o-border-zinc-800/70 o-bg-white/70 dark:o-bg-zinc-950/70 o-backdrop-blur">
+      <div className="o-mx-auto o-flex o-w-full o-max-w-5xl o-items-center o-gap-6 o-px-6 o-py-4">
+        <Link to="/" className="o-no-underline o-text-zinc-900 dark:o-text-zinc-50">
+          <Marque />
         </Link>
-      ))}
+
+        <div className="o-flex o-items-center o-gap-5 o-text-sm">
+          {LIENS.map((lien) => (
+            <Link
+              key={lien.to}
+              to={lien.to}
+              className={
+                pathname === lien.to
+                  ? 'o-font-medium o-text-zinc-900 dark:o-text-zinc-50 o-no-underline'
+                  : 'o-text-zinc-500 dark:o-text-zinc-400 o-no-underline hover:o-text-zinc-900 dark:hover:o-text-zinc-50 o-transition'
+              }
+            >
+              {lien.label}
+            </Link>
+          ))}
+        </div>
+
+        <a
+          href="https://odoro.dev"
+          target="_blank"
+          rel="noreferrer"
+          className="o-ml-auto o-text-sm o-text-zinc-500 dark:o-text-zinc-400 o-no-underline hover:o-text-brand-500"
+        >
+          odoro.dev
+        </a>
+      </div>
     </nav>
   )
 }
 
-/** Enveloppe commune a toutes les pages. */
-function Layout() {
+/** L'enveloppe commune a toutes les pages. */
+function Layout(): ReactElement {
   return (
     <div className="app-shell">
       <Nav />
-      <main className="o-view-transition-page o-mx-auto o-w-full o-max-w-3xl o-px-6 o-py-12">
+      {/* `relative` porte le fond decoratif, qui se place en absolu dedans. */}
+      <main className="o-relative o-view-transition-page">
         <Outlet />
       </main>
-      <footer className="o-px-6 o-py-6 o-text-sm o-text-zinc-500 dark:o-text-zinc-400 o-border-t o-border-zinc-200 dark:o-border-zinc-800">
-        Construit avec Odoro.
+      <footer className="o-border-t o-border-zinc-200 dark:o-border-zinc-800 o-px-6 o-py-8">
+        <div className="o-mx-auto o-flex o-w-full o-max-w-5xl o-items-center o-justify-between o-gap-4 o-text-sm o-text-zinc-500 dark:o-text-zinc-400">
+          <Marque />
+          <span>Construit avec Odoro.</span>
+        </div>
       </footer>
     </div>
   )
 }
 
 /** Racine de l'application. */
-export function App() {
+export function App(): ReactElement {
   return (
     <Router>
       <Routes>