Services

1"use client";
2import { motion } from "framer-motion";
3import Image from "next/image";
4import { MdOutlineWeb } from "react-icons/md";
5import { PiPencilCircle } from "react-icons/pi";
6import { FaAddressCard } from "react-icons/fa";
7import Link from "next/link";
8
9const HoverReveal = () => {
10  return (
11    <section
12      className=bg-cover lg:bg-contain flex flex-col items-center justift-center gap-8 mx-auto p-4 my-12
13    >
14      <div className="flex flex-col gap-2 items-center justify-center text-center">
15        <h5 className="text-3xl lg:text-5xl font-bold">
16          What services do I offer?
17        </h5>
18        <p className="lg:w-2/3 text-lg">
19          I provide services for creating responsive and fast websites, logos,
20          and all kinds of advertising materials such as business cards or
21          banners.
22        </p>
23      </div>
24
25      <div className="flex flex-col lg:flex-row gap-16 items-center justify-center pb-12 pt-0 lg:pt-12 w-full">
26        <OfferCard
27          title="Logos"
28          text="Memorable and visually pleasing logos for any company"
29          link=""
30          img="https://images.unsplash.com/photo-1493421419110-74f4e85ba126?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
31          icon={<PiPencilCircle />}
32        />
33
34        <OfferCard
35          title="Websites"
36          text="Modern, responsive websites compatible with all devices"
37          link=""
38          img="https://images.unsplash.com/photo-1595675024853-0f3ec9098ac7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
39          icon={<MdOutlineWeb />}
40        />
41
42        <OfferCard
43          title="Advertising Materials"
44          text="Business cards, banners, and many other things that will help you attract customers"
45          link=""
46          img="https://images.unsplash.com/photo-1572044162444-ad60f128bdea?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
47          icon={<FaAddressCard />}
48        />
49
50        <CardMobile
51          title="Logos"
52          text="Memorable and visually pleasing logos for any company"
53          link=""
54          img="https://images.unsplash.com/photo-1493421419110-74f4e85ba126?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
55          icon={<PiPencilCircle />}
56        />
57        <CardMobile
58          title="Websites"
59          text="Modern, responsive websites compatible with all devices"
60          link=""
61          img="https://images.unsplash.com/photo-1595675024853-0f3ec9098ac7?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
62          icon={<MdOutlineWeb />}
63        />
64        <CardMobile
65          title="Advertising Materials"
66          text="Business cards, banners, and many other things that will help you attract customers"
67          link=""
68          img="https://images.unsplash.com/photo-1572044162444-ad60f128bdea?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
69          icon={<FaAddressCard />}
70        />
71      </div>
72    </section>
73  );
74};
75
76export default HoverReveal;
77
78const CardMobile = ({
79  title,
80  text,
81  link,
82  img,
83  icon,
84}: {
85  title: string;
86  text: string;
87  link: string;
88  img: string;
89  icon: JSX.Element;
90}) => {
91  return (
92    <div className="bg-white relative w-full max-w-[25rem] aspect-square flex-1 z-10 group lg:hidden block">
93      <Image
94        src={img}
95        alt="title"
96        width={1000}
97        height={1000}
98        className="w-full h-full object-cover absolute z-[-1]"
99      />
100      <div className="w-full h-full p-2">
101        <div className="flex flex-col z-20 bg-white w-full h-full items-center justify-center text-center p-4 gap-2">
102          <p className="text-8xl text-blue-500">{icon}</p>
103          <h6 className="text-2xl font-bold">{title}</h6>
104          <p>{text}</p>
105          <div>
106            <Link href={link}>Learn More</Link>
107          </div>
108        </div>
109      </div>
110    </div>
111  );
112};
113
114const OfferCard = ({
115  title,
116  text,
117  link,
118  img,
119  icon,
120}: {
121  title: string;
122  text: string;
123  link: string;
124  img: string;
125  icon: JSX.Element;
126}) => {
127  const clipPath = {
128    initial: { clipPath: "polygon(0 0, 100% 0, 11% 11%, 0 100%)" },
129    animate: { clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)" },
130  };
131
132  const scale = {
133    initial: { scale: 1 },
134    animate: { scale: 1.1 },
135  };
136
137  return (
138    <motion.div
139      className="bg-white relative w-full max-w-[25rem] aspect-square flex-1 z-10 group hidden lg:block"
140      whileHover="animate"
141      initial="initial"
142      animate="initial"
143      variants={scale}
144      transition={{ duration: 0.6, ease: "backOut" }}
145    >
146      <Image
147        src={img}
148        alt="title"
149        width={1000}
150        height={1000}
151        className="w-full h-full object-cover absolute z-[-1]"
152      />
153      <div className="w-full h-full p-2">
154        <motion.div
155          variants={clipPath}
156          className="flex flex-col z-20 bg-white w-full h-full items-center justify-center py-12 text-center p-4 gap-2"
157          transition={{ duration: 0.8, ease: "backOut" }}
158        >
159          <motion.p
160            className="text-8xl text-blue-500"
161            transition={{ duration: 0.5, delay: 0.2 }}
162            variants={{
163              initial: { opacity: 0, translateY: "20px" },
164              animate: { opacity: 1, translateY: 0 },
165            }}
166          >
167            {icon}
168          </motion.p>
169
170          <motion.h6
171            transition={{ duration: 0.6, delay: 0.3 }}
172            variants={{
173              initial: { opacity: 0, translateY: "20px" },
174              animate: { opacity: 1, translateY: 0 },
175            }}
176            className="text-2xl font-bold"
177          >
178            {title}
179          </motion.h6>
180          <motion.p
181            transition={{ duration: 0.7, delay: 0.4 }}
182            variants={{
183              initial: { opacity: 0, translateY: "20px" },
184              animate: { opacity: 1, translateY: 0 },
185            }}
186          >
187            {text}
188          </motion.p>
189          <motion.div
190            transition={{ duration: 0.8, delay: 0.5 }}
191            variants={{
192              initial: { opacity: 0, translateY: "20px" },
193              animate: { opacity: 1, translateY: 0 },
194            }}
195            className="mt-4"
196          >
197            <Link
198              href={link}
199              className="cursor-pointer px-6 py-4 bg-blue-500 text-lg uppercase rounded-none hover:scale-105 active:scale-95 duration-200 font-bold"
200            >
201              Learn More
202            </Link>
203          </motion.div>
204        </motion.div>
205      </div>
206    </motion.div>
207  );
208};
209