8 marketing card

src/components/marketing-card/Card.jsx

@@ -0,0 +1,13 @@
+const Card = ({ icon, title, children }) => {
+    return (
+        <div className='p-4 mb-4 w-full sm:w-1/3 lg:w-1/3 flex justify-center item-center'>
+            <div className='text-center flex flex-col items-center'>
+                <div className='pb-4 '>{icon}</div>
+                <h3 className='p-2 font-bold'>{title}</h3>
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export default Card;

src/components/marketing-card/SectionWithCards.jsx

@@ -0,0 +1,10 @@
+const SectionWithCards = ({ children, SectionTitle }) => {
+    return (
+        <section className='bg-gray-100 p-8 w-5/6 mx-auto text-center my-6'>
+            <h2 className='text-2xl font-bold mb-8'>{SectionTitle}</h2>
+            <div className='flex flex-wrap mx-2'>{children}</div>
+        </section>
+    );
+};
+
+export default SectionWithCards;