Merge pull request #7 from Adamkaram/sweep/pricing-section

Add Pricing section to home page

Author: Adamkaram

app/Pricing.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const Pricing = () => {
+  const pricingOptions = [
+    { title: 'Basic', price: '$10', features: ['Feature 1', 'Feature 2', 'Feature 3'] },
+    { title: 'Premium', price: '$20', features: ['Feature 1', 'Feature 2', 'Feature 3', 'Feature 4'] },
+    { title: 'Pro', price: '$30', features: ['Feature 1', 'Feature 2', 'Feature 3', 'Feature 4', 'Feature 5'] },
+  ];
+
+  return (
+    <div className="container mx-auto py-10">
+      <h2 className="text-4xl font-bold text-center mb-10">Pricing</h2>
+      <div className="flex justify-around">
+        {pricingOptions.map((option, index) => (
+          <PricingOption key={index} option={option} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const PricingOption = ({ option }) => {
+  return (
+    <div className="border rounded-lg p-5">
+      <h3 className="text-2xl font-bold text-center mb-5">{option.title}</h3>
+      <p className="text-xl text-center mb-5">{option.price}</p>
+      <ul>
+        {option.features.map((feature, index) => (
+          <li key={index} className="mb-2">{feature}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Pricing;

app/page.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import SearchInput from './searchInput';
+import Pricing from './Pricing';
 export default function Home() {
   return (
     <main
@@ -110,7 +111,7 @@ export default function Home() {
         </div>
       </div>
       <SearchInput/>
-      
+      <Pricing/>
     </main>
   );
-}
+}

tailwind.config.js

@@ -10,6 +10,15 @@ module.exports = {
       center : "true"
     },
     extend: {
+      colors: {
+        'pricing': '#ff8a05',
+      },
+      spacing: {
+        'pricing': '1rem',
+      },
+      typography: {
+        'pricing': { fontSize: '1.5rem' },
+      },
       backgroundImage: {
         'bgs': "url('../public/banner-bg.png')",
       },
@@ -40,4 +49,4 @@ module.exports = {
     },
   },
   plugins: [require("daisyui")],
-};
+};