fixed padding atrocities

OpenQDev · Aug 2, 2023 · d3c3e38 · d3c3e38
1 parent 39dc303
commit d3c3e38
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 8 deletions.
diff --git a/components/Sales/drm/cta.jsx b/components/Sales/drm/cta.jsx
@@ -11,8 +11,10 @@ const Cta = () => {
         <Heading className=' pt-3 max-w-[80rem]'>Built by DevRels for DevRels</Heading>
         <Paragraph className='pt-8 max-w-[48rem]'>
           The OpenQ DRM was shaped by valuable feedback from over a hundred companies.
-          <br />
-          <br />
+          <div className='hidden lg:block'>
+            <br />
+            <br />
+          </div>
           <br />
           <br />
           Join our closed beta waitlist and embrace the future of dev rel.

diff --git a/components/Sales/drm/devrel-hero.jsx b/components/Sales/drm/devrel-hero.jsx
@@ -7,12 +7,12 @@ import Heading from './base/heading';
 
 const DevRelHero = () => {
   return (
-    <div className=' pt-16 lg:-mb-44'>
+    <div className=' pt-16 lg:-mb-36 '>
       <div className='2xl:flex relative hidden justify-center pt-12 2xl:mr-[24rem] overflow-hidden'>
         <UpperAnim />
       </div>
       <div className='grid 2xl:grid-cols-[30%_40%_30%] justify-center justify-items-center w-full '>
-        <div className='hidden 2xl:block flex-1 relative top-[84px] left-8'>
+        <div className='hidden 2xl:block flex-1 relative top-[80px] left-8'>
           <LeftAnim />
         </div>
         <div className='flex flex-col justify-content-center items-center '>
@@ -26,7 +26,7 @@ const DevRelHero = () => {
         </div>
         <div className='flex-1'></div>
       </div>
-      <div className='2xl:flex hidden justify-center 2xl:ml-[48rem] relative 2xl:-top-[100px] overflow-hidden'>
+      <div className='2xl:flex hidden justify-center 2xl:ml-[48rem] relative 2xl:-top-[136px] overflow-hidden'>
         <RightAnim />
       </div>
       <div className='2xl:hidden w-full flex justify-center  '>

diff --git a/components/Sales/drm/faq-questions.jsx b/components/Sales/drm/faq-questions.jsx
@@ -10,7 +10,7 @@ const FaqQuestion = ({ question, answer }) => {
   return (
     <div onClick={toggleAnswer} className='flex flex-col cursor-pointer'>
       <div className='flex flex-row items-center justify-start border-b border-gray-300 pt-2 pb-5'>
-        <div className='w-6 h-6 mt-2 mr-3'>
+        <div className='w-6 h-6 min-w-[24px] mt-2 mr-3  flex-initial'>
           <svg
             xmlns='http://www.w3.org/2000/svg'
             fill='none'

diff --git a/pages/drm.js b/pages/drm.js
@@ -13,11 +13,11 @@ import AnimateIn from '../components/Sales/drm/base/animateIn';
 
 const DRM = () => {
   return (
-    <main className='explore'>
+    <main className='explore-drm bg-white '>
       <div className='sticky top-0 z-50'>
         <Subnav />
       </div>
-      <div className='flex-col gap-8 flex md:gap-16 bg-white overflow-hidden'>
+      <div className='flex-col gap-8 flex md:gap-16 bg-white overflow-hidden max-w-[1920px] mx-auto'>
         <DevRelHero />
         <AnimateIn direction='left'>
           <DevRelCore />

diff --git a/styles/globals.css b/styles/globals.css
@@ -306,6 +306,63 @@ body::-webkit-scrollbar {
   border-radius: 2px;
 }
 
+
+.explore-drm {
+  @apply  text-gray-100;
+  background-position: right top;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  font-family: 'Inter', sans-serif;
+}
+
+.explore-drm h1 {
+  @apply font-bold;
+}
+
+.explore-drm h2 {
+  @apply text-[30px] font-bold text-xl lg:text-3xl;
+}
+
+.explore-drm button {
+  @apply flex justify-center items-center   text-white rounded-sm px-4 py-2 whitespace-nowrap;
+}
+
+.explore-drm .lead {
+  @apply text-white text-opacity-60;
+}
+.custom-scrollbar {
+  scrollbar-color: rgb(52 52 52) rgb(22 27 34);
+  scrollbar-width: thin;
+}
+
+.explore-drm .custom-scrollbar {
+  scrollbar-color: rgb(52 52 52) rgb(22 27 34);
+}
+
+.explore-drm .custom-scrollbar::-webkit-scrollbar {
+  @apply w-[5px] h-[5px];
+}
+
+.explore-drm .custom-scrollbar::-webkit-scrollbar-track {
+  @apply bg-transparent;
+  margin-block: 1.25rem;
+  margin-inline: 1.25rem;
+}
+
+.explore-drm .custom-scrollbar::-webkit-scrollbar-thumb {
+  @apply bg-dark-2 rounded-full border border-dark-1;
+  border: 1px solid rgb(52 52 52);
+}
+
+.explore-drm .custom-scrollbar-horizontal::-webkit-scrollbar-thumb {
+  border-bottom: none;
+}
+
+.explore-drm .custom-scrollbar-vertical::-webkit-scrollbar-thumb {
+  border-right: none;
+}
+
+
 .explore {
   @apply bg-dark-4 text-gray-100;
   background-image: url('/explore/header.png');