Components / News
News

News Grid

1import Image from "next/image";
2
3const GridNews = () => {
4  return (
5    <section className="flex flex-col gap-8 w-full py-12 items-center justify-start p-4">
6      <p className="text-xl tracking-[1rem] uppercase">our news</p>
7      <h3 className="text-5xl first-letter:uppercase">promotions & events</h3>
8
9      <div className="grid lg:grid-rows-2 lg:grid-cols-3 lg:max-w-6xl mt-12">
10        <Image
11          width={600}
12          height={600}
13          src="https://images.unsplash.com/photo-1508615263227-c5d58c1e5821?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
14          alt="Taste Courtyard Dish"
15          className="object-cover h-full aspect-square"
16        />
17
18        <div className="aspect-square bg-neutral-100 flex flex-col justify-center items-center p-4 lg:px-8 text-center gap-4">
19          <h3 className="text-4xl">Beef Sauteed Onions - Let's Enjoy!</h3>
20          <p className="text-gray-400 text-xl">---------</p>
21          <p className="text-gray-400 text-xl">
22            123 Broadway St, NY, United States
23            <br />
24            10:00 - 14:00
25            <br />
26            Monday, Jan. 25th 2024
27          </p>
28        </div>
29        <Image
30          width={600}
31          height={600}
32          src="https://images.unsplash.com/photo-1648501407197-4b7cd0957b27?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
33          alt="Taste Courtyard Dish"
34          className="object-cover h-full aspect-square"
35        />
36
37        <div className="aspect-square bg-neutral-100 flex flex-col justify-center items-center p-4 lg:px-8 text-center gap-4">
38          <h3 className="text-4xl">Become A Super Chef So Easy With Us</h3>
39          <p className="text-gray-400 text-xl">---------</p>
40          <p className="text-gray-400 text-xl">
41            1600 Allen St, NY, United States
42            <br />
43            12:00 - 17:00
44            <br />
45            Friday, Jan. 24th 2024
46          </p>
47        </div>
48        <Image
49          width={600}
50          height={600}
51          src="https://images.unsplash.com/photo-1577969181928-69c4e557c99a?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
52          alt="Taste Courtyard Dish"
53          className="object-cover h-full aspect-square"
54        />
55
56        <div className="aspect-square bg-neutral-100 flex flex-col justify-center items-center p-4 lg:px-8 text-center gap-4">
57          <h3 className="text-4xl">Art Photography In Foody</h3>
58          <p className="text-gray-400 text-xl">---------</p>
59          <p className="text-gray-400 text-xl">
60            580 Brooklyn St, NY, United States
61            <br />
62            9:00 - 12:00
63            <br />
64            Thursday, Feb. 6th 2024
65          </p>
66        </div>
67      </div>
68    </section>
69  );
70};
71
72export default GridNews;
73