style(storybook): styling fixes

apps/marketing/src/pages/index.astro

@@ -18,13 +18,13 @@ import Layout from '@/layouts/PublicLayout.astro'
     >
     </div>
   </div>
-  <div class='relative gradientMask-to-b-20'>
+  <div class='relative'>
     <!-- <div
       class='absolute bottom-auto top-0 h-64 bg-gradient-to-b from-[var(--gray2)] to-transparent w-full z-[1]'
     >
     </div> -->
     <AboutProdkt client:only='react' />
-    <div class='w-full py-10 bg-[var(--gray1)]'>
+    <div class='w-full py-10'>
       <IndexSectionFeatures2 client:only='react' />
     </div>
     <div

packages/config/tailwind/src/ghost.css

@@ -230,6 +230,18 @@ input:where([type='submit']) {
     rgba(0, 0, 0, 1) 10%
   );
 }
+.gradientMask-to-b-40 {
+  mask-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(0, 0, 0, 1) 40%
+  );
+  -webkit-mask-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(0, 0, 0, 1) 40%
+  );
+}
 .gradientMask-to-l {
   mask-image: linear-gradient(
     270deg,

packages/ui/src/prodkt-components/about-prodkt/index.tsx

@@ -26,13 +26,12 @@ const AboutProdkt = React.forwardRef<HTMLDivElement>(({ ...props }, ref) => {
   return (
     <section
       ref={ref}
-      className='gradientMask-to-b-10 relative flex w-full flex-col items-center justify-center overflow-hidden px-10 pb-40 md:px-20 '
+      className='relative flex w-full flex-col items-center justify-center overflow-hidden px-10 md:pb-20 md:px-20 '
       {...props}
     >
-      {/* <CircuitTwo className='absolute bottom-0 z-0 mb-0 hidden size-full min-w-[1920px] -translate-y-1/3 object-cover md:block' /> */}
-      <div className='relative flex w-full flex-col place-content-center place-items-center content-center items-start justify-start md:min-h-screen md:items-center md:justify-center'>
+      <div className='relative flex w-full flex-col place-content-center place-items-center content-center items-start justify-start md:items-center md:justify-center'>
         <div className='my-auto grid max-w-screen-md grid-cols-1 place-content-center place-items-center content-start items-start justify-center md:grid-cols-4 md:place-items-center md:items-center'>
-          <div className='z-10 col-span-2 my-auto flex flex-col items-center justify-center gap-8 py-20 md:pt-0'>
+          <div className='z-10 col-span-2 my-auto flex flex-col items-center justify-center gap-8 py-10 md:pt-0'>
             <h3 className='my-auto max-w-[60dvw] text-pretty bg-gradient-to-br from-[var(--gray11)] to-[var(--gray12)] bg-clip-text pb-2 pr-3 text-6xl font-semibold leading-[80%] tracking-tighter text-transparent sm:text-7xl sm:leading-[75%] md:text-balance md:text-8xl md:leading-[75%] lg:max-w-full'>
               What is Prodkt?
             </h3>
@@ -54,7 +53,7 @@ const AboutProdkt = React.forwardRef<HTMLDivElement>(({ ...props }, ref) => {
               <div className='relative -right-1/3 top-9 m-auto size-1 rounded-full bg-[var(--lime9)] shadow ring-2 ring-[var(--limeA3)]' />
             </div>
             <div className='relative inset-auto z-[3] m-auto -my-20 flex flex-col place-content-center place-items-center content-center items-center justify-center overflow-visible'>
-              <div className='absolute inset-auto z-0 m-auto grid size-[19.5rem] grid-cols-2 grid-rows-2 gap-[3.129rem] rounded-[5.5rem] p-[0.58rem] ring-[15px] ring-[var(--ghost-a4)] blur-xl' />
+              <div className='absolute inset-auto z-0 m-auto grid size-[19.5rem] grid-cols-2 grid-rows-2 gap-[3.129rem] rounded-[5.5rem] p-[0.58rem] ring-[15px] ring-[var(--gray1)] blur-xl' />
 
               <div className='absolute inset-auto z-[5] m-auto grid size-[13.85rem] translate-x-[2px] grid-cols-2 grid-rows-2 gap-[3.25rem] p-[0.581rem]'>
                 <ProdktBlurry className='absolute inset-auto z-[6]  m-auto size-[62.5rem] translate-x-[-25rem] translate-y-2 rotate-2 opacity-100 mix-blend-hard-light' />
@@ -100,12 +99,12 @@ const AboutProdkt = React.forwardRef<HTMLDivElement>(({ ...props }, ref) => {
               <div className='relative inset-0 m-auto flex size-full flex-col place-content-center place-items-center content-center items-center justify-center'>
                 <img
                   src='https://odzdpcvclydcqawdagdt.supabase.co/storage/v1/object/public/prodkt/762dfb06-a622-4959-94cb-4357413be570.avif'
-                  className='absolute left-0 z-[-1] -translate-x-1/2  scale-y-[-0.7] animate-pulse select-none opacity-50'
+                  className='absolute left-0 z-[0] -translate-x-1/2  scale-y-[-0.7] animate-pulse select-none opacity-100'
                   alt='Chip glow'
                 />
                 <img
                   src='https://odzdpcvclydcqawdagdt.supabase.co/storage/v1/object/public/prodkt/762dfb06-a622-4959-94cb-4357413be570.avif'
-                  className='absolute right-0 z-[-1]  translate-x-1/2 -scale-x-100 scale-y-[-0.7] animate-pulse select-none opacity-50'
+                  className='absolute right-0 z-[0]  translate-x-1/2 -scale-x-100 scale-y-[-0.7] animate-pulse select-none opacity-100'
                   alt='Chip glow'
                 />
                 <ConnectionBoard className='absolute z-[11] m-auto size-[43.25rem] translate-y-[10.5rem] fill-[var(--grayA2)] stroke-none opacity-100 mix-blend-screen' />
@@ -114,11 +113,7 @@ const AboutProdkt = React.forwardRef<HTMLDivElement>(({ ...props }, ref) => {
             </div>
           </div>
         </div>
-        <div className='relative z-[19] ml-0 mt-auto flex w-full flex-col items-center justify-start gap-8 overflow-visible pb-12 md:pb-20 lg:pb-28'>
-          {/* <h6 className="mx-auto text-balance bg-gradient-to-br from-[var(--grayA10)] to-[var(--grayA12)] bg-clip-text px-3 pb-2 text-6xl font-semibold leading-[80%] tracking-tighter text-transparent xl:text-3xl xl:leading-[90%]">Its quite simple</h6> */}
-          {/* <h6 className='relative  mx-auto -translate-y-16 bg-gradient-to-br from-[var(--grayA4)] to-[var(--grayA9)] bg-clip-text text-left font-mono text-xs font-semibold uppercase tracking-[0.2rem] text-transparent'>
-              Built on top of bad ass technology
-            </h6> */}
+        <div className='relative z-[1] flex flex-col mx-auto items-center justify-start gap-8 overflow-visible mb-12 md:mb-20 lg:mb-28 backdrop-blur'>
           <LogoCloud>
             <CloudLogo>
               <Supabase className='h-4 w-auto max-w-14 text-[var(--ghost-a6)]' />
@@ -156,14 +151,13 @@ const AboutProdkt = React.forwardRef<HTMLDivElement>(({ ...props }, ref) => {
           </h6>
         </div>
       </div>
-      <HeroBackground className='hero-mask pointer-events-none absolute inset-x-auto bottom-auto z-[-1] m-auto size-full min-w-[1920px] select-none overflow-hidden object-cover object-center' />
 
       {/* <GlowOrb className="absolute z-0 translate-x-20 -translate-y-16 size-full blur-2xl" /> */}
       {/* <CircuitThree className="absolute inset-auto z-0 hidden w-full min-h-screen mb-auto pointer-events-none select-none min-w-screen size-full md:block" /> */}
       <Stars className='pointer-events-none absolute inset-x-auto bottom-auto top-0 z-20 mx-0 mb-auto mt-0 select-none opacity-10' />
-      <GreenGlow className='pointer-events-none absolute inset-x-0 bottom-auto top-0 z-[-1] mx-0 mb-auto mt-0 translate-y-0 select-none' />
-      <TopGlow className='pointer-events-none absolute inset-x-auto top-0 z-0 mx-0 mt-0 min-w-full select-none opacity-100 mix-blend-hard-light blur' />
-      <GiantOrb className='pointer-events-none absolute inset-auto z-[-1] mx-0 w-full min-w-[150dvw] translate-y-40 select-none sm:w-full sm:translate-y-24 md:translate-y-40 lg:translate-y-1/4 xl:translate-y-1/3' />
+      {/* <GreenGlow className="pointer-events-none absolute inset-x-0 bottom-auto top-0 z-[0] mx-0 mb-auto mt-0 translate-y-40 select-none" /> */}
+      <TopGlow className='gradientMask-to-b-20 min-h-screen pointer-events-none absolute inset-x-auto top-0 z-0 mx-0 my-auto select-none opacity-100 mix-blend-hard-light w-full blur-2xl' />
+      <HeroBackground className='hero-mask pointer-events-none absolute inset-x-auto bottom-auto z-[0] m-auto size-full min-w-[1920px] select-none overflow-hidden object-cover object-center' />
     </section>
   )
 })

packages/ui/src/prodkt-components/flow-board/flow-board.css

@@ -50,18 +50,24 @@
 /* Applied to each Edge in the flow */
 .react-flow__edge {
 }
-/* .selected	Added to an Edge when selected */
-.react-flow__edge {
-}
-/* .animated	Added to an Edge when its animated prop is true */
-.react-flow__edge {
-}
-/* .updating	Added to an Edge while it gets updated via onReconnect */
-.react-flow__edge {
-}
+
 /* The SVG <path /> element of an Edge */
 .react-flow__edge-path {
-  @apply stroke-[var(--grayA9)] stroke-1 ease-in-out;
+  stroke: url(#edge-gradient);
+  stroke-linecap: round;
+  stroke-width: 1.5;
+  stroke-dasharray: 1 3;
+  stroke-linejoin: round;
+  marker-end: none;
+}
+
+.react-flow__edge .react-flow__edge-path {
+  stroke-opacity: 0.75;
+}
+
+.react-flow__edgelabel-renderer button {
+  @apply size-6 flex items-center content-center place-content-center place-items-center pb-0.5 justify-center leading-[100%] rounded-full bg-radial-gradient from-[var(--grayA6)] backdrop-blur-[2px] to-[var(--grayA1)] text-lg text-[var(--ghost-a12)];
+  border: 0px solid transparent;
 }
 /* The SVG <text /> element of an Edge label */
 .react-flow__edge-text {
@@ -71,6 +77,7 @@
 }
 /* Applied to the current connection line */
 .react-flow__connection {
+  /* @apply bg-gradient-to-t from-[var(--gray12)] to-[var(--gray1)]; */
 }
 /* The SVG <path /> of a connection line */
 .react-flow__connection-path {
@@ -88,7 +95,7 @@
 }
 /* .selected	Added to a Node when selected. */
 .react-flow__node {
-  @apply after:bg-gradient-to-br after:from-[var(--grayA1)] after:to-[var(--grayA1)] after:blur-3xl after:w-full after:h-full after:top-0 after:bottom-0 after:left-0 after:right-0 after:z-[10] after:absolute;
+  @apply after:bg-gradient-to-br after:from-[var(--grayA1)] after:to-[var(--ghost-aa4)] after:blur-3xl after:w-full after:h-full after:top-0 after:bottom-0 after:left-0 after:right-0 after:z-[10] after:absolute;
 }
 /* Added when Node type is "default" */
 .react-flow__node-default {
@@ -107,42 +114,45 @@
 }
 /* Applied to each <Handle /> component */
 .react-flow__handle {
+  @apply size-4 bg-[var(--grayA9)] border border-[var(--grayA12)] rounded-full shadow-[var(--ghost-aa12)] shadow-xl ring-1 ring-inset ring-[var(--grayA9)];
+  @apply transition-all ease-in-out duration-500;
 }
+
+.react-flow__handle.source {
+  right: -20px;
+}
+
+.react-flow__handle.target {
+  left: -20px;
+}
+
+.react-flow__node:focus {
+}
+
 /* Applied when a handle's Position is set to "top" */
 .react-flow__handle-top {
 }
 /* Applied when a handle's Position is set to "right" */
 .react-flow__handle-right {
+  /* @apply right-[-12px]; */
 }
 /* Applied when a handle's Position is set to "bottom" */
 .react-flow__handle-bottom {
 }
 /* Applied when a handle's Position is set to "left" */
 .react-flow__handle-left {
+  /* @apply left-[-12px]; */
 }
 /* Added to a Handle when a connection line is above a handle. */
 .connectingfrom {
+  @apply size-8 transition-all ease-in-out duration-1000;
 }
 /* Added to a Handle when a connection line is above a handle. */
 .connectingto {
+  @apply size-8 transition-all ease-in-out duration-1000;
 }
 /*  */
-.valid
-  Added
-  to
-  a
-  Handle
-  when
-  a
-  connection
-  line
-  is
-  above
-  and
-  the
-  connection
-  is
-  valid {
+.valid {
 }
 /* Applied to the <Background /> component */
 .react-flow__background {

packages/ui/src/prodkt-components/flow-board/index.tsx

@@ -101,14 +101,15 @@ const Flow = ({
         nodeStrokeColor={''}
         nodeColor={''}
         maskColor={''}
-        maskStrokeWidth={0}
+        maskStrokeWidth={2}
         maskStrokeColor={''}
       />
       <svg>
         <defs>
           <linearGradient id='edge-gradient'>
-            <stop offset='0%' stopColor='var(--grayA2)' />
-            <stop offset='100%' stopColor='var(--accentA9)' />
+            <stop offset='1%' stopColor='var(--accentA4)' />
+            <stop offset='50%' stopColor='var(--accent9)' />
+            <stop offset='99%' stopColor='var(--accentA4)' />
           </linearGradient>
 
           <marker
@@ -122,7 +123,7 @@ const Flow = ({
             orient='auto'
           >
             <circle
-              stroke='var(--accent-9)'
+              stroke='var(--accent9)'
               strokeWidth='0'
               strokeOpacity='1'
               r='3'

packages/ui/src/prodkt-components/header-menu/header-menu.css

@@ -7,8 +7,8 @@
   background-color: transparent;
   border: 0px solid transparent;
   width: auto;
-  height: 5px;
-  border-radius: 9999px;
+  height: 1px;
+  @apply rounded-t-[100%];
 }
 .prodkt-header-menu::-webkit-scrollbar-button {
   background-color: transparent;
@@ -21,12 +21,15 @@
   border-radius: 9999px;
 }
 .prodkt-header-menu::-webkit-scrollbar-thumb {
-  background-color: var(--grayA8);
+  /* background-color: var(--grayA1); */
+  @apply bg-gradient-to-r from-[var(--grayA1)] from-40% via-[var(--grayA9)] to-60% to-[var(--grayA1)];
   border: 0px solid var(--grayA2);
   border-radius: 9999px;
 }
 .prodkt-header-menu::-webkit-scrollbar-track {
-  background-color: var(--gray4);
+  background-color: var(--grayA1);
+  @apply bg-gradient-to-r from-[var(--grayA1)] via-[var(--grayA4)] to-[var(--grayA1)];
+  /* @apply bg-gradient-to-r from-[var(--grayA1)] from-45% via-45% via-[var(--grayA3)] to-65% to-[var(--grayA1)]; */
   border: 0px solid var(--gray5);
   border-right-width: 0;
   border-radius: 9999px;
@@ -35,4 +38,5 @@
   background-color: transparent;
   border: 0px solid transparent;
   border-radius: 9999px;
+  @apply bottom-[1px];
 }

packages/ui/src/prodkt-components/header-menu/header-menu.stories.tsx

@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { HeaderMenu } from '.'
-import { Footer } from '../footer'
-import { Header } from '../header'
 
 const meta: Meta<typeof HeaderMenu> = {
   component: HeaderMenu,

packages/ui/src/prodkt-components/header-menu/index.tsx

@@ -33,15 +33,17 @@ const HeaderMenuItem = ({
       {...props}
     >
       <a
-        className='group relative inset-0 z-[11] mx-0 inline-flex h-10 w-fit grow flex-row items-center justify-center gap-3 overflow-hidden rounded-xl px-3.5 py-3 font-sans text-xs text-[var(--gray8)] transition-all will-change-auto after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:mx-auto after:size-px after:origin-bottom after:rounded-t-3xl after:bg-gradient-to-tr after:from-transparent after:to-[var(--grayA1)] after:opacity-0 after:transition-all after:duration-200 hover:text-[var(--gray1)] hover:after:size-full hover:after:rounded-t-3xl hover:after:opacity-100 hover:after:blur dark:text-[var(--gray10)] dark:after:from-[var(--grayA5)] dark:after:to-[var(--grayA1)] dark:hover:text-[var(--gray12)]'
+        className='group relative inset-0 z-[11] ring-1 ring-inset ring-[var(--grayA1)] hover:ring-[var(--grayA2)] mx-0 inline-flex h-full w-fit grow flex-row items-center justify-center gap-1.5 overflow-hidden rounded-[0.8rem] px-3.5 py-3 font-sans text-xs text-[var(--gray8)] transition-all will-change-auto after:absolute after:inset-x-0 after:bottom-0 after:z-0 after:mx-auto after:size-px after:origin-bottom after:rounded-t-3xl after:bg-gradient-to-tr after:from-transparent after:to-[var(--grayA1)] after:opacity-0 after:transition-all after:duration-500 hover:text-[var(--gray1)] hover:after:size-full hover:after:rounded-t-3xl hover:after:opacity-100 hover:after:blur dark:text-[var(--gray11)] dark:after:from-[var(--grayA5)] dark:after:to-[var(--grayA1)] dark:hover:text-[var(--gray12)] tracking-tight'
         href={link}
       >
         {Icon && typeof Icon === 'function' ? (
-          <Icon className='size-5 brightness-150 saturate-150 transition-all duration-300' />
+          <Icon className='size-4 z-[1] brightness-125 group-hover:brightness-150 group-hover:saturate-200 saturate-150 transition-all duration-500 select-none pointer-events-none' />
         ) : (
           Icon
         )}
-        <p className='z-[1] text-xs font-medium transition-all'>{name}</p>
+        <p className='z-[1] text-sm font-normal subpixel-antialiased gradientMask-to-b-40 transition-all'>
+          {name}
+        </p>
       </a>
     </li>
   )
@@ -50,7 +52,7 @@ const HeaderMenuItem = ({
 const HeaderMenu = ({ ...props }) => {
   return (
     <ul
-      className='prodkt-header-menu m-auto hidden h-12 w-auto flex-row place-content-center place-items-center items-center justify-start gap-0.5 overflow-y-hidden rounded-2xl border border-[var(--gray12)] bg-[var(--gray12)] px-0.5 shadow-2xl xl:inline-flex dark:border-[var(--gray4)] dark:bg-[var(--gray1)]'
+      className='prodkt-header-menu m-auto hidden h-12 py-[2px] w-auto flex-row place-content-center place-items-center items-center justify-start gap-px overflow-y-hidden rounded-2xl border border-[var(--gray12)] bg-[var(--gray12)] px-[2px] shadow-2xl xl:inline-flex dark:border-[var(--gray4)] dark:bg-[var(--gray1)]'
       {...props}
     >
       <HeaderMenuItem link='/flows' icon={Flows} name='Flows' />

packages/ui/src/prodkt-components/hero-header/hero-header.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { HeroHeader } from '.'
-import { Footer } from '../footer'
 import { Header } from '../header'
 
 const meta: Meta<typeof HeroHeader> = {
@@ -37,7 +36,6 @@ export const Default: Story = {
     <>
       <Header />
       <HeroHeader />
-      <Footer />
     </>
   ),
 }