Cards

1import { FaPerson } from "react-icons/fa6";
2
3const DarkOnHover = () => {
4  return (
5    <div className="relative w-72 overflow-hidden flex flex-col justify-between gap-4 p-12 bg-white shadow-sm text-start shrink-0 cursor-pointer transition-all hover:scale-[1.015] hover:shadow-xl group">
6      <div className="flex justify-between items-center py-4 border-b-2 border-neutral-300">
7        <FaPerson className="text-5xl text-orange-500" />
8        <p className="text-neutral-400 font-bold text-xl group-hover:text-white  transition-all duration-700">
9          01
10        </p>
11      </div>
12      <h4 className="text-2xl group-hover:text-neutral-100  transition-all duration-700">
13        Hire us
14      </h4>
15      <p className="text-neutral-600  group-hover:text-neutral-300 transition-all duration-700">
16        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora modi
17        cumque possimus totam id laboriosam qui nihil ipsam aliquam harum.
18      </p>
19      <div className="size-full absolute top-0 left-0 bg-neutral-900 z-[-2] -translate-x-full group-hover:translate-x-0 duration-300 transition-transform"></div>
20    </div>
21  );
22};
23
24export default DarkOnHover;
25

1import Image from "next/image";
2import React from "react";
3
4const ShuffleInBack = () => {
5  return (
6    <div
7      className="
8      aspect-square bg-white rounded-[3.2rem] relative p-8 max-w-72 flex flex-col items-center gap-4 z-20 shadow-lg duration-200 hover:scale-105
9      after:absolute after:size-full after:top-0 after:left-0 after:bg-white/40 after:rounded-[3.2rem] after:z-[-2] after:origin-bottom-left after:rotate-[4deg] after:translate-y-[-1rem] after:duration-200 hover:after:rotate-[10deg] hover:after:translate-y-[-3rem] hover:after:translate-x-4 hover:after:scale-95
10      before:absolute before:size-full before:top-0 before:left-0 before:bg-white/40 before:rounded-[3.2rem] before:z-[-2] before:origin-bottom-left before:rotate-[8deg] before:translate-y-[-2rem] before:duration-200 hover:before:rotate-[20deg] hover:before:translate-y-[-5.1rem] hover:before:translate-x-4 hover:before:scale-95
11
12  "
13    >
14      <Image
15        width={100}
16        height={100}
17        alt="Person profile"
18        src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?q=80&w=1856&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
19        className="w-24 aspect-square rounded-xl object-cover"
20      />
21      <p className="text-xl text-neutral-800 text-center">
22        Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic
23        necessitatibus magni ipsam ipsum sed earum officia incidunt porro totam
24        eos.
25      </p>
26    </div>
27  );
28};
29
30export default ShuffleInBack;
31

1import Image from "next/image";
2import React from "react";
3
4const BlogPostCard = () => {
5  return (
6    <div
7      className="
8      flex flex-col gap-2 w-[23rem] h-min rounded-xl shadow-none
9      lg:hover:translate-y-[-4px] lg:hover:translate-x-2 lg:hover:shadow-xl bg-neutral-800 text-white
10      duration-200 transition-all
11      lg:group
12    "
13    >
14      <Image
15        src="https://images.unsplash.com/photo-1511690656952-34342bb7c2f2?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
16        alt="Food photo"
17        width={400}
18        height={300}
19        className="w-full h-48 rounded-xl object-cover group-hover:translate-y-[-4px] group-hover:translate-x-2
20        duration-200 transition-all"
21      />
22      <div
23        className="flex flex-col gap-2 p-4
24        group-hover:translate-y-[-4px] group-hover:translate-x-2
25        duration-200 transition-all
26      "
27      >
28        <ul className="flex gap-4 ">
29          <li className="px-2 py-1 rounded-xl text-sm font-bold bg-yellow-500">
30            Food
31          </li>
32          <li className="px-2 py-1 rounded-xl text-sm font-bold bg-blue-500">
33            Cooking
34          </li>
35        </ul>
36
37        <h2 className=" text-lg font-bold">How to prepare soup</h2>
38        <p className="text-neutral-300">
39          Learn the basics of making delicious, homemade soup with this quick
40          guide. From selecting the best ingredients to mastering simple
41          techniques, this post will help you create flavorful soups with ease.
42          Plus, enjoy a few go-to recipes to get you started!
43        </p>
44        <span className="text-sm text-neutral-400">
45          {new Date().toDateString()}
46        </span>
47      </div>
48    </div>
49  );
50};
51
52export default BlogPostCard;
53