fix padding

polarsource · Jan 3, 2025 · af38d75 · af38d75
1 parent 5b4277b
commit af38d75
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 15 deletions.
diff --git a/clients/apps/web/src/components/Landing/Benefits.tsx b/clients/apps/web/src/components/Landing/Benefits.tsx
@@ -130,7 +130,7 @@ export const Benefits = () => {
     <div
       className={`dark:bg-polar-900 flex w-full flex-col overflow-hidden rounded-xl bg-gray-50 md:flex-row-reverse md:items-stretch`}
     >
-      <div className="flex flex-1 grow flex-col gap-y-10 p-16">
+      <div className="flex flex-1 grow flex-col gap-y-10 p-8 md:p-16">
         <div className="flex flex-col gap-y-4">
           <h2 className="text-2xl !leading-normal md:text-3xl">
             Automated Product Benefits
@@ -152,7 +152,7 @@ export const Benefits = () => {
         />
       </div>
       <motion.div
-        className="flex aspect-square flex-1 grow flex-col bg-cover bg-center p-16 md:aspect-auto"
+        className="flex aspect-square flex-1 grow flex-col bg-cover bg-center p-8 md:aspect-auto md:p-16"
         style={{
           backgroundImage: `url(${items[activeItem].image})`,
         }}

diff --git a/clients/apps/web/src/components/Landing/molecules/SplitPromo.tsx b/clients/apps/web/src/components/Landing/molecules/SplitPromo.tsx
@@ -47,7 +47,7 @@ export const SplitPromo: React.FC<SplitPromoProps> = ({
       whileInView="visible"
       viewport={{ once: true }}
     >
-      <div className="flex aspect-square flex-1 flex-col justify-center gap-y-8 p-16">
+      <div className="flex flex-1 flex-col justify-center gap-y-8 p-8 md:aspect-square md:p-16">
         <motion.h2
           className="text-2xl !leading-normal md:text-3xl"
           variants={itemVariants}
@@ -83,7 +83,7 @@ export const SplitPromo: React.FC<SplitPromoProps> = ({
         </motion.div>
       </div>
       <motion.div
-        className="flex aspect-square flex-1 bg-cover bg-center p-16"
+        className="flex aspect-square flex-1 bg-cover bg-center p-8 md:p-16"
         style={{
           backgroundImage: `url(${image})`,
         }}

diff --git a/clients/apps/web/src/components/Landing/molecules/Video.tsx b/clients/apps/web/src/components/Landing/molecules/Video.tsx
@@ -1,18 +1,12 @@
 'use client'
 
 import { VolumeMute, VolumeUp } from '@mui/icons-material'
-import { motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 
 interface VideoProps {
   src: string
 }
 
-const videoVariants = {
-  hidden: { opacity: 0 },
-  visible: { opacity: 1, transition: { duration: 2 } },
-}
-
 export const Video = ({ src }: VideoProps) => {
   const videoContainerRef = useRef<HTMLDivElement>(null)
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -50,17 +44,13 @@ export const Video = ({ src }: VideoProps) => {
       ref={videoContainerRef}
       className="relative aspect-video w-full overflow-hidden rounded-3xl"
     >
-      <motion.video
+      <video
         ref={videoRef}
         src={src}
         className="absolute inset-0 h-full w-full object-cover"
         autoPlay
         loop
         muted={isMuted}
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: false }}
-        variants={videoVariants}
       />
       <div className="absolute right-8 top-8 hidden cursor-pointer md:block">
         {isMuted ? (