125 lines
7.5 KiB
React
125 lines
7.5 KiB
React
import React from "react";
|
|
import { IoMdContacts } from "react-icons/io";
|
|
import { FaClock } from "react-icons/fa";
|
|
import { FaMessage } from "react-icons/fa6";
|
|
import { motion } from "framer-motion";
|
|
import { useInView } from "react-intersection-observer";
|
|
import TypeWriterEffect from "react-typewriter-effect";
|
|
import cards from "./Cards";
|
|
|
|
const ScrollReveal = ({ children, direction = "left" }) => {
|
|
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.5 });
|
|
|
|
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>
|
|
);
|
|
};
|
|
|
|
|
|
const Testimonial = () => {
|
|
|
|
const myRef = document.querySelector('.scrollable-div')
|
|
|
|
return (
|
|
<>
|
|
<section className=" py-12 px-2 md:px-32 text-white">
|
|
<div className="container mx-auto ">
|
|
<div className="text-center flex-col justify-center align-middle ">
|
|
<ScrollReveal direction="up">
|
|
<h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">WHY CHOOSE US?</h2>
|
|
</ScrollReveal>
|
|
<ScrollReveal direction="up">
|
|
<h1 className="text-3xl text-center sm:text-6xl text-white drop-shadow-[10px_10px_10px_rgba(0,0,0,0.25)] font-bold mb-4">
|
|
<TypeWriterEffect
|
|
width="230"
|
|
trackWidth="13"
|
|
scrollArea={myRef}
|
|
startDelay={100}
|
|
cursorColor="white"
|
|
text="Record breaking features like never before!"
|
|
typeSpeed={100}
|
|
/>
|
|
</h1>
|
|
</ScrollReveal>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row justify-around mt-8 h-auto">
|
|
|
|
<ScrollReveal direction="up">
|
|
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
|
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
|
</svg>
|
|
<a href="#">
|
|
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Excellent Dashboards</h5>
|
|
</a>
|
|
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Our descriptive dashboards give insights into your crop's health and keeps track of your burning expenses</p>
|
|
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
|
Check Out
|
|
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
|
|
<ScrollReveal direction="up">
|
|
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
|
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
|
</svg>
|
|
<a href="#">
|
|
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> Crop Disease Prediction </h5>
|
|
</a>
|
|
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Predict the possible crop diseases based on their shown symptoms</p>
|
|
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
|
Check Out
|
|
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal direction="up">
|
|
<div class="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
|
|
<svg class="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"/>
|
|
</svg>
|
|
<a href="#">
|
|
<h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">Crop Planner</h5>
|
|
</a>
|
|
<p class="mb-3 font-normal text-gray-50 dark:text-gray-400">Based on previous season's crop and used pertilizers and pesticides, plan what crops would best suit the present state of your soil</p>
|
|
<a href="#" class="inline-flex font-medium items-center text-blue-600 hover:underline">
|
|
Check Out
|
|
<svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Testimonial;
|