feature(public,docs): new public website and docs

2024-11-13 21:15:46 +01:00
parent fc2a019e1d
commit a022cb4831
234 changed files with 9341 additions and 6154 deletions
--- a/apps/public/app/global.css
+++ b/apps/public/app/global.css
@@ -0,0 +1,200 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --green: 156 71% 67%;
+    --red: 351 89% 72%;
+    --background: 0 0% 98%;
+    --background-light: 0 0% 100%;
+    --background-dark: 0 0% 96%;
+    --foreground: 0 0% 9%;
+    --foreground-dark: 0 0% 7.5%;
+    --foreground-light: 0 0% 11%;
+    --card: 0 0% 98%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 98%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 9%;
+    --background-dark: 0 0% 7.5%;
+    --background-light: 0 0% 11%;
+    --foreground: 0 0% 98%;
+    --foreground-light: 0 0% 100%;
+    --foreground-dark: 0 0% 96%;
+    --card: 0 0% 9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply !bg-[hsl(var(--background))] text-foreground font-sans text-base antialiased flex flex-col min-h-screen;
+  }
+}
+
+@layer components {
+  .container {
+    @apply max-w-6xl mx-auto px-6 md:px-10 lg:px-14 w-full;
+  }
+
+  .pulled {
+    @apply -mx-2 md:-mx-6 lg:-mx-10 xl:-mx-20;
+  }
+
+  .row {
+    @apply flex flex-row;
+  }
+
+  .col {
+    @apply flex flex-col;
+  }
+
+  .center-center {
+    @apply flex items-center justify-center text-center;
+  }
+}
+
+strong {
+  @apply font-semibold;
+}
+
+
+.radial-gradient {
+  background: #BECCDF;
+  background: radial-gradient(at bottom, hsl(var(--background-light)), hsl(var(--background)));
+}
+
+.radial-gradient-dot-1 {
+  background: #BECCDF;
+  background: radial-gradient(at 50% 20%, hsl(var(--background-light)), transparent);
+}
+
+.radial-gradient-dot-pages {
+  background: #BECCDF;
+  background: radial-gradient(at 50% 50%, hsl(var(--background)), hsl(var(--background)/0.2));
+}
+
+.animated-iframe-gradient {
+  position: relative;
+  overflow: hidden;
+  background: transparent;
+}
+
+.animated-iframe-gradient:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1600px;
+  height: 1600px;
+  background: linear-gradient(250deg, hsl(var(--foreground)/0.9), transparent);
+  
+  animation: GradientRotate 8s linear infinite;
+}
+@keyframes GradientRotate {
+  0% { transform: translate(-50%, -50%) rotate(0deg); }
+  100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+.line-before {
+  position: relative;
+  padding: 16px;
+}
+.line-before:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(4px*-32);
+  bottom: calc(4px*-32);
+  left: 0;
+  width: 1px;
+  background: hsl(var(--foreground)/0.1);
+}
+.line-after {
+  position: relative;
+  padding: 16px;
+}
+.line-after:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(4px*-32);
+  bottom: calc(4px*-32);
+  right: 0;
+  width: 1px;
+  background: hsl(var(--foreground)/0.1);
+}
+
+.animate-fade-up {
+  animation: animateFadeUp 0.5s ease-in-out;
+  animation-fill-mode: both; 
+}
+
+@keyframes animateFadeUp {
+  0% { transform: translateY(0.5rem); scale: 0.95; }
+  100% { transform: translateY(0); scale: 1; }
+}
+
+.animate-fade-down {
+  animation: animateFadeDown 0.5s ease-in-out;
+  animation-fill-mode: both;
+}
+
+@keyframes animateFadeDown {
+  0% { transform: translateY(-1rem); }
+  100% { transform: translateY(0); }
+}
+
+/* Docs */
+
+h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
+  font-size: inherit !important;
+}