Bhakti
58 lines
2.3 KiB
React
58 lines
2.3 KiB
React
import React from 'react'
|
|
import { motion } from "framer-motion";
|
|
import { useInView } from "react-intersection-observer";
|
|
import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards";
|
|
|
|
const ScrollReveal = ({ children, direction = "left" }) => {
|
|
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
|
|
|
|
const variants = {
|
|
left: { opacity: 0, x: -100 },
|
|
right: { opacity: 0, x: 100 },
|
|
up: { opacity: 0, y: 100 },
|
|
down: { opacity: 0, y: -100 },
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
ref={ref}
|
|
initial={variants[direction]}
|
|
animate={inView ? { opacity: 1, x: 0, y: 0 } : {}}
|
|
transition={{ duration: 1.2, ease: "easeOut" }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
function Hero2() {
|
|
const myRef = document.querySelector('.scrollable-div')
|
|
|
|
return (
|
|
<div>
|
|
<ScrollReveal direction='up'>
|
|
<HeroSecn />
|
|
</ScrollReveal>
|
|
<div className=" flex justify-center">
|
|
<div className=" flex justify-between py-8 w-5/6 ">
|
|
|
|
<ScrollReveal direction='up'>
|
|
<CardWithImage />
|
|
</ScrollReveal>
|
|
|
|
<div className="flex flex-col gap-10 justify-between ">
|
|
<ScrollReveal direction='up' > <CardOnlyText headingText = {"AI for agriculture: How Indian farmers are harvesting innovation"} bodyText={"Farmers participating in the programme saw a 21% increase in chili yields per acre, a 9% reduction in pesticide use, a 5% decrease in fertilizer usage, and an 8% improvement in unit prices due to quality enhancements."} href={"https://www.weforum.org/impact/ai-for-agriculture-in-india/ "} /> </ScrollReveal>
|
|
<ScrollReveal direction='up'> <CardWithButton /> </ScrollReveal>
|
|
</div>
|
|
|
|
<div className=" flex flex-col justify-between">
|
|
<ScrollReveal direction='up'> <CardOnlyText headingText={"SugarChain: Blockchain technology meets Agriculture"} bodyText={"The use of blockchain technology can help farmers automate processes with high trust, addressing issues like middlemen involvement and ensuring accurate compensation for their products"} href={"https://arxiv.org/abs/2301.08405"} /> </ScrollReveal>
|
|
<ScrollReveal direction='up'> <CardWithOnlyImage /> </ScrollReveal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Hero2 |