79 lines
2.4 KiB
JavaScript
79 lines
2.4 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";
|
|
|
|
const ServiceCard = ({ index, title, icon }) => (
|
|
<Tilt className="xs:w-[250px] w-full">
|
|
<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 About = () => {
|
|
return (
|
|
<>
|
|
<motion.div variants={textVariant()}>
|
|
<h2 className="text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]">
|
|
Introduction.
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.p
|
|
variants={fadeIn("", "", 0.1, 1)}
|
|
className="mt-4 text-secondary text-[17px] max-w-3xl leading-[30px] text-white"
|
|
>
|
|
At 'Briz', our ethos is simple: empower coffee shop owners to manage
|
|
better, control operations smoothly, and serve each cup with a smile.
|
|
Our platform is designed to handle the heavy lifting of day-to-day
|
|
tasks, from inventory management to staff scheduling, so you can focus
|
|
on what matters most - your patrons and your passion for coffee.
|
|
</motion.p>
|
|
|
|
<div className="mt-20 flex flex-wrap xs:justify-center lg:justify-start gap-10">
|
|
{services.map((service, index) => (
|
|
<ServiceCard key={service.title} index={index} {...service} />
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SectionWrapper(About, "about");
|