finalize for mobiles and everything else

src/components/Button.tsx

@@ -5,7 +5,6 @@ import classnames, {
   backgroundColor,
   borderRadius,
   boxShadow,
-  boxShadowColor,
   display,
   flexDirection,
   fontFamily,
@@ -33,14 +32,11 @@ const fontClasses = classnames(
   backgroundColor('bg-accent'),
   borderRadius('rounded-4xl'),
   boxShadow('shadow-button'),
-  boxShadowColor('shadow-accent'),
   padding('py-2', 'px-4'),
   fontWeight('font-bold'),
   fontFamily('font-primary'),
   fontSize('text-sm'),
-  textColor('text-primary-dark'),
-  translate('hover:-translate-y-0.5'),
-  willChange('will-change-transform')
+  textColor('text-primary-dark')
 )
 const button = classnames(commonClasses, fontClasses)
 
@@ -60,7 +56,8 @@ const getCharacterTransitionDelay = (index: number) =>
 
 const charWrapper = classnames(
   transitionProperty('transition-letters'),
-  translate('group-hover:-translate-y-7')
+  translate('group-hover:-translate-y-7'),
+  willChange('will-change-transform')
 )
 
 const renderLetters = (sentence: string) => {

src/components/BwlLinks.tsx

@@ -0,0 +1,12 @@
+import { LinkText } from 'components/Text'
+import { bwlBlog, bwlGitHub, contactUs } from 'helpers/constants'
+
+export default function () {
+  return (
+    <>
+      <LinkText url={bwlBlog}>Blog</LinkText>
+      <LinkText url={bwlGitHub}>GitHub</LinkText>
+      <LinkText url={contactUs}>Contact</LinkText>
+    </>
+  )
+}

src/components/MainPage/BigWhaleLabs.tsx

@@ -8,6 +8,7 @@ import classnames, {
   inset,
   justifyContent,
   margin,
+  padding,
   position,
   width,
   zIndex,
@@ -18,7 +19,8 @@ const wrapper = classnames(
   height('h-full'),
   display('flex'),
   alignItems('items-center'),
-  justifyContent('justify-center')
+  justifyContent('justify-center'),
+  padding('px-6', 'md:px-0')
 )
 const imageStyles = classNamesToString(
   position('relative'),
@@ -30,8 +32,8 @@ const imageStyles = classNamesToString(
 )
 const videoStyles = classnames(
   position('absolute'),
-  inset('right-2', 'top-8'),
-  width('w-60'),
+  inset('-right-2', 'top-4', 'md:right-2', 'md:top-8'),
+  width('w-40', 'sm:w-48', 'md:w-60'),
   borderRadius('rounded-full'),
   animation('animate-float')
 )

src/components/MainPage/InfoBlock.tsx

@@ -14,13 +14,13 @@ import classnames, {
 
 const wrapper = classnames(
   display('flex'),
-  flexDirection('flex-row'),
+  flexDirection('flex-col', 'lg:flex-row'),
   alignItems('items-center'),
   justifyContent('justify-center'),
   width('w-full'),
-  gap('gap-x-20'),
-  padding('py-4'),
-  margin('mb-16')
+  gap('gap-y-8', 'md:gap-x-20'),
+  padding('md:px-8'),
+  margin('md:mb-8', 'md:mb-16', 'mt-16', 'md:mt-8')
 )
 
 export default function () {

src/components/MainPage/MobileInfoBlock.tsx

@@ -1,3 +1,53 @@
+import { BodyText } from 'components/Text'
+import BwlLinks from 'components/BwlLinks'
+import QuoteBlock from 'components/QuoteBlock'
+import classnames, {
+  alignItems,
+  display,
+  flexDirection,
+  gap,
+  justifyContent,
+  margin,
+  width,
+} from 'classnames/tailwind'
+
+const hideOnBig = display('md:hidden')
+const wrapper = classnames(hideOnBig, margin('mb-8'))
+const crystal = classnames(
+  width('w-full'),
+  display('flex'),
+  alignItems('items-center'),
+  justifyContent('justify-center'),
+  margin('my-8'),
+  hideOnBig
+)
+const quoteWrapper = classnames(
+  display('flex'),
+  flexDirection('flex-col'),
+  gap('gap-y-4')
+)
+const links = classnames(
+  display('flex'),
+  flexDirection('flex-row'),
+  gap('gap-x-2')
+)
+
 export default function () {
-  return <></>
+  return (
+    <>
+      <div className={crystal}>
+        <img src="/img/crystal.png" width={16} />
+      </div>
+      <div className={wrapper}>
+        <QuoteBlock small>
+          <div className={quoteWrapper}>
+            <BodyText>Learn more or reach out</BodyText>
+            <div className={links}>
+              <BwlLinks />
+            </div>
+          </div>
+        </QuoteBlock>
+      </div>
+    </>
+  )
 }

src/components/Navbar.tsx

@@ -47,7 +47,7 @@ const navbarInternalContainer = classnames(
   alignItems('items-center'),
   justifyContent('justify-between'),
   zIndex('z-10'),
-  padding('py-8', 'lg:py-10', 'px-4', 'lg:px-16')
+  padding('p-6', 'lg:py-10', 'lg:px-16')
 )
 const bgCover = (backgroundVisible?: boolean) =>
   classnames(
@@ -56,7 +56,7 @@ const bgCover = (backgroundVisible?: boolean) =>
     inset('inset-0'),
     backgroundColor(backgroundVisible ? 'bg-navbar' : undefined),
     backdropBlur(backgroundVisible ? 'backdrop-blur-lg' : undefined),
-    height('h-88', 'md:h-auto'),
+    height('h-auto'),
     transitionProperty('transition-all'),
     transitionDuration('duration-500'),
     transitionTimingFunction('ease-in-out')

src/components/NavbarLinks.tsx

@@ -1,5 +1,4 @@
-import { LinkText } from 'components/Text'
-import { bwlBlog, bwlGitHub, contactUs } from 'helpers/constants'
+import BwlLinks from 'components/BwlLinks'
 import classnames, {
   alignItems,
   display,
@@ -21,9 +20,7 @@ const navLinkContainer = classnames(
 export default function () {
   return (
     <div className={navLinkContainer}>
-      <LinkText url={bwlBlog}>Blog</LinkText>
-      <LinkText url={bwlGitHub}>GitHub</LinkText>
-      <LinkText url={contactUs}>Contact</LinkText>
+      <BwlLinks />
     </div>
   )
 }

src/components/QuoteBlock.tsx

@@ -7,6 +7,7 @@ import classnames, {
   flexDirection,
   gap,
   height,
+  padding,
   width,
 } from 'classnames/tailwind'
 
@@ -15,7 +16,8 @@ const wrapper = (small?: boolean) =>
     display('flex'),
     flexDirection('flex-row'),
     gap('gap-x-6'),
-    width(small ? 'w-1/3' : 'w-1/4'),
+    width(small ? 'lg:w-1/3' : 'lg:w-1/4'),
+    padding('px-8', 'md:px-0'),
     height('h-full'),
     alignItems('items-center')
   )

src/index.css

@@ -90,3 +90,15 @@ circle {
 .no-text-shadow {
   text-shadow: none;
 }
+
+@media only screen and (max-width: 600px) {
+  html {
+    padding: 0.875rem;
+  }
+}
+
+@media only screen and (max-width: 380px) {
+  html {
+    padding: 0;
+  }
+}

tailwind.config.js

@@ -85,7 +85,8 @@ module.exports = {
         navbar: 'var(--navbar)',
       },
       boxShadow: {
-        button: '0 0 2rem rgb(0 0 0 / 1)',
+        lg: '0 0 1rem 0 rgb(0 0 0 / 0.25)',
+        button: '0px 0px 2.25rem 0px rgba(191, 254, 143, 0.50)',
       },
       borderRadius: {
         '4xl': '2.5rem',