Fix:Replace class with className
This commit is contained in:
@@ -1,112 +1,189 @@
|
|||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
export const HeroSecn = () =>{
|
export const HeroSecn = () => {
|
||||||
return(
|
return (
|
||||||
<section className=" py-40 w-full flex justify-center text-gray-100">
|
<section className=" py-40 w-full flex justify-center text-gray-100">
|
||||||
<div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
|
<div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
|
||||||
<div className="container mx-auto flex flex-col justify-between h-full w-full">
|
<div className="container mx-auto flex flex-col justify-between h-full w-full">
|
||||||
<div className="text-center md:text-start flex flex-col justify-around h-full">
|
<div className="text-center md:text-start flex flex-col justify-around h-full">
|
||||||
<h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
|
<h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
|
||||||
Anything and Everything you Need to know About
|
Anything and Everything you Need to know About
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-2xl font-semibold mb-8 ">
|
<p className="text-2xl font-semibold mb-8 ">
|
||||||
Your crops and their Health!
|
Your crops and their Health!
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
|
||||||
<img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div className="w-full md:w-4/5 object-contain flex justify-center items-center">
|
||||||
)
|
<img
|
||||||
}
|
src="/images/plant.png"
|
||||||
|
className="w-full h-auto rounded-3xl shadow-xl"
|
||||||
|
alt="plant"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const CardWithImage = () => {
|
export const CardWithImage = () => {
|
||||||
return (
|
return (
|
||||||
<div class="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
<div className="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||||
<a href="#">
|
<a href="#">
|
||||||
<img class="rounded-t-lg" src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg" alt="plant" />
|
<img
|
||||||
</a>
|
className="rounded-t-lg"
|
||||||
<div class="p-6 backdrop-blur-md rounded-b-lg">
|
src="https://i.pinimg.com/736x/07/2b/5f/072b5f6a1630d919ceee1a8569683cf7.jpg"
|
||||||
<a href="#">
|
alt="plant"
|
||||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">High tech, high yields?</h5>
|
/>
|
||||||
</a>
|
</a>
|
||||||
<p class="mb-3 font-normal text-white dark:text-gray-400">The Kenyan farmers deploying AI to increase productivity
|
<div className="p-6 backdrop-blur-md rounded-b-lg">
|
||||||
This article is more than 4 months old. AI apps are increasingly popular among small-scale farmers seeking to improve the quality and quantity of their crop.</p>
|
<a href="#">
|
||||||
<a href="https://www.theguardian.com/world/2024/sep/30/high-tech-high-yields-the-kenyan-farmers-deploying-ai-to-increase-productivity" target="_blank" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
|
<h5 className="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">
|
||||||
Read more
|
High tech, high yields?
|
||||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
</h5>
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
</a>
|
||||||
</svg>
|
<p className="mb-3 font-normal text-white dark:text-gray-400">
|
||||||
</a>
|
The Kenyan farmers deploying AI to increase productivity This article
|
||||||
</div>
|
is more than 4 months old. AI apps are increasingly popular among
|
||||||
</div>
|
small-scale farmers seeking to improve the quality and quantity of
|
||||||
)
|
their crop.
|
||||||
}
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://www.theguardian.com/world/2024/sep/30/high-tech-high-yields-the-kenyan-farmers-deploying-ai-to-increase-productivity"
|
||||||
|
target="_blank"
|
||||||
|
className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
|
||||||
|
>
|
||||||
|
Read more
|
||||||
|
<svg
|
||||||
|
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 14 10"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M1 5h12m0 0L9 1m4 4L9 9"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const CardOnlyText = (props) => {
|
export const CardOnlyText = (props) => {
|
||||||
return(
|
return (
|
||||||
<div>
|
<div>
|
||||||
<a href={props.href} target="_blank" class="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
<a
|
||||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white"> {props.headingText} </h5>
|
href={props.href}
|
||||||
<p class="font-normal text-gray-50 dark:text-gray-400"> {props.bodyText} </p>
|
target="_blank"
|
||||||
</a>
|
className="block max-w-sm p-6 rounded-lg shadow-md backdrop-blur-md dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
|
||||||
</div>
|
>
|
||||||
)
|
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
|
||||||
}
|
{" "}
|
||||||
|
{props.headingText}{" "}
|
||||||
|
</h5>
|
||||||
|
<p className="font-normal text-gray-50 dark:text-gray-400">
|
||||||
|
{" "}
|
||||||
|
{props.bodyText}{" "}
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const CardWithButton = () => {
|
export const CardWithButton = () => {
|
||||||
return(
|
return (
|
||||||
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
||||||
<a href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/" target="_blank">
|
<a
|
||||||
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">Empowering smallholder farmers with AI tools can bolster global food security</h5>
|
href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/"
|
||||||
</a>
|
target="_blank"
|
||||||
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400"> AI-powered weather forecasts help rural Indian farmers make informed planting decisions, reducing debt and boosting savings.</p>
|
>
|
||||||
<a href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/" target="_blank" class="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl ">
|
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
|
||||||
Read more
|
Empowering smallholder farmers with AI tools can bolster global food
|
||||||
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
|
security
|
||||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
|
</h5>
|
||||||
</svg>
|
</a>
|
||||||
</a>
|
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
|
||||||
</div>
|
{" "}
|
||||||
)
|
AI-powered weather forecasts help rural Indian farmers make informed
|
||||||
}
|
planting decisions, reducing debt and boosting savings.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/"
|
||||||
|
target="_blank"
|
||||||
|
className="inline-flex shadow-md backdrop-blur-md bg-gradient-to-tr from-gray-700/20 to-gray-50/20 items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg hover:backdrop-blur-xl "
|
||||||
|
>
|
||||||
|
Read more
|
||||||
|
<svg
|
||||||
|
className="rtl:rotate-180 w-3.5 h-3.5 ms-2"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 14 10"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M1 5h12m0 0L9 1m4 4L9 9"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
export const CardWithOnlyImage = () => {
|
export const CardWithOnlyImage = () => {
|
||||||
return(
|
return (
|
||||||
<div class="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
|
<div className="w-full max-w-sm bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:border-gray-700">
|
||||||
<a href="https://theprint.in/economy/telangana-is-the-success-story-of-indian-agritech-ai-tools-soil-testing-e-commerce-more/1630359/" target="_blank">
|
<a
|
||||||
<img class=" rounded-lg" src="https://i.pinimg.com/736x/2b/2a/0f/2b2a0f7003bd3e4201573c1189d600de.jpg" alt="product image" />
|
href="https://theprint.in/economy/telangana-is-the-success-story-of-indian-agritech-ai-tools-soil-testing-e-commerce-more/1630359/"
|
||||||
</a>
|
target="_blank"
|
||||||
</div>
|
>
|
||||||
)
|
<img
|
||||||
}
|
className=" rounded-lg"
|
||||||
|
src="https://i.pinimg.com/736x/2b/2a/0f/2b2a0f7003bd3e4201573c1189d600de.jpg"
|
||||||
|
alt="product image"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const cards = [HeroSecn, CardWithImage, CardOnlyText, CardWithButton, CardWithImage];
|
const cards = [
|
||||||
|
HeroSecn,
|
||||||
|
CardWithImage,
|
||||||
|
CardOnlyText,
|
||||||
|
CardWithButton,
|
||||||
|
CardWithImage,
|
||||||
|
];
|
||||||
|
|
||||||
export default cards;
|
export default cards;
|
||||||
|
|
||||||
|
|
||||||
export const CardLayout = () => {
|
export const CardLayout = () => {
|
||||||
return(
|
return (
|
||||||
<div>
|
<div>
|
||||||
<HeroSecn />
|
<HeroSecn />
|
||||||
<div className=" flex justify-center">
|
<div className=" flex justify-center">
|
||||||
<div className=" flex justify-between py-8 w-5/6 ">
|
<div className=" flex justify-between py-8 w-5/6 ">
|
||||||
<cardWithImage />
|
<cardWithImage />
|
||||||
<div className="flex flex-col gap-10 justify-between ">
|
<div className="flex flex-col gap-10 justify-between ">
|
||||||
<cardOnlyText />
|
<cardOnlyText />
|
||||||
<cardWithButton />
|
<cardWithButton />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className=" flex flex-col justify-between">
|
<div className=" flex flex-col justify-between">
|
||||||
<cardWithOnlyImage />
|
<cardWithOnlyImage />
|
||||||
<cardOnlyText />
|
<cardOnlyText />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
}
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user