leumas-private-shared/src/Components/AppIntroduction/AppIntroduction.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React from 'react';
import toolData from './toolData.json'; // Adjust the path according to your file structure

const AppIntroduction = () => {
  return (
    <div className="app-introduction my-8 mx-auto w-full max-w-6xl border border-blue-400 rounded-lg shadow-lg overflow-hidden mx-2">
      <div className="flex flex-col p-6 bg-blue-50 text-center">
        <h2 className="text-3xl font-semibold text-blue-900">What We Did With the Tool</h2>
        <p className="mt-4 text-lg text-gray-600">
          Here's a glimpse of what's possible with our tool. Your possibilities are endless!
        </p>
      </div>
      
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 gap-4 p-6">
        {toolData.map((item, index) => (
          <div key={index} className="flex flex-col items-center space-y-4  border border-gray-300 rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-300 ease-in-out">
            <span className="font-bold ">{item.title}</span>
            <div className="flex space-x-2">
              <a href={item.visitLink} className="text-sm bg-blue-600 hover:bg-blue-700 text-white py-1.5 px-4 rounded-lg transition-colors duration-150 ease-in-out">See results</a>
              <a href={item.purchaseLink} className="text-sm bg-green-500 hover:bg-green-600 text-white py-1.5 px-4 rounded-lg transition-colors duration-150 ease-in-out">Purchase</a>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default AppIntroduction;