feat: add tailwindcss utilities

pkg/nebula/assets/css/styles.css

@@ -759,6 +759,10 @@ select{
   position: relative;
 }
 
+.bottom-0{
+  bottom: 0px;
+}
+
 .left-0{
   left: 0px;
 }
@@ -767,6 +771,10 @@ select{
   left: 50%;
 }
 
+.left-full{
+  left: 100%;
+}
+
 .right-0{
   right: 0px;
 }
@@ -799,11 +807,37 @@ select{
   z-index: 50;
 }
 
+.order-first{
+  order: -9999;
+}
+
+.-m-2{
+  margin: -0.5rem;
+}
+
+.m-2{
+  margin: 0.5rem;
+}
+
+.-mx-6{
+  margin-left: -1.5rem;
+  margin-right: -1.5rem;
+}
+
+.mx-6{
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
 }
 
+.-mr-20{
+  margin-right: -5rem;
+}
+
 .mb-1{
   margin-bottom: 0.25rem;
 }
@@ -840,6 +874,14 @@ select{
   margin-right: 0.25rem;
 }
 
+.mr-2{
+  margin-right: 0.5rem;
+}
+
+.mr-3{
+  margin-right: 0.75rem;
+}
+
 .mr-4{
   margin-right: 1rem;
 }
@@ -860,6 +902,10 @@ select{
   margin-top: 0.5rem;
 }
 
+.mt-24{
+  margin-top: 6rem;
+}
+
 .mt-4{
   margin-top: 1rem;
 }
@@ -872,6 +918,10 @@ select{
   margin-top: 1.5rem;
 }
 
+.box-content{
+  box-sizing: content-box;
+}
+
 .block{
   display: block;
 }
@@ -900,6 +950,10 @@ select{
   display: inline-grid;
 }
 
+.hidden{
+  display: none;
+}
+
 .h-10{
   height: 2.5rem;
 }
@@ -936,6 +990,10 @@ select{
   height: 2.25rem;
 }
 
+.h-\[280px\]{
+  height: 280px;
+}
+
 .h-auto{
   height: auto;
 }
@@ -984,6 +1042,10 @@ select{
   width: 2rem;
 }
 
+.w-\[22rem\]{
+  width: 22rem;
+}
+
 .w-\[365px\]{
   width: 365px;
 }
@@ -1029,10 +1091,22 @@ select{
   max-width: 64rem;
 }
 
+.max-w-6xl{
+  max-width: 72rem;
+}
+
+.max-w-\[94rem\]{
+  max-width: 94rem;
+}
+
 .max-w-lg{
   max-width: 32rem;
 }
 
+.max-w-md{
+  max-width: 28rem;
+}
+
 .max-w-screen-sm{
   max-width: 640px;
 }
@@ -1077,11 +1151,46 @@ select{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-x-8{
+  --tw-translate-x: -2rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-\[70\%\]{
+  --tw-translate-x: -70%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-translate-y-0\.5{
   --tw-translate-y: -0.125rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.-translate-y-4{
+  --tw-translate-y: -1rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-0{
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-x-8{
+  --tw-translate-x: 2rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-0{
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-1\/3{
+  --tw-translate-y: 33.333333%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-y-24{
   --tw-translate-y: 6rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1092,11 +1201,53 @@ select{
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-4{
+  --tw-translate-y: 1rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-y-px{
   --tw-translate-y: 1px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-1{
+  --tw-rotate: 1deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform{
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@keyframes infinite-scroll{
+  from{
+    transform: translateX(0);
+  }
+
+  to{
+    transform: translateX(-100%);
+  }
+}
+
+.animate-infinite-scroll{
+  animation: infinite-scroll 60s linear infinite;
+}
+
+@keyframes infinite-scroll-inverse{
+  from{
+    transform: translateX(-100%);
+  }
+
+  to{
+    transform: translateX(0);
+  }
+}
+
+.animate-infinite-scroll-inverse{
+  animation: infinite-scroll-inverse 60s linear infinite;
+}
+
 .cursor-default{
   cursor: default;
 }
@@ -1111,6 +1262,10 @@ select{
           user-select: none;
 }
 
+.grid-cols-2{
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .grid-cols-3{
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -1127,6 +1282,10 @@ select{
   flex-wrap: wrap;
 }
 
+.flex-nowrap{
+  flex-wrap: nowrap;
+}
+
 .items-start{
   align-items: flex-start;
 }
@@ -1163,6 +1322,10 @@ select{
   gap: 0.75rem;
 }
 
+.gap-4{
+  gap: 1rem;
+}
+
 .gap-8{
   gap: 2rem;
 }
@@ -1206,6 +1369,12 @@ select{
   margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
 }
 
+.space-y-12 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1224,6 +1393,12 @@ select{
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]){
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1263,6 +1438,15 @@ select{
   border-radius: 0.375rem;
 }
 
+.rounded-xl{
+  border-radius: 0.75rem;
+}
+
+.rounded-t-lg{
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
 .border{
   border-width: 1px;
 }
@@ -1415,6 +1599,21 @@ select{
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
+.bg-zinc-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
+}
+
+.bg-zinc-50{
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
+.bg-zinc-800{
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+}
+
 .bg-zinc-900{
   --tw-bg-opacity: 1;
   background-color: rgb(24 24 27 / var(--tw-bg-opacity));
@@ -1462,11 +1661,20 @@ select{
   fill: #d4d4d8;
 }
 
+.fill-zinc-400{
+  fill: #a1a1aa;
+}
+
 .object-cover{
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+.object-left{
+  -o-object-position: left;
+     object-position: left;
+}
+
 .p-1{
   padding: 0.25rem;
 }
@@ -1512,6 +1720,11 @@ select{
   padding-right: 1.25rem;
 }
 
+.px-6{
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .px-7{
   padding-left: 1.75rem;
   padding-right: 1.75rem;
@@ -1527,6 +1740,11 @@ select{
   padding-bottom: 0.25rem;
 }
 
+.py-12{
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
 .py-2{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1542,6 +1760,11 @@ select{
   padding-bottom: 1rem;
 }
 
+.py-5{
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
 .py-8{
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -1587,6 +1810,10 @@ select{
   padding-top: 0px;
 }
 
+.pt-12{
+  padding-top: 3rem;
+}
+
 .pt-2{
   padding-top: 0.5rem;
 }
@@ -1595,6 +1822,10 @@ select{
   padding-top: 8rem;
 }
 
+.pt-6{
+  padding-top: 1.5rem;
+}
+
 .pt-8{
   padding-top: 2rem;
 }
@@ -1611,6 +1842,10 @@ select{
   text-align: right;
 }
 
+.align-top{
+  vertical-align: top;
+}
+
 .font-inter{
   font-family: Inter, sans-serif;
 }
@@ -1625,6 +1860,12 @@ select{
   letter-spacing: -0.017em;
 }
 
+.text-3xl{
+  font-size: 2rem;
+  line-height: 1.3125;
+  letter-spacing: -0.017em;
+}
+
 .text-4xl{
   font-size: 2.5rem;
   line-height: 1.25;
@@ -1683,6 +1924,10 @@ select{
   font-style: italic;
 }
 
+.not-italic{
+  font-style: normal;
+}
+
 .tabular-nums{
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
@@ -1798,6 +2043,16 @@ select{
   color: rgb(244 244 245 / var(--tw-text-opacity));
 }
 
+.text-zinc-200{
+  --tw-text-opacity: 1;
+  color: rgb(228 228 231 / var(--tw-text-opacity));
+}
+
+.text-zinc-400{
+  --tw-text-opacity: 1;
+  color: rgb(161 161 170 / var(--tw-text-opacity));
+}
+
 .text-zinc-500{
   --tw-text-opacity: 1;
   color: rgb(113 113 122 / var(--tw-text-opacity));
@@ -1828,20 +2083,48 @@ select{
   -moz-osx-font-smoothing: grayscale;
 }
 
+.opacity-0{
+  opacity: 0;
+}
+
+.opacity-100{
+  opacity: 1;
+}
+
 .opacity-50{
   opacity: 0.5;
 }
 
+.opacity-60{
+  opacity: 0.6;
+}
+
 .opacity-70{
   opacity: 0.7;
 }
 
+.mix-blend-exclusion{
+  mix-blend-mode: exclusion;
+}
+
 .shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-2xl{
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-md{
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm{
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1885,14 +2168,61 @@ select{
   transition-duration: 300ms;
 }
 
+.duration-700{
+  transition-duration: 700ms;
+}
+
+.ease-in-out{
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .ease-out{
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.\[animation-delay\:-7\.5s\]{
+  animation-delay: -7.5s;
+}
+
+.\[background\:linear-gradient\(\#2E2E32\2c \#2E2E32\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.700\)\2c theme\(colors\.zinc\.700\/0\)\2c theme\(colors\.zinc\.700\)\)_border-box\]{
+  background: linear-gradient(#2E2E32,#2E2E32) padding-box,linear-gradient(120deg,#3f3f46,rgb(63 63 70 / 0),#3f3f46) border-box;
+}
+
+.\[background\:linear-gradient\(\#323237\2c \#323237\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.700\)\2c theme\(colors\.zinc\.700\/0\)\2c theme\(colors\.zinc\.700\)\)_border-box\]{
+  background: linear-gradient(#323237,#323237) padding-box,linear-gradient(120deg,#3f3f46,rgb(63 63 70 / 0),#3f3f46) border-box;
+}
+
 .\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.white\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{
   background: linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box;
 }
 
+.\[background\:linear-gradient\(theme\(colors\.white\)\2c theme\(colors\.zinc\.50\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{
+  background: linear-gradient(#fff,#fafafa) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box;
+}
+
+.\[background\:linear-gradient\(theme\(colors\.zinc\.50\)\2c theme\(colors\.zinc\.50\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.300\)\2c theme\(colors\.zinc\.100\)\2c theme\(colors\.zinc\.300\)\)_border-box\]{
+  background: linear-gradient(#fafafa,#fafafa) padding-box,linear-gradient(120deg,#d4d4d8,#f4f4f5,#d4d4d8) border-box;
+}
+
+.\[background\:linear-gradient\(theme\(colors\.zinc\.800\)\2c theme\(colors\.zinc\.800\)\)_padding-box\2c linear-gradient\(120deg\2c theme\(colors\.zinc\.700\)\2c theme\(colors\.zinc\.700\/0\)\2c theme\(colors\.zinc\.700\)\)_border-box\]{
+  background: linear-gradient(#27272a,#27272a) padding-box,linear-gradient(120deg,#3f3f46,rgb(63 63 70 / 0),#3f3f46) border-box;
+}
+
+.\[mask-image\:_linear-gradient\(to_right\2c transparent_0\2c _black_28\%\2c _black_calc\(100\%-28\%\)\2c transparent_100\%\)\]{
+  -webkit-mask-image: linear-gradient(to right,transparent 0, black 28%, black calc(100% - 28%),transparent 100%);
+          mask-image: linear-gradient(to right,transparent 0, black 28%, black calc(100% - 28%),transparent 100%);
+}
+
+.\[mask-image\:linear-gradient\(to_right\2c transparent_8px\2c _theme\(colors\.white\/\.7\)_64px\2c _theme\(colors\.white\)_50\%\2c _theme\(colors\.white\/\.7\)_calc\(100\%-64px\)\2c _transparent_calc\(100\%-8px\)\)\]{
+  -webkit-mask-image: linear-gradient(to right,transparent 8px, rgb(255 255 255 / .7) 64px, #fff 50%, rgb(255 255 255 / .7) calc(100% - 64px), transparent calc(100% - 8px));
+          mask-image: linear-gradient(to right,transparent 8px, rgb(255 255 255 / .7) 64px, #fff 50%, rgb(255 255 255 / .7) calc(100% - 64px), transparent calc(100% - 8px));
+}
+
+.\[mask-image\:linear-gradient\(white_0\%\2c white_calc\(100\%-40px\)\2c _transparent_calc\(100\%-1px\)\)\]{
+  -webkit-mask-image: linear-gradient(white 0%,white calc(100% - 40px), transparent calc(100% - 1px));
+          mask-image: linear-gradient(white 0%,white calc(100% - 40px), transparent calc(100% - 1px));
+}
+
 /* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */
 
 [x-cloak=""] {
@@ -2180,6 +2510,11 @@ input[type="search"]::-webkit-search-results-decoration {
   z-index: -10;
 }
 
+.before\:h-52::before{
+  content: var(--tw-content);
+  height: 13rem;
+}
+
 .before\:h-80::before{
   content: var(--tw-content);
   height: 20rem;
@@ -2190,6 +2525,11 @@ input[type="search"]::-webkit-search-results-decoration {
   height: 24rem;
 }
 
+.before\:w-52::before{
+  content: var(--tw-content);
+  width: 13rem;
+}
+
 .before\:w-96::before{
   content: var(--tw-content);
   width: 24rem;
@@ -2218,6 +2558,11 @@ input[type="search"]::-webkit-search-results-decoration {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.before\:opacity-\[\.08\]::before{
+  content: var(--tw-content);
+  opacity: .08;
+}
+
 .before\:opacity-\[\.15\]::before{
   content: var(--tw-content);
   opacity: .15;
@@ -2229,6 +2574,16 @@ input[type="search"]::-webkit-search-results-decoration {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.before\:content-\[\'\\0022\'\]::before{
+  --tw-content: '\0022';
+  content: var(--tw-content);
+}
+
+.after\:pointer-events-none::after{
+  content: var(--tw-content);
+  pointer-events: none;
+}
+
 .after\:absolute::after{
   content: var(--tw-content);
   position: absolute;
@@ -2239,6 +2594,11 @@ input[type="search"]::-webkit-search-results-decoration {
   right: 0px;
 }
 
+.after\:top-0::after{
+  content: var(--tw-content);
+  top: 0px;
+}
+
 .after\:top-1\/2::after{
   content: var(--tw-content);
   top: 50%;
@@ -2254,6 +2614,16 @@ input[type="search"]::-webkit-search-results-decoration {
   height: 2rem;
 }
 
+.after\:h-full::after{
+  content: var(--tw-content);
+  height: 100%;
+}
+
+.after\:w-96::after{
+  content: var(--tw-content);
+  width: 24rem;
+}
+
 .after\:w-px::after{
   content: var(--tw-content);
   width: 1px;
@@ -2281,6 +2651,23 @@ input[type="search"]::-webkit-search-results-decoration {
   border-color: rgb(212 212 216 / var(--tw-border-opacity));
 }
 
+.after\:bg-gradient-to-l::after{
+  content: var(--tw-content);
+  background-image: linear-gradient(to left, var(--tw-gradient-stops));
+}
+
+.after\:from-zinc-800::after{
+  content: var(--tw-content);
+  --tw-gradient-from: #27272a var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(39 39 42 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.after\:content-\[\'\\0022\'\]::after{
+  --tw-content: '\0022';
+  content: var(--tw-content);
+}
+
 .last\:after\:hidden:last-child::after{
   content: var(--tw-content);
   display: none;
@@ -2416,6 +2803,11 @@ input[type="search"]::-webkit-search-results-decoration {
   color: rgb(161 98 7 / var(--tw-text-opacity));
 }
 
+.hover\:text-zinc-300:hover{
+  --tw-text-opacity: 1;
+  color: rgb(212 212 216 / var(--tw-text-opacity));
+}
+
 .hover\:text-zinc-900:hover{
   --tw-text-opacity: 1;
   color: rgb(24 24 27 / var(--tw-text-opacity));
@@ -2425,6 +2817,10 @@ input[type="search"]::-webkit-search-results-decoration {
   text-decoration-line: underline;
 }
 
+.hover\:opacity-100:hover{
+  opacity: 1;
+}
+
 .focus\:border-neutral-300:focus{
   --tw-border-opacity: 1;
   border-color: rgb(212 212 212 / var(--tw-border-opacity));
@@ -2546,6 +2942,10 @@ input[type="search"]::-webkit-search-results-decoration {
   opacity: 0.5;
 }
 
+.group:hover .group-hover\:\[animation-play-state\:paused\]{
+  animation-play-state: paused;
+}
+
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed{
   cursor: not-allowed;
 }
@@ -2560,6 +2960,23 @@ input[type="search"]::-webkit-search-results-decoration {
   }
 }
 
+@media not all and (min-width: 1024px){
+  .max-lg\:w-32{
+    width: 8rem;
+  }
+
+  .max-lg\:after\:hidden::after{
+    content: var(--tw-content);
+    display: none;
+  }
+}
+
+@media not all and (min-width: 768px){
+  .max-md\:w-\[45\%\]{
+    width: 45%;
+  }
+}
+
 @media not all and (min-width: 640px){
   .max-sm\:order-1{
     order: 1;
@@ -2567,6 +2984,10 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 @media (min-width: 640px){
+  .sm\:col-span-2{
+    grid-column: span 2 / span 2;
+  }
+
   .sm\:col-span-6{
     grid-column: span 6 / span 6;
   }
@@ -2579,6 +3000,10 @@ input[type="search"]::-webkit-search-results-decoration {
     display: inline-flex;
   }
 
+  .sm\:h-auto{
+    height: auto;
+  }
+
   .sm\:max-w-none{
     max-width: none;
   }
@@ -2595,6 +3020,10 @@ input[type="search"]::-webkit-search-results-decoration {
     justify-content: center;
   }
 
+  .sm\:gap-4{
+    gap: 1rem;
+  }
+
   .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]){
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -2607,6 +3036,11 @@ input[type="search"]::-webkit-search-results-decoration {
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
+  .sm\:object-contain{
+    -o-object-fit: contain;
+       object-fit: contain;
+  }
+
   .sm\:px-6{
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -2627,10 +3061,18 @@ input[type="search"]::-webkit-search-results-decoration {
     margin-right: -1.25rem;
   }
 
+  .md\:mb-0{
+    margin-bottom: 0px;
+  }
+
   .md\:max-w-none{
     max-width: none;
   }
 
+  .md\:grid-cols-3{
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
   .md\:grid-cols-4{
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
@@ -2639,6 +3081,10 @@ input[type="search"]::-webkit-search-results-decoration {
     flex-direction: row;
   }
 
+  .md\:justify-start{
+    justify-content: flex-start;
+  }
+
   .md\:gap-0{
     gap: 0px;
   }
@@ -2661,6 +3107,11 @@ input[type="search"]::-webkit-search-results-decoration {
     padding-bottom: 3rem;
   }
 
+  .md\:py-20{
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
   .md\:pb-16{
     padding-bottom: 4rem;
   }
@@ -2669,6 +3120,10 @@ input[type="search"]::-webkit-search-results-decoration {
     padding-bottom: 5rem;
   }
 
+  .md\:pt-20{
+    padding-top: 5rem;
+  }
+
   .md\:pt-40{
     padding-top: 10rem;
   }
@@ -2679,6 +3134,12 @@ input[type="search"]::-webkit-search-results-decoration {
     letter-spacing: -0.017em;
   }
 
+  .md\:text-4xl{
+    font-size: 2.5rem;
+    line-height: 1.25;
+    letter-spacing: -0.017em;
+  }
+
   .md\:text-5xl{
     font-size: 3.25rem;
     line-height: 1.2;
@@ -2700,6 +3161,50 @@ input[type="search"]::-webkit-search-results-decoration {
     grid-column: span 6 / span 6;
   }
 
+  .lg\:mt-32{
+    margin-top: 8rem;
+  }
+
+  .lg\:flex{
+    display: flex;
+  }
+
+  .lg\:min-w-\[524px\]{
+    min-width: 524px;
+  }
+
+  .lg\:max-w-6xl{
+    max-width: 72rem;
+  }
+
+  .lg\:max-w-none{
+    max-width: none;
+  }
+
+  .lg\:grid-cols-3{
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .lg\:gap-16{
+    gap: 4rem;
+  }
+
+  .lg\:gap-8{
+    gap: 2rem;
+  }
+
+  .lg\:space-x-12 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-x-reverse: 0;
+    margin-right: calc(3rem * var(--tw-space-x-reverse));
+    margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+
+  .lg\:space-y-0 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-y-reverse: 0;
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+  }
+
   .lg\:p-24{
     padding: 6rem;
   }
@@ -2728,10 +3233,23 @@ input[type="search"]::-webkit-search-results-decoration {
   }
 }
 
+@media (min-width: 1280px){
+  .xl\:space-x-24 > :not([hidden]) ~ :not([hidden]){
+    --tw-space-x-reverse: 0;
+    margin-right: calc(6rem * var(--tw-space-x-reverse));
+    margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse)));
+  }
+}
+
 .\[\&\:has\(svg\)\]\:pl-11:has(svg){
   padding-left: 2.75rem;
 }
 
+.\[\&\>div\]\:mx-3>div{
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
 .\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div{
   --tw-translate-y: -3px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

pkg/nebula/components/sections/bento.templ

@@ -0,0 +1,197 @@
+package sections
+
+templ Bento() {
+	<!-- Features #2 -->
+	<section>
+		<div class="py-12 md:py-20">
+			<div class="max-w-6xl mx-auto px-4 sm:px-6">
+				<div
+					class="relative max-w-3xl mx-auto text-center pb-12 md:pb-20"
+				>
+					<h2
+						class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4"
+					>
+						AI-powered features and effects
+					</h2>
+					<p class="text-lg text-zinc-500">
+						Whenever you are ready, just hit publish to turn your site
+						sketches into an actual designs. No creating, no skills, no
+						reshaping.
+					</p>
+				</div>
+				<div
+					class="max-w-xs mx-auto sm:max-w-none grid sm:grid-cols-2 md:grid-cols-3 gap-8 sm:gap-4 lg:gap-8"
+				>
+					<article
+						class="sm:col-span-2 flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="M17 9c.6 0 1 .4 1 1v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h6c.6 0 1 .4 1 1s-.4 1-1 1H4v12h12v-6c0-.6.4-1 1-1Zm-.7-6.7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-8 8c-.2.2-.4.3-.7.3-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l8-8Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Truly Collaborative
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Create teams and organize your designs into folders using
+								project specs and insights.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-01.png"
+								width="721"
+								height="280"
+								alt="Feature Post 01"
+							/>
+						</figure>
+					</article>
+					<article
+						class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="m6.035 17.335-4-14c-.2-.8.5-1.5 1.3-1.3l14 4c.9.3 1 1.5.1 1.9l-6.6 2.9-2.8 6.6c-.5.9-1.7.8-2-.1Zm-1.5-12.8 2.7 9.5 1.9-4.4c.1-.2.3-.4.5-.5l4.4-1.9-9.5-2.7Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Advanced AI
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Generate images and explore new ways of presenting your
+								designs with AI.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-02.png"
+								width="342"
+								height="280"
+								alt="Feature Post 02"
+							/>
+						</figure>
+					</article>
+					<article
+						class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="M8.974 16c-.3 0-.7-.2-.9-.5l-2.2-3.7-2.1 2.8c-.3.4-1 .5-1.4.2-.4-.3-.5-1-.2-1.4l3-4c.2-.3.5-.4.9-.4.3 0 .6.2.8.5l2 3.3 3.3-8.1c0-.4.4-.7.8-.7s.8.2.9.6l4 8c.2.5 0 1.1-.4 1.3-.5.2-1.1 0-1.3-.4l-3-6-3.2 7.9c-.2.4-.6.6-1 .6Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Simple Snippets
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Get your scenes inside your projects using simple embed
+								code/snippets.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-03.png"
+								width="342"
+								height="280"
+								alt="Feature Post 03"
+							/>
+						</figure>
+					</article>
+					<article
+						class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="M9.3 11.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM9.3 17.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0ZM2.3 12.7c-.4-.4-.4-1 0-1.4l7-7c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4l-7 7c-.4.4-1 .4-1.4 0Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Precise Activity
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Easily make drag and drop interactions without coding.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-04.png"
+								width="342"
+								height="280"
+								alt="Feature Post 04"
+							/>
+						</figure>
+					</article>
+					<article
+						class="flex flex-col border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg"
+					>
+						<div class="grow flex flex-col p-5 pt-6">
+							<div class="flex items-center space-x-3 mb-1">
+								<svg
+									class="inline-flex fill-zinc-400"
+									xmlns="http://www.w3.org/2000/svg"
+									width="20"
+									height="20"
+								>
+									<path
+										d="M16 2H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h8.667l3.733 2.8A1 1 0 0 0 18 17V4a2 2 0 0 0-2-2Zm0 13-2.4-1.8a1 1 0 0 0-.6-.2H4V4h12v11Z"
+									></path>
+								</svg>
+								<h3 class="font-inter-tight font-semibold text-zinc-900">
+									Real-time Feedback
+								</h3>
+							</div>
+							<p class="grow max-w-md text-sm text-zinc-500">
+								Create tasks, projects, issues and more in just seconds.
+							</p>
+						</div>
+						<figure>
+							<img
+								class="h-[280px] object-cover object-left mx-auto sm:object-contain sm:h-auto"
+								src="./images/feature-post-05.png"
+								width="342"
+								height="280"
+								alt="Feature Post 05"
+							/>
+						</figure>
+					</article>
+				</div>
+			</div>
+		</div>
+	</section>
+}

pkg/nebula/components/sections/cta.templ

@@ -0,0 +1,71 @@
+package sections
+
+templ CTA() {
+	<!-- CTA -->
+	<section>
+		<div class="py-12 md:py-20">
+			<div class="max-w-6xl mx-auto px-4 sm:px-6">
+				<div class="relative max-w-3xl mx-auto text-center pb-12 md:pb-16">
+					<div class="inline-flex items-center justify-center w-20 h-20 bg-white rounded-xl shadow-md mb-8 relative before:absolute before:-top-12 before:w-52 before:h-52 before:bg-zinc-900 before:opacity-[.08] before:rounded-full before:blur-3xl before:-z-10">
+						<a href="index.html">
+							<img src="https://cdn.sonr.id/img/logo-zinc.svg" width="60" height="60" alt="Logo"/>
+						</a>
+					</div>
+					<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4">
+						Start your journey 
+						<em class="relative not-italic inline-flex justify-center items-end">
+							today
+							<svg class="absolute fill-zinc-300 w-[calc(100%+1rem)] -z-10" xmlns="http://www.w3.org/2000/svg" width="120" height="10" viewBox="0 0 120 10" aria-hidden="true" preserveAspectRatio="none">
+								<path d="M118.273 6.09C79.243 4.558 40.297 5.459 1.305 9.034c-1.507.13-1.742-1.521-.199-1.81C39.81-.228 79.647-1.568 118.443 4.2c1.63.233 1.377 1.943-.17 1.89Z"></path>
+							</svg>
+						</em>
+					</h2>
+					<p class="text-lg text-zinc-500 mb-8">Gray removes creative distances by connecting beginners, pros, and every team in between. Are you ready to start your journey?</p>
+					<div class="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4">
+						<div>
+							<a class="btn text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow" href="request-demo.html">Register</a>
+						</div>
+						<div>
+							<a class="btn text-zinc-600 bg-white hover:text-zinc-900 w-full shadow" href="#0">Log in</a>
+						</div>
+					</div>
+				</div>
+				<!-- Clients -->
+				<div class="text-center">
+					<ul class="inline-flex flex-wrap items-center justify-center -m-2 [mask-image:linear-gradient(to_right,transparent_8px,_theme(colors.white/.7)_64px,_theme(colors.white)_50%,_theme(colors.white/.7)_calc(100%-64px),_transparent_calc(100%-8px))]">
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Adobe">
+								<path d="m21.966 31-1.69-4.231h-4.154l3.892-9.037L25.676 31h-3.71Zm-5.082-21H8v21l8.884-21ZM32 10h-8.884L32 31V10Z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Unsplash">
+								<path d="M16.119 9h8.762v6.571h-8.762zM24.881 18.857H32V32H9V18.857h7.119v6.572h8.762z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Google">
+								<path d="M8.407 26.488a13.458 13.458 0 0 1 0-11.98A13.48 13.48 0 0 1 29.63 10.57l-4.012 3.821a7.934 7.934 0 0 0-5.12-1.87 7.986 7.986 0 0 0-7.568 5.473 7.94 7.94 0 0 0-.408 2.504A7.94 7.94 0 0 0 12.93 23a7.986 7.986 0 0 0 7.567 5.472 8.577 8.577 0 0 0 4.566-1.127l4.489 3.459a13.415 13.415 0 0 1-9.055 3.19 13.512 13.512 0 0 1-12.09-7.507Zm25.036-8.444c.664 6.002-1.021 10.188-3.89 12.762l-4.488-3.46a6.581 6.581 0 0 0 2.795-3.78h-7.301v-5.522h12.884Z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="WordPress">
+								<path d="M8.061 20.5c0-1.804.387-3.516 1.077-5.063l5.934 16.257c-4.15-2.016-7.01-6.271-7.01-11.194Zm20.836-.628c0 1.065-.41 2.3-.946 4.021L26.71 28.04l-4.496-13.371c.749-.04 1.424-.119 1.424-.119.67-.079.591-1.064-.08-1.025 0 0-2.014.158-3.315.158-1.222 0-3.276-.158-3.276-.158-.67-.039-.75.986-.079 1.025 0 0 .635.08 1.305.119l1.938 5.31-2.723 8.163-4.53-13.473c.75-.04 1.424-.119 1.424-.119.67-.079.591-1.064-.08-1.025 0 0-2.014.158-3.314.158-.234 0-.509-.005-.801-.015A12.425 12.425 0 0 1 20.5 8.061c3.238 0 6.187 1.238 8.4 3.266-.054-.004-.106-.01-.162-.01-1.221 0-2.088 1.064-2.088 2.207 0 1.025.591 1.893 1.221 2.918.474.828 1.026 1.892 1.026 3.43Zm-8.179 1.716 3.824 10.475c.025.061.056.118.089.171a12.434 12.434 0 0 1-7.645.198l3.732-10.844Zm10.697-7.056a12.378 12.378 0 0 1 1.524 5.968c0 4.589-2.487 8.595-6.185 10.751l3.799-10.985c.71-1.774.946-3.193.946-4.455 0-.458-.03-.883-.084-1.279ZM20.5 6C28.495 6 35 12.504 35 20.5 35 28.495 28.495 35 20.5 35S6 28.495 6 20.5C6 12.504 12.505 6 20.5 6Zm0 28.335c7.628 0 13.835-6.207 13.835-13.835 0-7.629-6.207-13.835-13.835-13.835-7.629 0-13.835 6.206-13.835 13.835 0 7.628 6.206 13.835 13.835 13.835Z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Windows">
+								<path d="m8 11.408 9.808-1.335.004 9.46-9.803.056L8 11.41Zm9.803 9.215.008 9.47-9.803-1.348-.001-8.185 9.796.063Zm1.19-10.725L31.996 8v11.413l-13.005.103V9.898ZM32 20.712l-.003 11.362-13.005-1.835-.018-9.548L32 20.712Z"></path>
+							</svg>
+						</li>
+						<li class="m-2 p-4 relative rounded-lg border border-transparent [background:linear-gradient(theme(colors.zinc.50),theme(colors.zinc.50))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box]">
+							<svg class="fill-zinc-400" xmlns="http://www.w3.org/2000/svg" width="40" height="40" aria-label="Pinterest">
+								<path d="M19.482 6.455c-7.757 0-14.045 6.288-14.045 14.045 0 5.95 3.702 11.032 8.926 13.079-.123-1.112-.233-2.816.05-4.03.254-1.095 1.646-6.98 1.646-6.98s-.42-.842-.42-2.086c0-1.953 1.132-3.41 2.541-3.41 1.198 0 1.777.899 1.777 1.978 0 1.205-.767 3.006-1.163 4.676-.33 1.398.701 2.538 2.08 2.538 2.496 0 4.415-2.632 4.415-6.431 0-3.363-2.416-5.714-5.867-5.714-3.996 0-6.342 2.997-6.342 6.095 0 1.207.466 2.501 1.046 3.205a.42.42 0 0 1 .097.403c-.107.443-.343 1.397-.39 1.592-.061.258-.204.312-.47.188-1.754-.816-2.85-3.38-2.85-5.44 0-4.431 3.218-8.5 9.28-8.5 4.872 0 8.658 3.472 8.658 8.112 0 4.84-3.052 8.736-7.288 8.736-1.423 0-2.761-.74-3.22-1.613l-.874 3.339c-.317 1.22-1.173 2.749-1.746 3.682a14.04 14.04 0 0 0 4.159.626c7.757 0 14.045-6.288 14.045-14.045S27.238 6.455 19.482 6.455Z"></path>
+							</svg>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</section>
+}

pkg/nebula/components/sections/features.templ

@@ -0,0 +1,337 @@
+package sections
+
+templ Features() {
+	<!-- Features #3 -->
+	<section
+		class="relative bg-zinc-800 after:absolute after:top-0 after:right-0 after:h-full after:w-96 after:pointer-events-none after:bg-gradient-to-l after:from-zinc-800 max-lg:after:hidden"
+	>
+		<div class="py-12 md:py-20">
+			<!-- Carousel -->
+			<div class="max-w-xl lg:max-w-6xl mx-auto px-4 sm:px-6">
+				<div
+					class="lg:flex space-y-12 lg:space-y-0 lg:space-x-12 xl:space-x-24"
+					x-data="{ tab: '1' }"
+				>
+					<!-- Content -->
+					<div class="lg:max-w-none lg:min-w-[524px]">
+						<div class="mb-8">
+							<div
+								class="inline-flex text-sm font-medium text-zinc-400 px-4 py-0.5 border border-transparent [background:linear-gradient(theme(colors.zinc.800),theme(colors.zinc.800))_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] rounded-full mb-4"
+							>
+								Scale Your Team
+							</div>
+							<h3
+								class="font-inter-tight text-3xl font-bold text-zinc-200 mb-4"
+							>
+								Design-powered workflows for teams of any size
+							</h3>
+							<p class="text-lg text-zinc-500">
+								Gray can understand what you are designing, learn from
+								your feedback to take your creativity further, and turn it
+								instantly into beautiful images.
+							</p>
+						</div>
+						<!-- Tabs buttons -->
+						<div class="mb-8 md:mb-0 space-y-2">
+							<button
+								:class="tab !== '1' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
+								class="text-left flex items-center px-6 py-4 rounded border border-transparent"
+								@click.prevent="tab = '1'"
+							>
+								<svg
+									class="shrink-0 fill-zinc-400 mr-3"
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+								>
+									<path
+										d="m7.951 14.537 6.296-7.196 1.506 1.318-7.704 8.804-3.756-3.756 1.414-1.414 2.244 2.244Zm11.296-7.196 1.506 1.318-7.704 8.804-1.756-1.756 1.414-1.414.244.244 6.296-7.196Z"
+									></path>
+								</svg>
+								<div>
+									<div
+										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
+									>
+										Make designs feel real
+									</div>
+									<div class="text-zinc-500">
+										Save time and keep things consistent with reusable
+										images, and 3D assets in shared libraries.
+									</div>
+								</div>
+							</button>
+							<button
+								:class="tab !== '2' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
+								class="text-left flex items-center px-6 py-4 rounded border border-transparent"
+								@click.prevent="tab = '2'"
+							>
+								<svg
+									class="shrink-0 fill-zinc-400 mr-3"
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+								>
+									<path
+										d="m16.997 19.056-1.78-.912A13.91 13.91 0 0 0 16.75 11.8c0-2.206-.526-4.38-1.533-6.344l1.78-.912A15.91 15.91 0 0 1 18.75 11.8c0 2.524-.602 5.01-1.753 7.256Zm-3.616-1.701-1.77-.93A9.944 9.944 0 0 0 12.75 11.8c0-1.611-.39-3.199-1.14-4.625l1.771-.93c.9 1.714 1.37 3.62 1.369 5.555 0 1.935-.47 3.841-1.369 5.555Zm-3.626-1.693-1.75-.968c.49-.885.746-1.881.745-2.895a5.97 5.97 0 0 0-.745-2.893l1.75-.968a7.968 7.968 0 0 1 .995 3.861 7.97 7.97 0 0 1-.995 3.863Zm-3.673-1.65-1.664-1.11c.217-.325.333-.709.332-1.103 0-.392-.115-.776-.332-1.102L6.082 9.59c.437.655.67 1.425.668 2.21a3.981 3.981 0 0 1-.668 2.212Z"
+									></path>
+								</svg>
+								<div>
+									<div
+										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
+									>
+										Bring creatives closer
+									</div>
+									<div class="text-zinc-500">
+										Save time and keep things consistent with reusable
+										images, and 3D assets in shared libraries.
+									</div>
+								</div>
+							</button>
+							<button
+								:class="tab !== '3' ? '' : '[background:linear-gradient(#2E2E32,#2E2E32)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box]'"
+								class="text-left flex items-center px-6 py-4 rounded border border-transparent"
+								@click.prevent="tab = '3'"
+							>
+								<svg
+									class="shrink-0 fill-zinc-400 mr-3"
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+								>
+									<path
+										d="m11.293 5.293 1.414 1.414-8 8-1.414-1.414 8-8Zm7-1 1.414 1.414-8 8-1.414-1.414 8-8Zm0 6 1.414 1.414-8 8-1.414-1.414 8-8Z"
+									></path>
+								</svg>
+								<div>
+									<div
+										class="font-inter-tight text-lg font-semibold text-zinc-200 mb-1"
+									>
+										Scale and align your design team
+									</div>
+									<div class="text-zinc-500">
+										Save time and keep things consistent with reusable
+										images, and 3D assets in shared libraries.
+									</div>
+								</div>
+							</button>
+						</div>
+					</div>
+					<!-- Tabs items -->
+					<div class="relative lg:max-w-none">
+						<div class="relative flex flex-col">
+							<!-- Item 1 -->
+							<div
+								class="w-full"
+								x-show="tab === '1'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 translate-x-8"
+								x-transition:enter-end="opacity-100 translate-x-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-x-0"
+								x-transition:leave-end="opacity-0 -translate-x-8"
+							>
+								<div>
+									<img
+										class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
+										src="./images/carousel-illustration-01.jpg"
+										width="800"
+										height="620"
+										alt="Carousel 01"
+									/>
+								</div>
+							</div>
+							<!-- Item 2 -->
+							<div
+								class="w-full"
+								x-show="tab === '2'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 translate-x-8"
+								x-transition:enter-end="opacity-100 translate-x-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-x-0"
+								x-transition:leave-end="opacity-0 -translate-x-8"
+							>
+								<div>
+									<img
+										class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
+										src="./images/carousel-illustration-01.jpg"
+										width="800"
+										height="620"
+										alt="Carousel 02"
+									/>
+								</div>
+							</div>
+							<!-- Item 3 -->
+							<div
+								class="w-full"
+								x-show="tab === '3'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 translate-x-8"
+								x-transition:enter-end="opacity-100 translate-x-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-x-0"
+								x-transition:leave-end="opacity-0 -translate-x-8"
+							>
+								<div>
+									<img
+										class="lg:max-w-none mx-auto rounded-lg shadow-2xl"
+										src="./images/carousel-illustration-01.jpg"
+										width="800"
+										height="620"
+										alt="Carousel 03"
+									/>
+								</div>
+							</div>
+						</div>
+						<!-- Gear illustration -->
+						<img
+							class="absolute left-0 bottom-0 -translate-x-1/2 translate-y-1/3 mix-blend-exclusion max-lg:w-32"
+							src="./images/features-illustration.png"
+							alt="Features 02 illustration"
+							width="173"
+							height="167"
+							aria-hidden="true"
+						/>
+					</div>
+				</div>
+			</div>
+			<!-- Features blocks -->
+			<div class="max-w-6xl mx-auto px-4 sm:px-6 mt-24 lg:mt-32">
+				<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-16">
+					<!-- Block #1 -->
+					<div>
+						<div class="flex items-center mb-1">
+							<svg
+								class="fill-zinc-400 mr-2"
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+							>
+								<path
+									d="M15 9a1 1 0 0 1 0 2c-.441 0-1.243.92-1.89 1.716.319 1.005.529 1.284.89 1.284a1 1 0 0 1 0 2 2.524 2.524 0 0 1-2.339-1.545A3.841 3.841 0 0 1 9 16a1 1 0 0 1 0-2c.441 0 1.243-.92 1.89-1.716C10.57 11.279 10.361 11 10 11a1 1 0 0 1 0-2 2.524 2.524 0 0 1 2.339 1.545A3.841 3.841 0 0 1 15 9Zm-5-1H7.51l-.02.142C6.964 11.825 6.367 16 3 16a3 3 0 0 1-3-3 1 1 0 0 1 2 0 1 1 0 0 0 1 1c1.49 0 1.984-2.48 2.49-6H3a1 1 0 1 1 0-2h2.793c.52-3.1 1.4-6 4.207-6a3 3 0 0 1 3 3 1 1 0 0 1-2 0 1 1 0 0 0-1-1C8.808 2 8.257 3.579 7.825 6H10a1 1 0 0 1 0 2Z"
+								></path>
+							</svg>
+							<h3 class="font-inter-tight font-semibold text-zinc-200">
+								Discussions
+							</h3>
+						</div>
+						<p class="text-sm text-zinc-500">
+							Keep workflows efficient with tools that give teams
+							visibility throughout the process.
+						</p>
+					</div>
+					<!-- Block #2 -->
+					<div>
+						<div class="flex items-center mb-1">
+							<svg
+								class="fill-zinc-400 mr-2"
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+							>
+								<path
+									d="M13 16c-.153 0-.306-.035-.447-.105l-3.851-1.926c-.231.02-.465.031-.702.031-4.411 0-8-3.14-8-7s3.589-7 8-7 8 3.14 8 7c0 1.723-.707 3.351-2 4.63V15a1.003 1.003 0 0 1-1 1Zm-4.108-4.054c.155 0 .308.036.447.105L12 13.382v-2.187c0-.288.125-.562.341-.752C13.411 9.506 14 8.284 14 7c0-2.757-2.691-5-6-5S2 4.243 2 7s2.691 5 6 5c.266 0 .526-.02.783-.048a1.01 1.01 0 0 1 .109-.006Z"
+								></path>
+							</svg>
+							<h3 class="font-inter-tight font-semibold text-zinc-200">
+								Team views
+							</h3>
+						</div>
+						<p class="text-sm text-zinc-500">
+							Keep workflows efficient with tools that give teams
+							visibility throughout the process.
+						</p>
+					</div>
+					<!-- Block #3 -->
+					<div>
+						<div class="flex items-center mb-1">
+							<svg
+								class="fill-zinc-400 mr-2"
+								xmlns="http://www.w3.org/2000/svg"
+								width="14"
+								height="16"
+							>
+								<path
+									d="M13 0H1C.4 0 0 .4 0 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1ZM2 2h10v8H8v4H2V2Z"
+								></path>
+							</svg>
+							<h3 class="font-inter-tight font-semibold text-zinc-200">
+								Powerful search
+							</h3>
+						</div>
+						<p class="text-sm text-zinc-500">
+							Keep workflows efficient with tools that give teams
+							visibility throughout the process.
+						</p>
+					</div>
+					<!-- Block #4 -->
+					<div>
+						<div class="flex items-center mb-1">
+							<svg
+								class="fill-zinc-400 mr-2"
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+							>
+								<path
+									d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7ZM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm8.707 12.293a.999.999 0 1 1-1.414 1.414L11.9 13.314a8.019 8.019 0 0 0 1.414-1.414l2.393 2.393Z"
+								></path>
+							</svg>
+							<h3 class="font-inter-tight font-semibold text-zinc-200">
+								Enhancing
+							</h3>
+						</div>
+						<p class="text-sm text-zinc-500">
+							Keep workflows efficient with tools that give teams
+							visibility throughout the process.
+						</p>
+					</div>
+					<!-- Block #5 -->
+					<div>
+						<div class="flex items-center mb-1">
+							<svg
+								class="fill-zinc-400 mr-2"
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+							>
+								<path
+									d="M14.6.085 8 2.885 1.4.085c-.5-.2-1.4-.1-1.4.9v11c0 .4.2.8.6.9l7 3c.3.1.5.1.8 0l7-3c.4-.2.6-.5.6-.9v-11c0-1-.9-1.1-1.4-.9ZM2 2.485l5 2.1v8.8l-5-2.1v-8.8Zm12 8.8-5 2.1v-8.7l5-2.1v8.7Z"
+								></path>
+							</svg>
+							<h3 class="font-inter-tight font-semibold text-zinc-200">
+								Powerful search
+							</h3>
+						</div>
+						<p class="text-sm text-zinc-500">
+							Keep workflows efficient with tools that give teams
+							visibility throughout the process.
+						</p>
+					</div>
+					<!-- Block #6 -->
+					<div>
+						<div class="flex items-center mb-1">
+							<svg
+								class="fill-zinc-400 mr-2"
+								xmlns="http://www.w3.org/2000/svg"
+								width="14"
+								height="16"
+							>
+								<path
+									d="M13 14a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2h12Zm-6.707-2.293-5-5a1 1 0 0 1 1.414-1.414L6 8.586V1a1 1 0 1 1 2 0v7.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0Z"
+								></path>
+							</svg>
+							<h3 class="font-inter-tight font-semibold text-zinc-200">
+								Team views
+							</h3>
+						</div>
+						<p class="text-sm text-zinc-500">
+							Keep workflows efficient with tools that give teams
+							visibility throughout the process.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+}

pkg/nebula/components/sections/footer.templ

@@ -10,8 +10,8 @@ templ FooterMarketingNav() {
 				<div class="sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col">
 					<div class="mb-4">
 						<!-- Logo -->
-						<a class="flex items-center justify-center bg-white w-8 h-8 rounded-full shadow-sm shadow-zinc-950/20" href="/">
-							<img src="https://cdn.sonr.id/logo-zinc.svg" width="24" height="24" alt="Logo"/>
+						<a class="flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20" href="/">
+							<img src="https://cdn.sonr.id/img/logo-zinc.svg" width="24" height="24" alt="Logo"/>
 						</a>
 					</div>
 					<div class="grow text-sm text-zinc-500">&copy; diDAO DUNA. All rights reserved.</div>
@@ -41,26 +41,7 @@ templ FooterMarketingNav() {
 					</ul>
 				</div>
 				<!-- 2nd block -->
-				<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
-					<h6 class="text-sm text-zinc-800 font-medium mb-2">Company</h6>
-					<ul class="text-sm space-y-2">
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">About us</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Diversity & Inclusion</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Blog</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Careers</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Financial statements</a>
-						</li>
-					</ul>
-				</div>
+				<div class="sm:col-span-6 md:col-span-3 lg:col-span-2"></div>
 				<!-- 3rd block -->
 				<div class="sm:col-span-6 md:col-span-3 lg:col-span-2">
 					<h6 class="text-sm text-zinc-800 font-medium mb-2">Resources</h6>
@@ -69,10 +50,10 @@ templ FooterMarketingNav() {
 							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Community</a>
 						</li>
 						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms of service</a>
+							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Documentation</a>
 						</li>
 						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Collaboration features</a>
+							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Privacy policy</a>
 						</li>
 					</ul>
 				</div>
@@ -81,16 +62,13 @@ templ FooterMarketingNav() {
 					<h6 class="text-sm text-zinc-800 font-medium mb-2">Legals</h6>
 					<ul class="text-sm space-y-2">
 						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Refund policy</a>
-						</li>
-						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Terms & Conditions</a>
+							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">About the DAO</a>
 						</li>
 						<li>
 							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Privacy policy</a>
 						</li>
 						<li>
-							<a class="text-zinc-500 hover:text-zinc-900 transition" href="#0">Brand Kit</a>
+							<a class="text-zinc-500 hover:text-zinc-900 transition" href="https://brandfetch.io/sonr.io">Brand Kit</a>
 						</li>
 					</ul>
 				</div>

pkg/nebula/components/sections/footer_templ.go

@@ -29,7 +29,7 @@ func FooterMarketingNav() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site footer --><footer><div class=\"max-w-5xl mx-auto px-4 sm:px-6\"><!-- Top area: Blocks --><div class=\"grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200\"><!-- 1st block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col\"><div class=\"mb-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded-full shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><div class=\"grow text-sm text-zinc-500\">&copy; diDAO DUNA. All rights reserved.</div><!-- Social links --><ul class=\"flex space-x-4 mt-4 mb-1\"><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Twitter\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"m7.063 3 3.495 4.475L14.601 3h2.454l-5.359 5.931L18 17h-4.938l-3.866-4.893L4.771 17H2.316l5.735-6.342L2 3h5.063Zm-.74 1.347H4.866l8.875 11.232h1.36L6.323 4.347Z\"></path></svg></a></li><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Medium\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1.708 3.791-.858.823a.251.251 0 0 0-.1.241V12.9a.251.251 0 0 0 .1.241l.838.823v.181h-4.215v-.181l.868-.843c.085-.085.085-.11.085-.241V7.993L9.6 14.124h-.329l-2.81-6.13V12.1a.567.567 0 0 0 .156.472l1.129 1.37v.181h-3.2v-.181l1.129-1.37a.547.547 0 0 0 .146-.472V7.351A.416.416 0 0 0 5.683 7l-1-1.209V5.61H7.8l2.4 5.283 2.122-5.283h2.971l-.001.181Z\"></path></svg></a></li><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Telegram\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17.968 3.276a.338.338 0 0 0-.232-.253 1.192 1.192 0 0 0-.63.045S3.087 8.106 2.286 8.664c-.172.121-.23.19-.259.272-.138.4.293.573.293.573l3.613 1.177a.388.388 0 0 0 .183-.011c.822-.519 8.27-5.222 8.7-5.38.068-.02.118 0 .1.049-.172.6-6.606 6.319-6.64 6.354a.138.138 0 0 0-.05.118l-.337 3.528s-.142 1.1.956 0a30.66 30.66 0 0 1 1.9-1.738c1.242.858 2.58 1.806 3.156 2.3a1 1 0 0 0 .732.283.825.825 0 0 0 .7-.622S17.894 5.292 17.98 3.909c.008-.135.021-.217.021-.317a1.177 1.177 0 0 0-.032-.316Z\"></path></svg></a></li></ul></div><!-- 2nd block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Company</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">About us</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Diversity & Inclusion</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Blog</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Careers</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Financial statements</a></li></ul></div><!-- 3rd block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Resources</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Community</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Terms of service</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Collaboration features</a></li></ul></div><!-- 4th block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Legals</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Refund policy</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Terms & Conditions</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Privacy policy</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Brand Kit</a></li></ul></div></div></div></footer>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site footer --><footer><div class=\"max-w-5xl mx-auto px-4 sm:px-6\"><!-- Top area: Blocks --><div class=\"grid sm:grid-cols-12 gap-8 py-8 md:py-12 border-t border-zinc-200\"><!-- 1st block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-6 max-sm:order-1 flex flex-col\"><div class=\"mb-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/img/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><div class=\"grow text-sm text-zinc-500\">&copy; diDAO DUNA. All rights reserved.</div><!-- Social links --><ul class=\"flex space-x-4 mt-4 mb-1\"><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Twitter\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"m7.063 3 3.495 4.475L14.601 3h2.454l-5.359 5.931L18 17h-4.938l-3.866-4.893L4.771 17H2.316l5.735-6.342L2 3h5.063Zm-.74 1.347H4.866l8.875 11.232h1.36L6.323 4.347Z\"></path></svg></a></li><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Medium\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17 2H3a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Zm-1.708 3.791-.858.823a.251.251 0 0 0-.1.241V12.9a.251.251 0 0 0 .1.241l.838.823v.181h-4.215v-.181l.868-.843c.085-.085.085-.11.085-.241V7.993L9.6 14.124h-.329l-2.81-6.13V12.1a.567.567 0 0 0 .156.472l1.129 1.37v.181h-3.2v-.181l1.129-1.37a.547.547 0 0 0 .146-.472V7.351A.416.416 0 0 0 5.683 7l-1-1.209V5.61H7.8l2.4 5.283 2.122-5.283h2.971l-.001.181Z\"></path></svg></a></li><li><a class=\"flex justify-center items-center text-zinc-700 hover:text-zinc-900 transition\" href=\"#0\" aria-label=\"Telegram\"><svg class=\"fill-current\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\"><path d=\"M17.968 3.276a.338.338 0 0 0-.232-.253 1.192 1.192 0 0 0-.63.045S3.087 8.106 2.286 8.664c-.172.121-.23.19-.259.272-.138.4.293.573.293.573l3.613 1.177a.388.388 0 0 0 .183-.011c.822-.519 8.27-5.222 8.7-5.38.068-.02.118 0 .1.049-.172.6-6.606 6.319-6.64 6.354a.138.138 0 0 0-.05.118l-.337 3.528s-.142 1.1.956 0a30.66 30.66 0 0 1 1.9-1.738c1.242.858 2.58 1.806 3.156 2.3a1 1 0 0 0 .732.283.825.825 0 0 0 .7-.622S17.894 5.292 17.98 3.909c.008-.135.021-.217.021-.317a1.177 1.177 0 0 0-.032-.316Z\"></path></svg></a></li></ul></div><!-- 2nd block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"></div><!-- 3rd block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Resources</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Community</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Documentation</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Privacy policy</a></li></ul></div><!-- 4th block --><div class=\"sm:col-span-6 md:col-span-3 lg:col-span-2\"><h6 class=\"text-sm text-zinc-800 font-medium mb-2\">Legals</h6><ul class=\"text-sm space-y-2\"><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">About the DAO</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"#0\">Privacy policy</a></li><li><a class=\"text-zinc-500 hover:text-zinc-900 transition\" href=\"https://brandfetch.io/sonr.io\">Brand Kit</a></li></ul></div></div></div></footer>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

pkg/nebula/components/sections/header.templ

@@ -9,8 +9,8 @@ templ HeaderMarketingNav() {
 					<!-- Site branding -->
 					<div class="shrink-0 mr-4">
 						<!-- Logo -->
-						<a class="flex items-center justify-center bg-white w-8 h-8 rounded-full shadow-sm shadow-zinc-950/20" href="/">
-							<img src="https://cdn.sonr.id/logo-zinc.svg" width="24" height="24" alt="Logo"/>
+						<a class="flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20" href="/">
+							<img src="https://cdn.sonr.id/img/logo-zinc.svg" width="24" height="24" alt="Logo"/>
 						</a>
 					</div>
 					<!-- Desktop navigation -->

pkg/nebula/components/sections/header_templ.go

@@ -29,7 +29,7 @@ func HeaderMarketingNav() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded-full shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><a class=\"text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" href=\"/login\">Log in</a></li><li class=\"ml-1\"><a class=\"btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" href=\"/register\">Register</a></li></ul></nav></div></div></div></header>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Site header --><header class=\"absolute top-2 md:top-6 w-full z-30\"><div class=\"px-4 sm:px-6\"><div class=\"max-w-3xl mx-auto\"><div class=\"flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3\"><!-- Site branding --><div class=\"shrink-0 mr-4\"><!-- Logo --><a class=\"flex items-center justify-center bg-white w-8 h-8 rounded shadow-sm shadow-zinc-950/20\" href=\"/\"><img src=\"https://cdn.sonr.id/img/logo-zinc.svg\" width=\"24\" height=\"24\" alt=\"Logo\"></a></div><!-- Desktop navigation --><nav class=\"flex grow\"><!-- Desktop sign in links --><ul class=\"flex grow justify-end flex-wrap items-center\"><li><a class=\"text-sm font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition\" href=\"/login\">Log in</a></li><li class=\"ml-1\"><a class=\"btn-sm text-zinc-100 bg-zinc-900 hover:bg-zinc-800 w-full shadow\" href=\"/register\">Register</a></li></ul></nav></div></div></div></header>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

pkg/nebula/components/sections/hero.templ

@@ -72,6 +72,11 @@ templ stats() {
 				<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(1.5)" x-text="counterValue">0</span>M+</h4>
 				<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
 			</div>
+			<!-- 4th item -->
+			<div class="relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden">
+				<h4 class="font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2"><span x-data="counter(750)" x-text="counterValue">0</span>K</h4>
+				<p class="text-sm text-zinc-500">Assets packed with power beyond your imagination.</p>
+			</div>
 		</div>
 		@counterAnimation()
 	</div>

pkg/nebula/components/sections/hero_templ.go

@@ -236,7 +236,7 @@ func stats() templ.Component {
 			templ_7745c5c3_Var14 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Stats --><div class=\"max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center\"><div class=\"max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none\"><!-- 1st item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(476)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 2nd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.44)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 3rd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.5)\" x-text=\"counterValue\">0</span>M+</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!-- Stats --><div class=\"max-w-4xl mx-auto px-4 sm:px-6 justify-center items-center\"><div class=\"max-w-sm mx-auto grid gap-12 sm:grid-cols-2 md:grid-cols-4 md:-mx-5 md:gap-0 items-end md:max-w-none\"><!-- 1st item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(476)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 2nd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.44)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 3rd item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(1.5)\" x-text=\"counterValue\">0</span>M+</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div><!-- 4th item --><div class=\"relative text-center md:px-5 after:hidden md:after:block after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:w-px after:h-8 after:border-l after:border-zinc-300 after:border-dashed last:after:hidden\"><h4 class=\"font-inter-tight text-2xl md:text-3xl font-bold tabular-nums mb-2\"><span x-data=\"counter(750)\" x-text=\"counterValue\">0</span>K</h4><p class=\"text-sm text-zinc-500\">Assets packed with power beyond your imagination.</p></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}

pkg/nebula/components/sections/highlights.templ

@@ -0,0 +1,251 @@
+package sections
+
+templ Highlights() {
+	<!-- Features -->
+	<section class="relative bg-zinc-50">
+		<div class="py-12 md:py-20">
+			<div class="max-w-6xl mx-auto px-4 sm:px-6">
+				<div class="max-w-3xl mx-auto text-center pb-12">
+					<h2
+						class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-900 mb-4"
+					>
+						Go further than the speed of thought
+					</h2>
+					<p class="text-lg text-zinc-500">
+						AI reads and understands your designs, and with nothing more
+						than a single line of feedback, perform complex actions
+						autonomously.
+					</p>
+				</div>
+				<div x-data="{ tab: '1' }">
+					<!-- Tabs buttons -->
+					<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
+						<button
+							:class="tab !== '1' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
+							class="text-left px-4 py-5 border border-transparent rounded"
+							@click.prevent="tab = '1'"
+						>
+							<div class="flex items-center justify-between mb-1">
+								<div class="font-inter-tight font-semibold text-zinc-900">
+									AI Effects
+								</div>
+								<svg
+									:class="tab !== '1' ? 'hidden' : ''"
+									class="fill-zinc-400 shrink-0 ml-2"
+									xmlns="http://www.w3.org/2000/svg"
+									width="10"
+									height="10"
+								>
+									<path
+										d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
+									></path>
+								</svg>
+							</div>
+							<div class="text-sm text-zinc-500">
+								Visually structure your designs and structure them easily.
+							</div>
+						</button>
+						<button
+							:class="tab !== '2' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
+							class="text-left px-4 py-5 border border-transparent rounded"
+							@click.prevent="tab = '2'"
+						>
+							<div class="flex items-center justify-between mb-1">
+								<div class="font-inter-tight font-semibold text-zinc-900">
+									Creative Mode
+								</div>
+								<svg
+									:class="tab !== '2' ? 'hidden' : ''"
+									class="fill-zinc-400 shrink-0 ml-2"
+									xmlns="http://www.w3.org/2000/svg"
+									width="10"
+									height="10"
+								>
+									<path
+										d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
+									></path>
+								</svg>
+							</div>
+							<div class="text-sm text-zinc-500">
+								Visually structure your designs and structure them easily.
+							</div>
+						</button>
+						<button
+							:class="tab !== '3' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
+							class="text-left px-4 py-5 border border-transparent rounded"
+							@click.prevent="tab = '3'"
+						>
+							<div class="flex items-center justify-between mb-1">
+								<div class="font-inter-tight font-semibold text-zinc-900">
+									Realistic Images
+								</div>
+								<svg
+									:class="tab !== '3' ? 'hidden' : ''"
+									class="fill-zinc-400 shrink-0 ml-2"
+									xmlns="http://www.w3.org/2000/svg"
+									width="10"
+									height="10"
+								>
+									<path
+										d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
+									></path>
+								</svg>
+							</div>
+							<div class="text-sm text-zinc-500">
+								Visually structure your designs and structure them easily.
+							</div>
+						</button>
+						<button
+							:class="tab !== '4' ? 'bg-zinc-100 opacity-60 hover:opacity-100 transition' : '[background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] shadow-sm rotate-1'"
+							class="text-left px-4 py-5 border border-transparent rounded"
+							@click.prevent="tab = '4'"
+						>
+							<div class="flex items-center justify-between mb-1">
+								<div class="font-inter-tight font-semibold text-zinc-900">
+									Powerful Plugins
+								</div>
+								<svg
+									:class="tab !== '4' ? 'hidden' : ''"
+									class="fill-zinc-400 shrink-0 ml-2"
+									xmlns="http://www.w3.org/2000/svg"
+									width="10"
+									height="10"
+								>
+									<path
+										d="M8.667.186H2.675a.999.999 0 0 0 0 1.998h3.581L.971 7.469a.999.999 0 1 0 1.412 1.412l5.285-5.285v3.58a.999.999 0 1 0 1.998 0V1.186a.999.999 0 0 0-.999-.999Z"
+									></path>
+								</svg>
+							</div>
+							<div class="text-sm text-zinc-500">
+								Visually structure your designs and structure them easily.
+							</div>
+						</button>
+					</div>
+					<!-- Tabs items -->
+					<div
+						class="relative lg:max-w-none [mask-image:linear-gradient(white_0%,white_calc(100%-40px),_transparent_calc(100%-1px))] -mx-6"
+					>
+						<div class="relative flex flex-col pt-12 md:pt-20 mx-6">
+							<!-- Item 1 -->
+							<div
+								class="w-full text-center"
+								x-show="tab === '1'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 -translate-y-4"
+								x-transition:enter-end="opacity-100 translate-y-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-y-0"
+								x-transition:leave-end="opacity-0 translate-y-4"
+							>
+								<div class="inline-flex relative align-top">
+									<img
+										class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
+										src="./images/feature-01.png"
+										width="600"
+										height="360"
+										alt="Feature 01"
+									/>
+									<img
+										class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
+										src="./images/feature-illustration.png"
+										width="273"
+										height="288"
+										alt="Illustration"
+										aria-hidden="true"
+									/>
+								</div>
+							</div>
+							<!-- Item 2 -->
+							<div
+								class="w-full text-center"
+								x-show="tab === '2'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 -translate-y-4"
+								x-transition:enter-end="opacity-100 translate-y-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-y-0"
+								x-transition:leave-end="opacity-0 translate-y-4"
+							>
+								<div class="inline-flex relative align-top">
+									<img
+										class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
+										src="./images/feature-01.png"
+										width="600"
+										height="360"
+										alt="Feature 02"
+									/>
+									<img
+										class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
+										src="./images/feature-illustration.png"
+										width="273"
+										height="288"
+										alt="Illustration"
+										aria-hidden="true"
+									/>
+								</div>
+							</div>
+							<!-- Item 3 -->
+							<div
+								class="w-full text-center"
+								x-show="tab === '3'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 -translate-y-4"
+								x-transition:enter-end="opacity-100 translate-y-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-y-0"
+								x-transition:leave-end="opacity-0 translate-y-4"
+							>
+								<div class="inline-flex relative align-top">
+									<img
+										class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
+										src="./images/feature-01.png"
+										width="600"
+										height="360"
+										alt="Feature 03"
+									/>
+									<img
+										class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
+										src="./images/feature-illustration.png"
+										width="273"
+										height="288"
+										alt="Illustration"
+										aria-hidden="true"
+									/>
+								</div>
+							</div>
+							<!-- Item 4 -->
+							<div
+								class="w-full text-center"
+								x-show="tab === '4'"
+								x-transition:enter="transition ease-in-out duration-700 transform order-first"
+								x-transition:enter-start="opacity-0 -translate-y-4"
+								x-transition:enter-end="opacity-100 translate-y-0"
+								x-transition:leave="transition ease-in-out duration-300 transform absolute"
+								x-transition:leave-start="opacity-100 translate-y-0"
+								x-transition:leave-end="opacity-0 translate-y-4"
+							>
+								<div class="inline-flex relative align-top">
+									<img
+										class="rounded-t-lg border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] box-content shadow-2xl"
+										src="./images/feature-01.png"
+										width="600"
+										height="360"
+										alt="Feature 04"
+									/>
+									<img
+										class="absolute top-0 left-full -translate-x-[70%] -mr-20 max-md:w-[45%]"
+										src="./images/feature-illustration.png"
+										width="273"
+										height="288"
+										alt="Illustration"
+										aria-hidden="true"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+}

pkg/nebula/components/sections/testimonials.templ

@@ -0,0 +1,161 @@
+package sections
+
+templ Testimonials() {
+	<section class="bg-zinc-800">
+		<div class="py-12 md:py-20">
+			<div class="max-w-6xl mx-auto px-4 sm:px-6">
+				<div class="max-w-3xl mx-auto text-center pb-12 md:pb-20">
+					<h2 class="font-inter-tight text-3xl md:text-4xl font-bold text-zinc-200">Loved by thousands of creatives from around the world</h2>
+				</div>
+			</div>
+			<div class="max-w-[94rem] mx-auto space-y-6">
+				<!-- Row #1 -->
+				<div
+					x-data="{}"
+					x-init="$nextTick(() => {
+                                let ul = $refs.testimonials;
+                                ul.insertAdjacentHTML('afterend', ul.outerHTML);
+                                ul.nextSibling.setAttribute('aria-hidden', 'true');
+                            })"
+					class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_28%,_black_calc(100%-28%),transparent_100%)] group"
+				>
+					<div x-ref="testimonials" class="flex items-start justify-center md:justify-start [&>div]:mx-3 animate-infinite-scroll group-hover:[animation-play-state:paused]">
+						<!-- Item #1 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-01.jpg" width="44" height="44" alt="Testimonial 01"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Lina James</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">linaj87</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #2 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-02.jpg" width="44" height="44" alt="Testimonial 02"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Sarah Mendes</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">saramendes</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #3 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-03.jpg" width="44" height="44" alt="Testimonial 03"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Michał Rutt</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">michrutt</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #4 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-04.jpg" width="44" height="44" alt="Testimonial 04"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Mary Kahl</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">marykahl</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+					</div>
+				</div>
+				<!-- Row #2 -->
+				<div
+					x-data="{}"
+					x-init="$nextTick(() => {
+                                let ul = $refs.testimonials;
+                                ul.insertAdjacentHTML('afterend', ul.outerHTML);
+                                ul.nextSibling.setAttribute('aria-hidden', 'true');
+                            })"
+					class="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_28%,_black_calc(100%-28%),transparent_100%)] group"
+				>
+					<div x-ref="testimonials" class="flex items-start justify-center md:justify-start [&>div]:mx-3 animate-infinite-scroll-inverse group-hover:[animation-play-state:paused] [animation-delay:-7.5s]">
+						<!-- Item #5 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-05.jpg" width="44" height="44" alt="Testimonial 05"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Katy Dragán</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">katyd</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #6 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-06.jpg" width="44" height="44" alt="Testimonial 06"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Karl Ahmed</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">karl87</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #7 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-07.jpg" width="44" height="44" alt="Testimonial 07"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Carlotta Grech</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">carlagrech</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+						<!-- Item #8 -->
+						<div class="rounded h-full w-[22rem] border border-transparent [background:linear-gradient(#323237,#323237)_padding-box,linear-gradient(120deg,theme(colors.zinc.700),theme(colors.zinc.700/0),theme(colors.zinc.700))_border-box] p-5">
+							<div class="flex items-center mb-4">
+								<img class="shrink-0 rounded-full mr-3" src="./images/testimonial-08.jpg" width="44" height="44" alt="Testimonial 08"/>
+								<div>
+									<div class="font-inter-tight font-bold text-zinc-200">Alejandra Gok</div>
+									<div>
+										<a class="text-sm font-medium text-zinc-500 hover:text-zinc-300 transition" href="#0">alejandraIT</a>
+									</div>
+								</div>
+							</div>
+							<div class="text-zinc-500 before:content-['\0022'] after:content-['\0022']">
+								Extremely thoughtful approaches to business. I highly recommend this product to anyone wanting to jump into something new.
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+}

pkg/nebula/pages/home.templ

@@ -19,6 +19,11 @@ templ homeView(hero *models.Hero) {
 	@blocks.LayoutNoBody("Sonr.ID", true) {
 		@sections.HeaderMarketingNav()
 		@sections.SectionHero(hero)
+		@sections.Highlights()
+		@sections.Features()
+		@sections.Bento()
+		@sections.Testimonials()
+		@sections.CTA()
 		@sections.FooterMarketingNav()
 	}
 }

pkg/nebula/pages/home_templ.go

@@ -72,6 +72,46 @@ func homeView(hero *models.Hero) templ.Component {
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
+			templ_7745c5c3_Err = sections.Highlights().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Features().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Bento().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.Testimonials().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = sections.CTA().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
 			templ_7745c5c3_Err = sections.FooterMarketingNav().Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err