Pricing

1import { Playfair } from "next/font/google";
2import Link from "next/link";
3
4const font = Playfair({ subsets: ["latin"] });
5// this font is here because with serif fonts it just looks better, feel free to customize it as you want :)
6
7const CostInCircle = () => {
8  return (
9    <section
10      className={
11        font.className +
12        " flex flex-col justify-center items-center mx-auto p-4 mt-12 text-center"
13      }
14    >
15      <p className="text-xl tracking-[1rem] uppercase">Special menu</p>
16      <h4 className="text-5xl font-playfair-semibold">
17        Delicious Flavour Of Autumn
18      </h4>
19      <div className="flex flex-col lg:flex-row gap-8 mt-12">
20        <MenuCard
21          name="Coconut Shrimp"
22          text="Delicate shrimp immersed in coconut sauce, served with crunchy baguette."
23          cost={22}
24          photo="https://images.unsplash.com/photo-1611695500858-e6ac19b1ca55?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
25        />
26        <MenuCard
27          name="Asparagus Cream Soup"
28          text="Velvety asparagus cream soup, served with garlic croutons."
29          cost={14}
30          photo="https://images.unsplash.com/photo-1708759284833-b6f465188305?q=80&w=2030&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
31        />
32        <MenuCard
33          name="Ravioli with Ricotta and Spinach in Cream Sauce"
34          text="Delicate ravioli with ricotta and spinach in creamy Alfredo sauce."
35          cost={28}
36          photo="https://images.unsplash.com/photo-1662478839788-7d2898ca66cf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
37        />
38      </div>
39      <Link
40        href=""
41        className="px-6 py-4 bg-lime-400 text-xl uppercase rounded-none mt-12 hover:scale-105 active:scale-95 duration-200"
42      >
43        view full menu
44      </Link>
45    </section>
46  );
47};
48
49export default CostInCircle;
50
51const MenuCard = ({
52  name,
53  text,
54  cost,
55  photo,
56}: {
57  name: string;
58  text: string;
59  cost: number;
60  photo: string;
61}) => {
62  return (
63    <div className="flex flex-col w-80 shadow-xl bg-neutral-100">
64      <div className="relative">
65        <img
66          src={photo}
67          alt="The dish in Tasty Courtyard"
68          className="w-80 h-64 object-cover"
69        />
70        <div className="grid place-items-center text-4xl absolute bottom-0 left-1/2 translate-x-[-50%] translate-y-1/2 scale-125 bg-white p-4 rounded-full aspect-square shadow-[0_0_0_12px_rgba(255,255,255,0.5)]">
71          <p className="translate-y-[-10%]">{cost}$</p>
72        </div>
73      </div>
74      <div className="flex flex-col justify-center items-center text-center gap-8 py-8 pt-12 p-4">
75        <h6 className="font-semibold text-3xl mt-4">{name}</h6>
76        <p className="text-xl text-gray-500">{text}</p>
77      </div>
78    </div>
79  );
80};
81