wip

56kcloud · Dec 26, 2023 · 1e567ac · 1e567ac
1 parent fff2b29
commit 1e567ac
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 64 deletions.
diff --git a/.../components/ui/organisms/content-sections/content-alternate-position-image-left/index.tsx b/.../components/ui/organisms/content-sections/content-alternate-position-image-left/index.tsx
@@ -11,41 +11,43 @@ export type ContentAlternatePositionImageLeftProps = {
 
 export default function ContentAlternatePositionImageLeft(props: ContentAlternatePositionImageLeftProps) { 
   return (
-    <div className='pb-20 pt-12 lg:pb-[104px] lg:pt-[120px]'>
+    <div className='py-20 lg:py-[104px]'>
       <div className='relative px-6 mx-auto max-w-7xl lg:px-8'>
-        <dl className='grid grid-cols-1 gap-x-6 gap-y-14 lg:gap-y-36'>          
-          <div
-            className='flex flex-row items-center gap-x-16'>
-            <div className='w-1/3 h-72'>
-              <Image
-                className='object-cover h-full rounded-xl'
-                src={props.image.url} 
-                width={props.image.width}
-                height={props.image.height}
-                alt={props.image.alternateText || props.image.name}
-              >
-              </Image>
-            </div>
-            <div className='flex flex-col w-2/3 gap-y-2'>
-              <dt className='text-2xl font-medium text-white sm:text-3xl'>
-                {props.title}
-              </dt>
-              <dd className='text-[18px] leading-8 text-slate-400 font-light'>
-                <p>{props.description}</p>
-              </dd>
-              <Button
-                asChild
-                size='medium'
-                shape='circle'
-                className='px-5 mt-4 text-md bg-sky-300 text-slate-900 hover:bg-violet-300'
-              >
-                <Link href=''>
+        {/* <dl className='grid grid-cols-1 gap-x-6 gap-y-14 lg:gap-y-36'> */}
+        <div
+          className='flex flex-col items-center lg:flex-row gap-y-10 lg:gap-x-16'>
+          <div className='w-full lg:w-1/3 h-72'>
+            <Image
+              className='object-cover w-full h-full rounded-xl'
+              src={props.image.url} 
+              width={props.image.width}
+              height={props.image.height}
+              alt={props.image.alternateText || props.image.name}
+            >
+            </Image>
+          </div>
+          <div className='flex flex-col w-full lg:w-2/3 gap-y-2'>
+            {/* Is 'dt' useful? */}
+            <dt className='text-2xl font-medium text-white sm:text-3xl'>
+              {props.title}
+            </dt>
+            {/* Is 'dd' useful? */}
+            <dd className='text-[18px] leading-8 text-slate-400 font-light'>
+              <p>{props.description}</p>
+            </dd>
+            <Button
+              asChild
+              size='medium'
+              shape='circle'
+              className='px-5 mt-4 text-md bg-sky-300 text-slate-900 hover:bg-violet-300'
+            >
+              <Link href=''>
                   Learn more
-                </Link>
-              </Button>
-            </div>
+              </Link>
+            </Button>
           </div>
-        </dl>
+        </div>
+        {/* </dl> */}
       </div>
     </div>
   )

diff --git a/...components/ui/organisms/content-sections/content-alternate-position-image-right/index.tsx b/...components/ui/organisms/content-sections/content-alternate-position-image-right/index.tsx
@@ -11,41 +11,43 @@ export type ContentAlternatePositionImageRightProps = {
 
 export default function ContentAlternatePositionImageRight(props: ContentAlternatePositionImageRightProps) { 
   return (
-    <div className='pb-20 pt-12 lg:pb-[104px] lg:pt-[120px]'>
+    <div className='py-20 lg:py-[104px]'>
       <div className='relative px-6 mx-auto max-w-7xl lg:px-8'>
-        <dl className='grid grid-cols-1 gap-x-6 gap-y-14 lg:gap-y-36'>          
-          <div
-            className='flex flex-row items-center gap-x-16'>
-            <div className='flex flex-col w-2/3 gap-y-2'>
-              <dt className='text-2xl font-medium text-white sm:text-3xl'>
-                {props.title}
-              </dt>
-              <dd className='text-[18px] leading-8 text-slate-400 font-light'>
-                <p>{props.description}</p>
-              </dd>
-              <Button
-                asChild
-                size='medium'
-                shape='circle'
-                className='px-5 mt-4 text-md bg-sky-300 text-slate-900 hover:bg-violet-300'
-              >
-                <Link href=''>
+        {/* <dl className='grid grid-cols-1 gap-x-6 gap-y-14 lg:gap-y-36'> */}
+        <div
+          className='flex flex-col items-center lg:flex-row gap-y-10 lg:gap-x-16'>
+          <div className='flex flex-col order-2 w-full lg:w-2/3 gap-y-2 lg:order-1'>
+            {/* Is 'dt' useful? */}
+            <dt className='text-2xl font-medium text-white sm:text-3xl'>
+              {props.title}
+            </dt>
+            {/* Is 'dd' useful? */}
+            <dd className='text-[18px] leading-8 text-slate-400 font-light'>
+              <p>{props.description}</p>
+            </dd>
+            <Button
+              asChild
+              size='medium'
+              shape='circle'
+              className='px-5 mt-4 text-md bg-sky-300 text-slate-900 hover:bg-violet-300'
+            >
+              <Link href=''>
                   Learn more
-                </Link>
-              </Button>
-            </div>
-            <div className='w-1/3 h-72'>
-              <Image
-                className='object-cover h-full rounded-xl'
-                src={props.image.url} 
-                width={props.image.width}
-                height={props.image.height}
-                alt={props.image.alternateText || props.image.name}
-              >
-              </Image>
-            </div>
+              </Link>
+            </Button>
           </div>
-        </dl>
+          <div className='order-1 w-full lg:w-1/3 h-72 lg:order-2'>
+            <Image
+              className='object-cover w-full h-full rounded-xl'
+              src={props.image.url} 
+              width={props.image.width}
+              height={props.image.height}
+              alt={props.image.alternateText || props.image.name}
+            >
+            </Image>
+          </div>
+        </div>
+        {/* </dl> */}
       </div>
     </div>
   )