feat: make the section responsive

202306-NEA-DZ-FEW · Oct 19, 2023 · ae881da · ae881da
1 parent 8eba7a0
commit ae881da
Showing 1 changed file with 38 additions and 23 deletions.
diff --git a/src/components/marketing-card/SectionWithCards.jsx b/src/components/marketing-card/SectionWithCards.jsx
@@ -3,29 +3,44 @@ import Card from "./Card";
 
 const SectionWithCards = () => {
     return (
-        <section className='bg-gray-100 p-8 border '>
-            <h2 className='text-2xl font-bold mb-4 justify-center items-center flex border'>
-                Section Title
-            </h2>
-            <div className='flex flex-wrap -mx-4 border '>
-                <Card
-                    icon={<img src='./marketing-icons/sec1.png' alt='Icon' />}
-                    title='Card 1 Title'
-                >
-                    <p>Card 1 Content</p>
-                </Card>
-                <Card
-                    icon={<img src='./marketing-icons/sec2.png' alt='Icon' />}
-                    title='Card 1 Title'
-                >
-                    <p>Card 1 Content</p>
-                </Card>
-                <Card
-                    icon={<img src='./marketing-icons/sec3.png' alt='Icon' />}
-                    title='Card 1 Title'
-                >
-                    <p>Card 1 Content</p>
-                </Card>
+        <section className='bg-gray-100 p-8 border w-5/6 mx-auto text-center my-6 '>
+            <h2 className='text-2xl font-bold mb-8 '>Section Title</h2>
+
+            <div className='flex flex-wrap  items-center mx-4 border-red'>
+                <div className='w-full md:w-1/3 px-4 mb-4 flex flex-col items-center justify-center border border-blue-600'>
+                    <Card>
+                        <img
+                            className='pb-4'
+                            src='./marketing-icons/sec1.png'
+                            alt='Icon'
+                        />
+                        <h3 className='text-xl font-bold mb-2'>Card 1 Title</h3>
+                        <p>Card 1 Content</p>
+                    </Card>
+                </div>
+
+                <div className='w-full md:w-1/3 px-4 mb-4 bg-white flex flex-col items-center justify-center border border-blue-600'>
+                    <Card>
+                        <img
+                            className='pb-4'
+                            src='./marketing-icons/sec1.png'
+                            alt='Icon'
+                        />
+                        <h3 className='text-xl font-bold mb-2'>Card 1 Title</h3>
+                        <p>Card 1 Content</p>
+                    </Card>
+                </div>
+                <div className='w-full md:w-1/3 px-4 mb-4 bg-white flex flex-col items-center justify-center border border-blue-600'>
+                    <Card>
+                        <img
+                            className='pb-4'
+                            src='./marketing-icons/sec1.png'
+                            alt='Icon'
+                        />
+                        <h3 className='text-xl font-bold mb-2'>Card 1 Title</h3>
+                        <p>Card 1 Content</p>
+                    </Card>
+                </div>
             </div>
         </section>
     );