Add extra padding

Author: hasparus

src/components/index-page/graphql-advantages/productivity.tsx

@@ -4,7 +4,8 @@ const VIDEOS_DIR =
 export function ProductivityFigure() {
   return (
     <div className="flex w-full items-center bg-gradient-to-b from-pri-lighter/[.05] to-pri-lighter/20 px-[14px] py-[30px] dark:from-sec-darker/[.01] dark:to-pri-light/5">
-      <div className="overflow-hidden rounded-lg shadow-[0px_0px_20px_0px_rgba(153,0,105,0.20)] dark:shadow-[0px_0px_20px_0px_hsl(218deg,60.3%,17.5%,.2)] dark:saturate-[.75]">
+      <div className="overflow-hidden rounded-lg shadow-[0px_0px_20px_0px_rgba(153,0,105,0.20)] dark:shadow-[0px_0px_20px_0px_hsl(218deg,60.3%,17.5%,.2)]">
+        <div className="h-px bg-[#FEFEFE] dark:bg-[#1F293A]" />
         <video
           disablePictureInPicture
           autoPlay
@@ -25,6 +26,10 @@ export function ProductivityFigure() {
         >
           <source src={`${VIDEOS_DIR}/graphiql-light.mp4`} type="video/mp4" />
         </video>
+        <div
+          /* the video is cropped a bit short at the bottom, so we're adding missing padding */
+          className="h-[7px] bg-[#FEFEFE] dark:bg-[#1F293A]"
+        />
       </div>
     </div>
   )