92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
import React from "react";
|
|
import { Tilt } from "react-tilt";
|
|
import { motion } from "framer-motion";
|
|
|
|
import { fadeIn, textVariant } from "src/utils/motion";
|
|
import { services } from "src/constans";
|
|
import { styles } from "src/style";
|
|
import { SectionWrapper } from "src/hoc";
|
|
import Image from "next/image";
|
|
import vector1 from "@img/Vector1.png";
|
|
|
|
const ServiceCard = ({ index, title, icon }) => (
|
|
<Tilt className=" w-full mt-5">
|
|
<motion.div
|
|
variants={fadeIn("right", "spring", index * 0.5, 0.75)}
|
|
className="w-full bg-[#35685952] p-[1px] rounded-[20px] shadow-card"
|
|
>
|
|
<div
|
|
options={{
|
|
max: 45,
|
|
scale: 1,
|
|
speed: 450,
|
|
}}
|
|
className="bg-tertiary rounded-[20px] py-5 px-12 min-h-[180px] flex justify-evenly items-center flex-col"
|
|
>
|
|
{/* <Image
|
|
src={
|
|
icon == "int1"
|
|
? int1
|
|
: icon == "int2"
|
|
? int2
|
|
: icon == "int3"
|
|
? int3
|
|
: icon == "int4"
|
|
? int4
|
|
: int1
|
|
}
|
|
alt="web-development"
|
|
className="w-[150px] h-[150px] object-contain rounded-xl"
|
|
/> */}
|
|
|
|
<h3 className="text-white text-[20px] font-bold text-center">
|
|
{title}
|
|
</h3>
|
|
</div>
|
|
</motion.div>
|
|
</Tilt>
|
|
);
|
|
|
|
const StressTest = () => {
|
|
return (
|
|
<div className="xs:mt-20 ">
|
|
<motion.div variants={textVariant()}>
|
|
<h2 className="text-white font-black text-[30px] xs:text-[40px] sm:text-[50px] md:text-[60px] xs:leading-[50px] ">
|
|
<span className="text-primary-300 text-[30px] xs:text-[100px] sm:text-[150px] relative top-[5px] sm:top-[10px] font-bold">
|
|
B
|
|
</span>
|
|
e Part of Our Stress Test{" "}
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.p
|
|
variants={fadeIn("", "", 0.1, 1)}
|
|
className="text-secondary text-[14px] xs:text-[16px] sm:text-[17px] max-w-3xl leading-[20px] sm:leading-[24px] text-white mt-3"
|
|
>
|
|
Be Part of Our Stress Test and try us as an early adapter
|
|
</motion.p>
|
|
|
|
<motion.div variants={fadeIn("", "", 0.1, 1)}>
|
|
<div className="flex flex-col sm:flex-row mt-5 items-center sm:items-start">
|
|
<input
|
|
type="text"
|
|
className="form-control !w-full sm:!w-6/12 mb-4 sm:mb-0"
|
|
placeholder="Enter your email"
|
|
/>
|
|
<button className="btn btn-primary rounded-2xl sm:ml-3 w-full p-4 sm:w-auto">
|
|
Subscribe
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<div className="mt-10 xs:block lg:flex xs:justify-center lg:justify-start gap-5 sm:gap-10">
|
|
{services.map((service, index) => (
|
|
<ServiceCard key={service.title} index={index} {...service} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SectionWrapper(StressTest, "StressTest");
|