Add ProductHunt badge

src/App.tsx

@@ -2,11 +2,13 @@ import BigWhaleLabs from 'components/MainPage/BigWhaleLabs'
 import InfoBlock from 'components/MainPage/InfoBlock'
 import MobileInfoBlock from 'components/MainPage/MobileInfoBlock'
 import Navbar from 'components/Navbar'
+import ProductHunt from 'components/ProductHunt'
 import Root from 'components/Root'
 
 const App = () => {
   return (
     <>
+      <ProductHunt />
       <Navbar />
       <Root>
         <BigWhaleLabs />

src/classnames/tailwind.ts

@@ -7231,6 +7231,7 @@ export type TMaxWidth =
   | 'max-w-screen-2xl'
   | 'max-w-screen-tiny'
   | 'max-w-screen-se'
+  | 'max-w-screen-s'
   | 'max-w-screen-tablet'
 
 export type THeight =
@@ -7529,6 +7530,7 @@ export type TTranslate =
   | 'translate-x-3/4'
   | 'translate-x-full'
   | '-translate-x-0.5'
+  | '-translate-x-3'
   | '-translate-x-7'
   | 'translate-y-0'
   | 'translate-y-1'
@@ -7574,6 +7576,7 @@ export type TTranslate =
   | 'translate-y-3/4'
   | 'translate-y-full'
   | '-translate-y-0.5'
+  | '-translate-y-3'
   | '-translate-y-7'
 
 export type TSkew =
@@ -8604,6 +8607,7 @@ export type TPseudoClassVariants =
   | '2xl:'
   | 'tiny:'
   | 'se:'
+  | 's:'
   | 'tablet:'
 
 //////////// Utility Function generic type

src/components/ProductHunt.tsx

@@ -0,0 +1,51 @@
+import classnames, {
+  alignItems,
+  backgroundColor,
+  display,
+  flexDirection,
+  fontSize,
+  fontWeight,
+  gap,
+  height,
+  justifyContent,
+  textColor,
+  transitionProperty,
+  translate,
+  width,
+} from 'classnames/tailwind'
+
+const wrapper = classnames(
+  width('w-full'),
+  display('flex'),
+  backgroundColor('bg-primary-background'),
+  flexDirection('flex-row'),
+  alignItems('items-center'),
+  justifyContent('justify-center'),
+  height('h-14'),
+  fontSize('text-sm'),
+  fontWeight('font-bold'),
+  textColor('text-primary'),
+  gap('gap-2'),
+  translate('se:-translate-y-3'),
+  transitionProperty('transition-transform')
+)
+const badgeStyle = classnames(height('h-8'), width('w-36'))
+const phString = display('hidden', 's:inline')
+
+export default function () {
+  return (
+    <div className={wrapper}>
+      <div className={phString}>Check us out on Product Hunt:</div>
+      <a
+        href="https://www.producthunt.com/posts/ketl?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-ketl"
+        target="_blank"
+      >
+        <img
+          alt="ketl | Product Hunt"
+          className={badgeStyle}
+          src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=425326&theme=neutral"
+        />
+      </a>
+    </div>
+  )
+}

tailwind.config.js

@@ -64,7 +64,8 @@ module.exports = {
       },
       screens: {
         tiny: '22.75rem',
-        se: '23.5rem',
+        se: '23.75rem',
+        s: '27.5rem',
         tablet: '31.25rem',
         md: '37.5rem',
         sm: '42.1875rem',
@@ -132,6 +133,7 @@ module.exports = {
       },
       translate: {
         '-0.5': '-0.25rem',
+        '-3': '-0.75rem',
         '-7': '-1.75rem',
       },
       willChange: {