affiliate-sections

frontend/src/AgroShopAI/components/Pages/components/AffiliateDashboard.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+export default function AffiliateDashboard({
+  isLoggedIn,
+  handleLogin,
+  dateRange,
+  setDateRange,
+  dummyData,
+}) {
+  return (
+    <section className="mb-12">
+      <h2 className="text-2xl font-semibold text-green-800 mb-4">Referral Tracking Dashboard</h2>
+      {!isLoggedIn ? (
+        <form onSubmit={handleLogin} className="bg-white p-6 rounded-lg shadow-md">
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-green-700 mb-2">Email</label>
+            <input type="email" id="email" required className="w-full px-3 py-2 border border-green-300 rounded" />
+          </div>
+          <div className="mb-4">
+            <label htmlFor="password" className="block text-green-700 mb-2">Password</label>
+            <input type="password" id="password" required className="w-full px-3 py-2 border border-green-300 rounded" />
+          </div>
+          <button type="submit" className="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700 transition-colors">
+            Log In
+          </button>
+        </form>
+      ) : (
+        <div className="bg-white p-6 rounded-lg shadow-md">
+          <div className="flex justify-between items-center mb-4">
+            <h3 className="text-xl font-semibold text-green-800">Your Performance</h3>
+            <select
+              value={dateRange}
+              onChange={(e) => setDateRange(e.target.value)}
+              className="px-3 py-2 border border-green-300 rounded"
+            >
+              <option value="last7days">Last 7 Days</option>
+              <option value="last30days">Last 30 Days</option>
+              <option value="lastMonth">Last Month</option>
+            </select>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="bg-green-100 p-4 rounded">
+              <h4 className="text-lg font-semibold text-green-800">Clicks</h4>
+              <p className="text-2xl text-green-600">{dummyData.clicks}</p>
+            </div>
+            <div className="bg-green-100 p-4 rounded">
+              <h4 className="text-lg font-semibold text-green-800">Sign-ups</h4>
+              <p className="text-2xl text-green-600">{dummyData.signUps}</p>
+            </div>
+            <div className="bg-green-100 p-4 rounded">
+              <h4 className="text-lg font-semibold text-green-800">Conversions</h4>
+              <p className="text-2xl text-green-600">{dummyData.conversions}</p>
+            </div>
+            <div className="bg-green-100 p-4 rounded">
+              <h4 className="text-lg font-semibold text-green-800">Commissions</h4>
+              <p className="text-2xl text-green-600">${dummyData.commissions.toFixed(2)}</p>
+            </div>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+}

frontend/src/AgroShopAI/components/Pages/components/AffiliateHeader.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+export default function AffiliateHeader() {
+  return (
+    <header className="bg-gradient-to-r from-green-700 to-green-900 text-white py-6 pt-10 shadow-md">
+      <div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between">
+        {/* Logo and Title */}
+        <div className="flex items-center space-x-4">
+          <img
+            src="https://i.pinimg.com/736x/70/4e/fb/704efbd2e3759663b0218421e2670962.jpg"
+            alt="AgroShop Logo"
+            className="w-12 h-12 rounded-full"
+          />
+          <div>
+            <h1 className="text-3xl font-extrabold tracking-wide">
+              AgroShop Affiliate Program
+            </h1>
+            <p className="text-green-200 text-sm">
+              Partner with us to grow together in sustainable agriculture
+            </p>
+          </div>
+        </div>
+
+        {/* Navigation Links */}
+        <nav className="mt-4 md:mt-0">
+          <ul className="flex space-x-6 font-medium text-lg">
+            <li>
+              <a href="#overview" className="hover:text-green-300 transition duration-300">
+                Overview
+              </a>
+            </li>
+            <li>
+              <a href="#materials" className="hover:text-green-300 transition duration-300">
+                Materials
+              </a>
+            </li>
+            <li>
+              <a href="#terms" className="hover:text-green-300 transition duration-300">
+                Terms
+              </a>
+            </li>
+            <li>
+              <a href="#contact" className="hover:text-green-300 transition duration-300">
+                Contact
+              </a>
+            </li>
+          </ul>
+        </nav>
+
+        {/* Call to Action */}
+        <div className="mt-4 md:mt-0">
+          <a
+            href="#signup"
+            className="bg-white text-green-600 font-semibold py-2 px-6 rounded-full shadow-lg hover:bg-green-50 transition duration-300"
+          >
+            Join Now
+          </a>
+        </div>
+      </div>
+
+      {/* Subtext */}
+      <div className="container mx-auto px-6 mt-4 text-center text-green-200 text-sm md:text-base">
+        <p>Earn commissions, access exclusive materials, and help promote sustainable farming practices!</p>
+      </div>
+    </header>
+  );
+}

frontend/src/AgroShopAI/components/Pages/components/AffiliateJoinSection.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+export default function AffiliateJoinSection() {
+  return (
+    <section className="mb-12 px-6 py-8 bg-gradient-to-r from-green-50 to-green-100 shadow-md rounded-lg">
+      <div className="max-w-3xl mx-auto text-center">
+        <h2 className="text-3xl font-bold text-green-800 mb-6">Join Our Affiliate Program</h2>
+        <p className="text-green-700 mb-6 leading-relaxed">
+          Become a partner with AgroShop and earn commissions by promoting our high-quality agricultural products.
+          Our program offers competitive rates and simple tools to help you maximize your earnings while supporting
+          sustainable agriculture.
+        </p>
+      </div>
+
+      <div className="text-green-800 mb-6">
+        <h3 className="text-2xl font-semibold mb-4 text-center">How It Works</h3>
+        <ol className="list-decimal list-inside text-green-700 space-y-3">
+          <li>Sign up for our affiliate program with quick and easy registration.</li>
+          <li>Receive your unique referral link to track sales and commissions.</li>
+          <li>Promote AgroShop products through your website, blog, or social media.</li>
+          <li>Earn a commission on every sale made through your link.</li>
+        </ol>
+      </div>
+
+      <div className="text-green-800 mb-6">
+        <h3 className="text-2xl font-semibold mb-4 text-center">Program Benefits</h3>
+        <ul className="list-disc list-inside text-green-700 space-y-3">
+          <li>10% commission on all sales - one of the highest in the industry.</li>
+          <li>30-day cookie duration ensures you get credit for returning customers.</li>
+          <li>Monthly payouts directly to your account.</li>
+          <li>Access to exclusive promotions, materials, and early product launches.</li>
+          <li>Dedicated support to help you grow your audience and earnings.</li>
+        </ul>
+      </div>
+
+      <div className="text-center mt-8">
+        <button className="bg-green-600 text-white font-bold px-8 py-3 rounded-full hover:bg-green-700 transition duration-300 shadow-lg">
+          Join Now
+        </button>
+      </div>
+
+      <div className="mt-10 text-center text-green-600">
+        <p className="text-sm italic">
+          Have questions? <a href="#contact" className="text-green-700 font-semibold hover:underline">Contact us</a> for more information
+          about how the AgroShop Affiliate Program can work for you.
+        </p>
+      </div>
+    </section>
+  );
+}

frontend/src/AgroShopAI/components/Pages/components/AffiliateMarketingMaterials.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+export default function AffiliateMarketingMaterials() {
+  return (
+    <section className="mb-12 px-6 py-8 bg-gradient-to-r from-green-50 to-green-100 shadow-lg rounded-lg">
+      <div className="max-w-3xl mx-auto text-center mb-8">
+        <h2 className="text-3xl font-bold text-green-800 mb-4">Marketing Materials</h2>
+        <p className="text-green-700 leading-relaxed">
+          Access a range of professional marketing tools designed to help you promote AgroShop and increase your earnings.
+          Use these assets to engage your audience and drive conversions.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="bg-white p-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+          <h3 className="text-2xl font-semibold text-green-800 mb-3">Banners</h3>
+          <p className="text-green-700 mb-3">Choose from a variety of banners tailored to promote AgroShop products effectively.</p>
+          <img src="https://www.creativehatti.com/wp-content/uploads/edd/2021/06/Banner-for-high-quality-seeds-goodness-of-nature-15-large.jpg" alt="Banner Example" className="w-full h-32 object-cover rounded-md mb-4" />
+          <button className="bg-green-600 text-white font-semibold px-4 py-2 rounded hover:bg-green-700 transition-colors">
+            Download Banner
+          </button>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+          <h3 className="text-2xl font-semibold text-green-800 mb-3">Referral Link</h3>
+          <p className="text-green-700 mb-3">Use your unique referral link below to start earning commissions:</p>
+          <div className="flex items-center gap-2 mb-4">
+            <input
+              type="text"
+              readOnly
+              value="https://www.agroshop.com/referral?code=YOUR_CODE"
+              className="w-full px-3 py-2 border border-green-300 rounded text-gray-600"
+            />
+            <button className="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors">
+              Copy
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+          <h3 className="text-2xl font-semibold text-green-800 mb-3">Social Media Content</h3>
+          <p className="text-green-700 mb-3">Ready-to-post content for Facebook, Instagram, and Twitter.</p>
+          <button className="bg-green-600 text-white font-semibold px-4 py-2 rounded hover:bg-green-700 transition-colors">
+            Download Content Pack
+          </button>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow-md transition duration-300 transform hover:scale-105">
+          <h3 className="text-2xl font-semibold text-green-800 mb-3">Email Templates</h3>
+          <p className="text-green-700 mb-3">Engage your subscribers with pre-written, customizable email templates.</p>
+          <button className="bg-green-600 text-white font-semibold px-4 py-2 rounded hover:bg-green-700 transition-colors">
+            Download Email Pack
+          </button>
+        </div>
+      </div>
+
+      <div className="text-center mt-8">
+        <p className="text-green-600 italic">Need custom materials? <a href="#contact" className="text-green-700 font-semibold hover:underline">Contact our support team</a> for assistance.</p>
+      </div>
+    </section>
+  );
+}

frontend/src/AgroShopAI/components/Pages/components/AffiliateTerms.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export default function AffiliateTerms() {
+  return (
+    <section className="mb-12">
+      <h2 className="text-2xl font-semibold text-green-800 mb-4">Terms and Conditions</h2>
+      <div className="bg-white p-6 rounded-lg shadow-md">
+        <p className="text-green-700 mb-4">
+          By joining the AgroShop Affiliate Program, you agree to the following terms and conditions:
+        </p>
+        <ul className="list-disc list-inside text-green-700 mb-4">
+          <li>You will earn a 10% commission on all qualifying sales.</li>
+          <li>AgroShop reserves the right to modify the commission rate and terms at any time.</li>
+          <li>Affiliate links have a 30-day cookie duration.</li>
+          <li>Payment is processed monthly, with a minimum payout threshold.</li>
+          <li>Affiliates must adhere to AgroShop’s branding guidelines.</li>
+        </ul>
+        <p className="text-green-700">
+          For any questions, please contact our affiliate support team.
+        </p>
+      </div>
+    </section>
+  )
+}