Blog Sections

0import React, { useState, useEffect } from "react";
1import Link from "next/link";
2
3const ChevronRightIcon = ({ className }) => {
4  return (
5    <svg
6      className={className}
7      aria-hidden="true"
8      viewBox="0 0 24 24"
9      xmlns="http://www.w3.org/2000/svg"
10    >
11      <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />
12    </svg>
13  );
14};
15
16const ChevronLeftIcon = ({ className }) => {
17  return (
18    <svg
19      className={className}
20      aria-hidden="true"
21      viewBox="0 0 24 24"
22      xmlns="http://www.w3.org/2000/svg"
23    >
24      <path d="M15.3339 3.91556C14.9144 3.75089 14.4528 3.70785 14.0075 3.79186C13.5622 3.87588 13.1532 4.08319 12.8322 4.38755L6.42198 10.4626C5.99171 10.8705 5.75 11.4236 5.75 12.0004C5.75 12.5771 5.99171 13.1303 6.42198 13.5381L12.8322 19.6132C13.1532 19.9173 13.5621 20.1243 14.0073 20.2082C14.4524 20.2921 14.9138 20.249 15.3331 20.0845C15.7524 19.9199 16.1109 19.6412 16.363 19.2835C16.6152 18.9259 16.7499 18.5055 16.75 18.0754V5.92534C16.7501 5.49518 16.6156 5.07465 16.3636 4.71692C16.1115 4.35918 15.7532 4.08031 15.3339 3.91556Z" />
25    </svg>
26  );
27};
28
29const CalendarIcon = ({ className }) => {
30  return (
31    <svg
32      xmlns="http://www.w3.org/2000/svg"
33      viewBox="0 0 24 24"
34      preserveAspectRatio="xMidYMid meet"
35      className={className}
36    >
37      <path
38        fillRule="evenodd"
39        clipRule="evenodd"
40        d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
41      />
42    </svg>
43  );
44};
45
46const data = {
47  subHeading: "Igniting Creativity",
48  title: "Jettwave's Expedition in Technological Frontiers",
49  items: [
50    {
51      category: "Revolution",
52      title: "Introducing JettWave Quantum Cloud",
53      date: "March 1, 2023",
54      readTime: 12,
55      image: {
56        src: "https://images.unsplash.com/photo-1533008093099-e2681382639a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1965&q=80",
57        alt: "",
58      },
59      author: {
60        name: "Samantha Davis",
61      },
62      link: "#",
63    },
64    {
65      category: "Innovation",
66      title: "JettWave's AI-driven Smart City Initiatives",
67      date: "April 14, 2023",
68      readTime: 8,
69      image: {
70        src: "https://images.unsplash.com/photo-1545039254-ef84b22e31b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80",
71        alt: "",
72      },
73      author: {
74        name: "Christopher Smith",
75      },
76      link: "#",
77    },
78    {
79      category: "Horizons",
80      title: "The Future of IoT with JettWave",
81      date: "May 20, 2023",
82      readTime: 17,
83      image: {
84        src: "https://images.unsplash.com/photo-1558027807-31fdc7c829d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1962&q=80",
85        alt: "",
86      },
87      author: {
88        name: "Emily Wilson",
89      },
90      link: "#",
91    },
92    {
93      category: "Sustainability",
94      title: "JettWave's Green Tech Solutions",
95      date: "June 5, 2023",
96      readTime: 3,
97      image: {
98        src: "https://images.unsplash.com/photo-1597218868981-1b68e15f0065?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",
99        alt: "",
100      },
101      author: {
102        name: "Brandon Taylor",
103      },
104      link: "#",
105    },
106    {
107      category: "Collaborations",
108      title: "The JettWave-SpaceX Joint Venture",
109      date: "July 15, 2023",
110      readTime: 22,
111      image: {
112        src: "https://images.unsplash.com/photo-1540567592819-88185873775d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1950&q=80",
113        alt: "",
114      },
115      author: {
116        name: "Jessica Martinez",
117      },
118      link: "#",
119    },
120    {
121      category: "Launch",
122      title: "Debut of JettWave's Augmented Reality Glasses",
123      date: "August 8, 2023",
124      readTime: 5,
125      image: {
126        src: "https://images.unsplash.com/photo-1553326156-11c7d58da912?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80",
127        alt: "",
128      },
129      author: {
130        name: "William Brown",
131      },
132      link: "#",
133    },
134    {
135      category: "Awards",
136      title: "JettWave Secures 'Tech Innovator of the Year'",
137      date: "September 4, 2023",
138      readTime: 7,
139      image: {
140        src: "https://images.unsplash.com/photo-1551298698-66b830a4f11c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2030&q=80",
141        alt: "",
142      },
143      author: {
144        name: "Rebecca White",
145      },
146      link: "#",
147    },
148    {
149      category: "Research",
150      title: "Unveiling the JettWave Neural Network 5.0",
151      date: "October 2, 2023",
152      readTime: 11,
153      image: {
154        src: "https://images.unsplash.com/photo-1593853919383-37c43e748897?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",
155        alt: "",
156      },
157      author: {
158        name: "Daniel Garcia",
159      },
160      link: "#",
161    },
162    {
163      category: "Roadmap",
164      title: "The 2024 Blueprint: JettWave's Vision",
165      date: "December 20, 2023",
166      readTime: 11,
167      image: {
168        src: "https://images.unsplash.com/photo-1605086554166-da2bd45804da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",
169        alt: "",
170      },
171      author: {
172        name: "Michael Johnson",
173      },
174      link: "#",
175    },
176    {
177      category: "Expansion",
178      title: "JettWave's New European Tech Hubs",
179      date: "November 12, 2023",
180      readTime: 16,
181      image: {
182        src: "https://images.unsplash.com/photo-1554078140-01f553ad4d40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80",
183        alt: "",
184      },
185      author: {
186        name: "Laura Robinson",
187      },
188      link: "#",
189    },
190  ],
191};
192
193interface CarouselItem {
194  title: string;
195  date: string;
196  readTime: number;
197  image: {
198    src: string;
199    alt: string;
200  };
201  author: {
202    name: string;
203  };
204  link: string;
205}
206
207function moveItemToBack(arr: CarouselItem[]): CarouselItem[] {
208  if (arr.length <= 1) {
209    // No need to move if array has 0 or 1 item
210    return arr;
211  }
212  const firstItem: CarouselItem = arr.shift()!; // Remove the first item from the array
213  arr.push(firstItem); // Append the first item to the end of the array
214  return arr;
215}
216
217function moveItemToFront(arr: CarouselItem[]): CarouselItem[] {
218  if (arr.length <= 1) {
219    // No need to move if array has 0 or 1 item
220    return arr;
221  }
222  const lastItem: CarouselItem = arr.pop()!; // Remove the last item from the array
223  arr.unshift(lastItem); // Add the last item to the front of the array
224  return arr;
225}
226
227type CarouselHook = {
228  carouselData: CarouselItem[];
229  current: number;
230  setCurrent: React.Dispatch<React.SetStateAction<number>>;
231};
232
233const findData = data.items;
234
235const useCarousel = (
236  findData: CarouselItem[],
237  duration: number
238): CarouselHook => {
239  const [carouselData, setCarouselData] = useState<CarouselItem[]>(findData);
240  const [current, setCurrent] = useState<number>(0);
241
242  useEffect(() => {
243    let timeoutId: NodeJS.Timeout;
244
245    const moveItem = () => {
246      if (current === 1) {
247        setCarouselData(moveItemToBack(findData)); // Move item to the back of the carousel
248        setCurrent(0); // Reset the current index
249      } else if (current === -1) {
250        setCarouselData(moveItemToFront(findData)); // Move item to the front of the carousel
251        setCurrent(0); // Reset the current index
252      }
253    };
254
255    if (current !== 0) {
256      timeoutId = setTimeout(moveItem, 300); // Trigger moveItem after the specified duration
257    }
258
259    return () => clearTimeout(timeoutId); // Clear the timeout on cleanup
260  }, [current, data, duration]);
261
262  return {
263    carouselData,
264    current,
265    setCurrent,
266  };
267};
268
269export function BlogSections1() {
270  const { carouselData, current, setCurrent } = useCarousel(findData, 150);
271  return (
272    <div className="overflow-x-hidden py-12">
273      <div className="mx-auto w-full max-w-md overflow-hidden px-8 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
274        <div className="mb-12 flex items-center justify-between">
275          <div className="max-w-3xl">
276            <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
277              {data.subHeading}
278            </p>
279            <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
280              {data.title}
281            </h2>
282          </div>
283          <div className="flex gap-x-4">
284            <button
285              type="button"
286              onClick={() => setCurrent(current - 1)}
287              disabled={current === 0 ? false : true}
288              className="relative z-10 m-[3px] h-14 w-14 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100"
289            >
290              <ChevronLeftIcon className="h-full w-full fill-sky-600" />
291            </button>
292            <button
293              type="button"
294              onClick={() => setCurrent(current + 1)}
295              disabled={current === 0 ? false : true}
296              className="relative z-10 m-[3px] h-14 w-14 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100"
297            >
298              <ChevronRightIcon className="h-full w-full fill-sky-600" />
299            </button>
300          </div>
301        </div>
302        <div className="relative mx-auto flex w-full max-w-7xl justify-center px-8">
303          <div
304            className={
305              current === 0
306                ? "flex w-max -translate-x-[624px] gap-x-8"
307                : current === 1
308                ? "flex w-max -translate-x-[1040px] gap-x-8 duration-300"
309                : "flex w-max -translate-x-[208px] gap-x-8 duration-300"
310            }
311          >
312            {carouselData.map(
313              (
314                { title, date, readTime, image, author, link },
315                index: number
316              ) => {
317                return (
318                  <Link
319                    key={index}
320                    href={link}
321                    className="relative w-[384px] overflow-hidden rounded-3xl"
322                  >
323                    <div className="aspect-[3/4]">
324                      <img
325                        src={image.src}
326                        alt={image.alt}
327                        onError={(e) => {
328                          const image = e.target as HTMLImageElement;
329                          image.src = "onerrorimg";
330                        }}
331                        className="h-full w-full object-cover"
332                      />
333                    </div>
334                    <div className="absolute inset-x-0 bottom-0 w-full bg-gradient-to-t from-black/80 from-40% via-black/60 to-transparent p-8 pt-20">
335                      <div className="min-w-0">
336                        <div className="mb-3 flex gap-x-2">
337                          <CalendarIcon className="h-5 w-5 shrink-0 fill-sky-400" />
338                          <p className="text-sm font-medium text-slate-100">
339                            {date}
340                          </p>
341                        </div>
342                        <p className="mb-2 line-clamp-2 text-xl font-semibold text-slate-50 first-letter:uppercase">
343                          {title}
344                        </p>
345                        <p className="truncate text-sm text-slate-300">
346                          {author.name} {" • "}
347                          {readTime} min read
348                        </p>
349                      </div>
350                    </div>
351                  </Link>
352                );
353              }
354            )}
355          </div>
356        </div>
357      </div>
358    </div>
359  );
360}
361

0import React from "react";
1import Link from "next/link";
2
3const data = {
4  subHeading: "Igniting Creativity",
5  title: "Unleash the Potential of Our Team",
6  paragraph:
7    "Our dynamic team at Jettwave is a formidable presence, utilizing their combined expertise to foster innovation and shape the future of technology.",
8  items: [
9    {
10      category: "Technology",
11      title: "The Success Story of JettWave",
12      description:
13        "Discover the inspiring journey of JettWave, a cutting-edge tech startup that revolutionized the industry. Dive into their innovative solutions, strategic partnerships, and the secret behind their rapid growth in the competitive tech market.",
14      date: "April 21, 2023",
15      readTime: 6,
16      image: {
17        src: "https://images.unsplash.com/photo-1519397652863-aad621636ac7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
18        alt: "",
19      },
20      author: {
21        name: "John Smith",
22        image: {
23          src: "https://images.unsplash.com/photo-1642757186316-5dc18d55eb4f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",
24          alt: "",
25        },
26      },
27      link: "#",
28    },
29    {
30      category: "Innovation",
31      title: "How JettWave is Shaping the Future",
32      description:
33        "Explore the groundbreaking innovations and disruptive technologies introduced by JettWave. Uncover their visionary approach, unique business strategies, and the impact they are making on various industries.",
34      date: "July 3, 2023",
35      readTime: 2,
36      image: {
37        src: "https://images.unsplash.com/photo-1520699049698-acd2fccb8cc8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
38        alt: "",
39      },
40      author: {
41        name: "Emily Davis",
42        image: {
43          src: "https://images.unsplash.com/photo-1607888169593-61c1099fb420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
44          alt: "",
45        },
46      },
47      link: "#",
48    },
49    {
50      category: "Startup",
51      title: "JettWave's Tech Revolution",
52      description:
53        "Discover the transformative power of JettWave's groundbreaking technologies",
54      date: "December 11, 2023",
55      readTime: 15,
56      image: {
57        src: "https://images.unsplash.com/photo-1559310451-19481b3c7ec8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
58        alt: "",
59      },
60      author: {
61        name: "Michael Johnson",
62        image: {
63          src: "https://images.unsplash.com/photo-1653586050249-908669be7d37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1927&q=80",
64          alt: "",
65        },
66      },
67      link: "#",
68    },
69  ],
70};
71
72export function BlogSections2() {
73  return (
74    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
75      <div className="mx-auto mb-12 max-w-3xl text-center">
76        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
77          {data.subHeading}
78        </p>
79        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
80          {data.title}
81        </h2>
82        <p className="text-lg text-slate-600 [text-wrap:balance]">
83          {data.paragraph}
84        </p>
85      </div>
86      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
87        {data.items.map(
88          (
89            {
90              category,
91              title,
92              description,
93              date,
94              readTime,
95              image,
96              author,
97              link,
98            },
99            index: number
100          ) => {
101            return (
102              <Link
103                key={index}
104                href={link}
105                className="mx-auto flex w-full flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white ring-4 ring-slate-50 duration-300 hover:border-sky-200 hover:ring-sky-100 max-lg:max-w-md"
106              >
107                <div className="aspect-[5/3] w-full">
108                  <img
109                    src={image.src}
110                    alt={image.alt}
111                    onError={(e) => {
112                      const image = e.target as HTMLImageElement;
113                      image.src = "onerrorimg";
114                    }}
115                    className="aspect-[5/3] h-full w-full object-cover"
116                  />
117                </div>
118                <div className="flex grow flex-col justify-between gap-y-8 p-6">
119                  <div className="min-w-0">
120                    <p className="mb-3 w-fit rounded-full bg-sky-100 px-2.5 py-1.5 text-xs font-semibold uppercase text-sky-600">
121                      {category}
122                    </p>
123                    <p className="mb-1 line-clamp-2 text-xl font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
124                      {title}
125                    </p>
126                    <p className="line-clamp-3 text-base text-slate-600 [text-wrap:balance]">
127                      {description}
128                    </p>
129                  </div>
130                  <div className="flex items-center gap-x-4">
131                    <div className="h-12 w-12 shrink-0 overflow-hidden rounded-full">
132                      <img
133                        src={author.image.src}
134                        alt={author.image.alt}
135                        onError={(e) => {
136                          const image = e.target as HTMLImageElement;
137                          image.src = "onerrorimg";
138                        }}
139                        className="aspect-square h-full w-full object-cover"
140                      />
141                    </div>
142                    <div className="min-w-0">
143                      <p className="truncate text-base font-medium capitalize text-slate-900">
144                        {author.name}
145                      </p>
146                      <p className="truncate text-sm text-slate-600">
147                        {date}
148                        <span className="font-medium">
149                          {" • "}
150                          {readTime} min read
151                        </span>
152                      </p>
153                    </div>
154                  </div>
155                </div>
156              </Link>
157            );
158          }
159        )}
160      </div>
161    </div>
162  );
163}
164

0import React from "react";
1import Link from "next/link";
2
3const LikeIcon = ({ className }) => {
4  return (
5    <svg
6      xmlns="http://www.w3.org/2000/svg"
7      viewBox="0 0 24 24"
8      preserveAspectRatio="xMidYMid meet"
9      className={className}
10    >
11      <path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" />
12    </svg>
13  );
14};
15
16const CommentIcon = ({ className }) => {
17  return (
18    <svg
19      xmlns="http://www.w3.org/2000/svg"
20      viewBox="0 0 24 24"
21      preserveAspectRatio="xMidYMid meet"
22      className={className}
23    >
24      <path
25        fillRule="evenodd"
26        clipRule="evenodd"
27        d="M12 2.25c-2.429 0-4.817.178-7.152.521C2.87 3.061 1.5 4.795 1.5 6.741v6.018c0 1.946 1.37 3.68 3.348 3.97.877.129 1.761.234 2.652.316V21a.75.75 0 001.28.53l4.184-4.183a.39.39 0 01.266-.112c2.006-.05 3.982-.22 5.922-.506 1.978-.29 3.348-2.023 3.348-3.97V6.741c0-1.947-1.37-3.68-3.348-3.97A49.145 49.145 0 0012 2.25zM8.25 8.625a1.125 1.125 0 100 2.25 1.125 1.125 0 000-2.25zm2.625 1.125a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875-1.125a1.125 1.125 0 100 2.25 1.125 1.125 0 000-2.25z"
28      />
29    </svg>
30  );
31};
32
33const data = {
34  subHeading: "Igniting Creativity",
35  title: "Unleash the Potential of Our Team",
36  paragraph:
37    "Our dynamic team at Jettwave is a formidable presence, utilizing their combined expertise to foster innovation and shape the future of technology.",
38  items: [
39    {
40      title: "Unveiling the Journey of JettWave",
41      description:
42        "Embark on an inspiring journey with JettWave, the cutting-edge tech startup that has revolutionized the industry. Explore their innovative solutions, strategic partnerships, and the secret behind their rapid growth in the competitive tech market.",
43      likes: 234,
44      comments: 94,
45      readTime: 9,
46      image: {
47        src: "https://images.unsplash.com/photo-1600494603989-9650cf6ddd3d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80",
48        alt: "",
49      },
50      author: {
51        name: "John Smith",
52        image: {
53          src: "https://images.unsplash.com/photo-1684843821571-c181bd1109ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMwfHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
54          alt: "",
55        },
56      },
57      link: "#",
58    },
59    {
60      title: "JettWave: Shaping the Future of Innovation",
61      description:
62        "Discover the groundbreaking innovations and disruptive technologies introduced by JettWave. Uncover their visionary approach, unique business strategies, and the profound impact they are making on various industries.",
63      likes: 567,
64      comments: 212,
65      readTime: 18,
66      image: {
67        src: "https://images.unsplash.com/photo-1457305237443-44c3d5a30b89?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80",
68        alt: "",
69      },
70      author: {
71        name: "Emily Davis",
72        image: {
73          src: "https://images.unsplash.com/photo-1685297269362-e604510647ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM0fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
74          alt: "",
75        },
76      },
77      link: "#",
78    },
79    {
80      title: "Revolutionizing Industries: JettWave's Tech Journey",
81      description:
82        "Discover the transformative power of JettWave's groundbreaking technologies as they redefine industries and push boundaries beyond imagination.",
83      likes: 123,
84      comments: 32,
85      readTime: 5,
86      image: {
87        src: "https://images.unsplash.com/photo-1456735190827-d1262f71b8a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2048&q=80",
88        alt: "",
89      },
90      author: {
91        name: "Michael Johnson",
92        image: {
93          src: "https://images.unsplash.com/photo-1684864271050-e053dac9bfa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
94          alt: "",
95        },
96      },
97      link: "#",
98    },
99  ],
100};
101
102export function BlogSections3() {
103  return (
104    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
105      <div className="mx-auto mb-12 max-w-3xl text-center">
106        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
107          {data.subHeading}
108        </p>
109        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
110          {data.title}
111        </h2>
112        <p className="text-lg text-slate-600 [text-wrap:balance]">
113          {data.paragraph}
114        </p>
115      </div>
116      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
117        {data.items.map(
118          (
119            {
120              title,
121              description,
122              likes,
123              comments,
124              readTime,
125              image,
126              author,
127              link,
128            },
129            index: number
130          ) => {
131            return (
132              <Link
133                key={index}
134                href={link}
135                className="mx-auto flex w-full flex-col gap-y-8 rounded-3xl border border-slate-200 bg-white p-6 ring-sky-100 duration-300 hover:border-sky-200 hover:ring-4 max-lg:max-w-md"
136              >
137                <div className="aspect-[5/3] w-full overflow-hidden rounded-2xl">
138                  <img
139                    src={image.src}
140                    alt={image.alt}
141                    onError={(e) => {
142                      const image = e.target as HTMLImageElement;
143                      image.src = "onerrorimg";
144                    }}
145                    className="aspect-[5/3] h-full w-full object-cover"
146                  />
147                </div>
148                <div className="flex grow flex-col justify-between gap-y-8">
149                  <div className="min-w-0">
150                    <div className="mb-3 flex gap-x-5 gap-y-3 max-lg:flex-wrap">
151                      <div className="flex min-w-0 gap-x-2">
152                        <LikeIcon className="h-5 w-5 shrink-0 fill-sky-600" />
153                        <p className="truncate text-sm font-semibold text-slate-600">
154                          {likes} {+likes >= 2 ? "Likes" : "Like"}
155                        </p>
156                      </div>
157                      <div className="flex min-w-0 gap-x-2">
158                        <CommentIcon className="h-5 w-5 shrink-0 fill-sky-600" />
159                        <p className="truncate text-sm font-semibold text-slate-600">
160                          {comments} {+comments >= 2 ? "Comments" : "Comment"}
161                        </p>
162                      </div>
163                    </div>
164                    <p className="mb-1 line-clamp-2 text-xl font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
165                      {title}
166                    </p>
167                    <p className="line-clamp-3 text-base text-slate-600 [text-wrap:balance]">
168                      {description}
169                    </p>
170                  </div>
171                  <div className="flex items-center gap-x-4">
172                    <div className="h-12 w-12 shrink-0 overflow-hidden rounded-full">
173                      <img
174                        src={author.image.src}
175                        alt={author.image.alt}
176                        onError={(e) => {
177                          const image = e.target as HTMLImageElement;
178                          image.src = "onerrorimg";
179                        }}
180                        className="aspect-square h-full w-full object-cover"
181                      />
182                    </div>
183                    <div className="min-w-0">
184                      <p className="truncate text-base font-medium capitalize text-slate-900">
185                        {author.name}
186                      </p>
187                      <p className="truncate text-sm text-slate-600">
188                        {readTime} min read
189                      </p>
190                    </div>
191                  </div>
192                </div>
193              </Link>
194            );
195          }
196        )}
197      </div>
198    </div>
199  );
200}
201

0import React from "react";
1import Link from "next/link";
2
3const data = {
4  subHeading: "Igniting Creativity",
5  title: "Unleash the Potential of Our Team",
6  paragraph:
7    "Our dynamic team at Jettwave is a formidable presence, utilizing their combined expertise to foster innovation and shape the future of technology.",
8  items: [
9    {
10      category: "Technology",
11      title: "Unveiling the Journey of JettWave",
12      description:
13        "Embark on an inspiring journey with JettWave, the cutting-edge tech startup that has revolutionized the industry. Explore their innovative solutions, strategic partnerships, and the secret behind their rapid growth in the competitive tech market.",
14      date: "April 21, 2023",
15      image: {
16        src: "https://images.unsplash.com/photo-1592487111738-caa190fcb6e7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2049&q=80",
17        alt: "",
18      },
19      author: {
20        name: "John Smith",
21      },
22      link: "#",
23    },
24    {
25      category: "Innovation",
26      title: "JettWave: Shaping the Future of Innovation",
27      description:
28        "Discover the groundbreaking innovations and disruptive technologies introduced by JettWave. Uncover their visionary approach, unique business strategies, and the profound impact they are making on various industries.",
29      date: "July 3, 2023",
30      image: {
31        src: "https://images.unsplash.com/photo-1556559322-b5071efadc88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80",
32        alt: "",
33      },
34      author: {
35        name: "Emily Davis",
36      },
37      link: "#",
38    },
39    {
40      category: "Startup",
41      title: "Revolutionizing Industries: JettWave's Tech Journey",
42      description:
43        "Discover the transformative power of JettWave's groundbreaking technologies as they redefine industries and push boundaries beyond imagination.",
44      date: "December 11, 2023",
45      image: {
46        src: "https://images.unsplash.com/photo-1521783988139-89397d761dce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1925&q=80",
47        alt: "",
48      },
49      author: {
50        name: "Michael Johnson",
51      },
52      link: "#",
53    },
54  ],
55};
56
57export function BlogSections4() {
58  return (
59    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
60      <div className="mx-auto mb-12 max-w-3xl text-center">
61        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
62          {data.subHeading}
63        </p>
64        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
65          {data.title}
66        </h2>
67        <p className="text-lg text-slate-600 [text-wrap:balance]">
68          {data.paragraph}
69        </p>
70      </div>
71      <div className="grid grid-cols-1 gap-8 gap-y-12 lg:grid-cols-3">
72        {data.items.map(
73          (
74            { category, title, description, date, image, author, link },
75            index: number
76          ) => {
77            return (
78              <div
79                key={index}
80                className="mx-auto flex w-full flex-col gap-y-8 max-lg:max-w-md"
81              >
82                <div className="aspect-[5/3] w-full overflow-hidden rounded-3xl">
83                  <img
84                    src={image.src}
85                    alt={image.alt}
86                    onError={(e) => {
87                      const image = e.target as HTMLImageElement;
88                      image.src = "onerrorimg";
89                    }}
90                    className="aspect-[5/3] h-full w-full object-cover"
91                  />
92                </div>
93                <div className="flex grow flex-col justify-between gap-y-8">
94                  <div className="min-w-0">
95                    <p className="mb-1 truncate text-sm font-semibold capitalize text-sky-600">
96                      {author.name}
97                      <span className="font-medium">
98                        {" • "}
99                        {date}
100                      </span>
101                    </p>
102                    <Link
103                      href={link}
104                      className="mb-1 line-clamp-2 text-xl font-bold text-slate-900 duration-150 [text-wrap:balance] first-letter:uppercase hover:text-sky-700"
105                    >
106                      {title}
107                    </Link>
108                    <p className="line-clamp-3 text-base text-slate-600 [text-wrap:balance]">
109                      {description}
110                    </p>
111                  </div>
112                  <div>
113                    <p className="w-fit rounded-full bg-sky-100 px-2.5 py-1.5 text-xs font-semibold uppercase text-sky-600">
114                      {category}
115                    </p>
116                  </div>
117                </div>
118              </div>
119            );
120          }
121        )}
122      </div>
123    </div>
124  );
125}
126

0import React, { useState } from "react";
1import Link from "next/link";
2
3const ChevronRightIcon = ({ className }) => {
4  return (
5    <svg
6      className={className}
7      aria-hidden="true"
8      viewBox="0 0 24 24"
9      xmlns="http://www.w3.org/2000/svg"
10    >
11      <path d="M11.1678 4.38686C10.8468 4.08275 10.4379 3.87566 9.99274 3.79177C9.54759 3.70788 9.0862 3.75095 8.66688 3.91555C8.24756 4.08015 7.88915 4.35887 7.63695 4.71649C7.38476 5.07412 7.2501 5.49458 7.25 5.92472V18.0753C7.2501 18.5054 7.38476 18.9259 7.63695 19.2835C7.88915 19.6411 8.24756 19.9199 8.66688 20.0844C9.0862 20.249 9.54759 20.2921 9.99274 20.2082C10.4379 20.1243 10.8468 19.9172 11.1678 19.6131L17.578 13.5379C18.0083 13.1299 18.25 12.5768 18.25 12C18.25 11.4232 18.0083 10.8701 17.578 10.4621L11.1678 4.38686Z" />
12    </svg>
13  );
14};
15
16const ChevronLeftIcon = ({ className }) => {
17  return (
18    <svg
19      className={className}
20      aria-hidden="true"
21      viewBox="0 0 24 24"
22      xmlns="http://www.w3.org/2000/svg"
23    >
24      <path d="M15.3339 3.91556C14.9144 3.75089 14.4528 3.70785 14.0075 3.79186C13.5622 3.87588 13.1532 4.08319 12.8322 4.38755L6.42198 10.4626C5.99171 10.8705 5.75 11.4236 5.75 12.0004C5.75 12.5771 5.99171 13.1303 6.42198 13.5381L12.8322 19.6132C13.1532 19.9173 13.5621 20.1243 14.0073 20.2082C14.4524 20.2921 14.9138 20.249 15.3331 20.0845C15.7524 19.9199 16.1109 19.6412 16.363 19.2835C16.6152 18.9259 16.7499 18.5055 16.75 18.0754V5.92534C16.7501 5.49518 16.6156 5.07465 16.3636 4.71692C16.1115 4.35918 15.7532 4.08031 15.3339 3.91556Z" />
25    </svg>
26  );
27};
28
29const CalendarIcon = ({ className }) => {
30  return (
31    <svg
32      xmlns="http://www.w3.org/2000/svg"
33      viewBox="0 0 24 24"
34      preserveAspectRatio="xMidYMid meet"
35      className={className}
36    >
37      <path
38        fillRule="evenodd"
39        clipRule="evenodd"
40        d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z"
41      />
42    </svg>
43  );
44};
45
46const LikeIcon = ({ className }) => {
47  return (
48    <svg
49      xmlns="http://www.w3.org/2000/svg"
50      viewBox="0 0 24 24"
51      preserveAspectRatio="xMidYMid meet"
52      className={className}
53    >
54      <path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" />
55    </svg>
56  );
57};
58
59const CommentIcon = ({ className }) => {
60  return (
61    <svg
62      xmlns="http://www.w3.org/2000/svg"
63      viewBox="0 0 24 24"
64      preserveAspectRatio="xMidYMid meet"
65      className={className}
66    >
67      <path
68        fillRule="evenodd"
69        clipRule="evenodd"
70        d="M12 2.25c-2.429 0-4.817.178-7.152.521C2.87 3.061 1.5 4.795 1.5 6.741v6.018c0 1.946 1.37 3.68 3.348 3.97.877.129 1.761.234 2.652.316V21a.75.75 0 001.28.53l4.184-4.183a.39.39 0 01.266-.112c2.006-.05 3.982-.22 5.922-.506 1.978-.29 3.348-2.023 3.348-3.97V6.741c0-1.947-1.37-3.68-3.348-3.97A49.145 49.145 0 0012 2.25zM8.25 8.625a1.125 1.125 0 100 2.25 1.125 1.125 0 000-2.25zm2.625 1.125a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0zm4.875-1.125a1.125 1.125 0 100 2.25 1.125 1.125 0 000-2.25z"
71      />
72    </svg>
73  );
74};
75
76const data = {
77  subHeading: "Pioneering Digital Horizons",
78  title: "Venturing into Tomorrow with NexTech",
79  paragraph:
80    "At NexTech, we're not just about technology; we're about the future. Harnessing the power of our diverse team, we bring forth innovations that challenge conventions and set new standards.",
81  items: [
82    {
83      title: "The Evolution of NexTech",
84      description:
85        "Journey with us as we trace back to our roots, charting the course from a fledgling startup to a tech titan. Witness the milestones and breakthroughs that have defined our path.",
86      date: "April 21, 2023",
87      likes: 320,
88      comments: 87,
89      readTime: 11,
90      image: {
91        src: "https://images.unsplash.com/photo-1524562787295-1608217aa823?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2044&q=80",
92        alt: "",
93      },
94      link: "#",
95      author: {
96        name: "Rebecca Turner",
97        image: {
98          src: "https://images.unsplash.com/photo-1684864271050-e053dac9bfa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
99          alt: "",
100        },
101      },
102    },
103    {
104      title: "Innovation at NexTech's Heart",
105      description:
106        "Peek behind the curtains to discover how our passion for innovation fuels our endeavors. Understand the philosophy that drives every product and solution we craft.",
107      date: "April 21, 2023",
108      likes: 450,
109      comments: 152,
110      readTime: 15,
111      image: {
112        src: "https://images.unsplash.com/photo-1519038147911-84a336c20250?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
113        alt: "",
114      },
115      link: "#",
116      author: {
117        name: "Liam Foster",
118        image: {
119          src: "https://images.unsplash.com/photo-1684864271050-e053dac9bfa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
120          alt: "",
121        },
122      },
123    },
124    {
125      title: "Empowering Communities with NexTech",
126      description:
127        "Discover how our technological solutions are making an impact, empowering communities, and driving change on both local and global scales.",
128      date: "April 21, 2023",
129      likes: 278,
130      comments: 49,
131      readTime: 10,
132      image: {
133        src: "https://images.unsplash.com/photo-1575753208783-bf58d5600fa6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
134        alt: "",
135      },
136      author: {
137        name: "Sophie Martin",
138        image: {
139          src: "https://images.unsplash.com/photo-1684864271050-e053dac9bfa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
140          alt: "",
141        },
142      },
143      link: "#",
144    },
145    {
146      title: "Tech for a Greener Tomorrow",
147      description:
148        "Learn about our commitment to the environment and how we're using technology to create a more sustainable, greener future for all.",
149      date: "July 3, 2023",
150      likes: 375,
151      comments: 95,
152      readTime: 8,
153      image: {
154        src: "https://images.unsplash.com/photo-1476827221697-8570499b1597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2044&q=80",
155        alt: "",
156      },
157      author: {
158        name: "George Williams",
159        image: {
160          src: "https://images.unsplash.com/photo-1684864271050-e053dac9bfa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
161          alt: "",
162        },
163      },
164      link: "#",
165    },
166    {
167      title: "The Visionaries Behind NexTech",
168      description:
169        "Meet the brilliant minds and visionary leaders steering NexTech to new horizons. Discover the ethos, passion, and expertise they bring to the table.",
170      date: "December 11, 2023",
171      likes: 412,
172      comments: 134,
173      readTime: 9,
174      image: {
175        src: "https://images.unsplash.com/photo-1517816594999-56a82563cf80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
176        alt: "",
177      },
178      author: {
179        name: "Mia Johnson",
180        image: {
181          src: "https://images.unsplash.com/photo-1684864271050-e053dac9bfa8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDM1fHRvd0paRnNrcEdnfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60",
182          alt: "",
183        },
184      },
185      link: "#",
186    },
187  ],
188};
189
190export function BlogSections5() {
191  const [current, setCurrent] = useState(0);
192  return (
193    <div className="mx-auto w-full max-w-md px-8 py-12 sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl">
194      <div className="mx-auto mb-12 max-w-3xl text-center">
195        <p className="mb-1 truncate text-lg font-semibold capitalize text-sky-600">
196          {data.subHeading}
197        </p>
198        <h2 className="mb-4 text-4xl font-extrabold tracking-tight text-slate-900 [text-wrap:balance]">
199          {data.title}
200        </h2>
201        <p className="text-lg text-slate-600 [text-wrap:balance]">
202          {data.paragraph}
203        </p>
204      </div>
205      <div className="relative mx-auto mb-12 max-w-md lg:h-80 lg:max-w-5xl">
206        {data.items.map(
207          (
208            {
209              title,
210              description,
211              date,
212              likes,
213              comments,
214              readTime,
215              image,
216              author,
217              link,
218            },
219            index: number
220          ) => {
221            return (
222              <Link
223                key={index}
224                href={link}
225                className={`${
226                  current === index
227                    ? "relative z-10 delay-75"
228                    : "absolute inset-0 scale-90 opacity-0"
229                } lg:h-full w-full grid-cols-2 flex-col gap-x-12 gap-y-8 rounded-3xl border border-slate-200 bg-white p-6 ring-4 ring-slate-50 duration-300 hover:border-sky-200 hover:ring-sky-100 max-lg:flex lg:grid lg:p-8`}
230              >
231                <div className="w-full overflow-hidden rounded-3xl max-lg:aspect-[5/3]">
232                  <img
233                    src={image.src}
234                    alt={image.alt}
235                    onError={(e) => {
236                      const image = e.target as HTMLImageElement;
237                      image.src = "onerrorimg";
238                    }}
239                    className="h-full w-full object-cover max-lg:aspect-[5/3]"
240                  />
241                </div>
242                <div className="flex grow flex-col justify-between gap-y-8">
243                  <div className="min-w-0">
244                    <div className="mb-3 flex gap-x-5 gap-y-3 max-lg:flex-wrap">
245                      <div className="flex min-w-0 gap-x-2 max-lg:hidden">
246                        <CalendarIcon className="h-5 w-5 shrink-0 fill-sky-600" />
247                        <p className="truncate text-sm font-semibold text-slate-600">
248                          {date}
249                        </p>
250                      </div>
251                      <div className="flex min-w-0 gap-x-2">
252                        <LikeIcon className="h-5 w-5 shrink-0 fill-sky-600" />
253                        <p className="truncate text-sm font-semibold text-slate-600">
254                          {likes} {+likes >= 2 ? "Likes" : "Like"}
255                        </p>
256                      </div>
257                      <div className="flex min-w-0 gap-x-2">
258                        <CommentIcon className="h-5 w-5 shrink-0 fill-sky-600" />
259                        <p className="truncate text-sm font-semibold text-slate-600">
260                          {comments} {+comments >= 2 ? "Comments" : "Comment"}
261                        </p>
262                      </div>
263                    </div>
264                    <p className="mb-1 line-clamp-2 text-xl font-bold text-slate-900 [text-wrap:balance] first-letter:uppercase">
265                      {title}
266                    </p>
267                    <p className="line-clamp-3 text-base text-slate-600 [text-wrap:balance]">
268                      {description}
269                    </p>
270                  </div>
271                  <div className="flex items-center gap-x-4">
272                    <div className="h-12 w-12 shrink-0 overflow-hidden rounded-full">
273                      <img
274                        src={author.image.src}
275                        alt={author.image.alt}
276                        onError={(e) => {
277                          const image = e.target as HTMLImageElement;
278                          image.src = "onerrorimg";
279                        }}
280                        className="aspect-square h-full w-full object-cover"
281                      />
282                    </div>
283                    <div className="min-w-0">
284                      <p className="truncate text-base font-medium capitalize text-slate-900">
285                        {author.name}
286                      </p>
287                      <p className="truncate text-sm text-slate-600">
288                        {readTime} min read
289                      </p>
290                    </div>
291                  </div>
292                </div>
293              </Link>
294            );
295          }
296        )}
297      </div>
298      <div className="mx-auto flex max-w-md flex-wrap items-center justify-between gap-x-8 gap-y-6 lg:max-w-5xl">
299        <button
300          type="button"
301          onClick={
302            current !== 0
303              ? () => setCurrent(current - 1)
304              : () => setCurrent(data.items.length - 1)
305          }
306          className="relative z-10 m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100"
307        >
308          <ChevronLeftIcon className="h-full w-full fill-sky-600" />
309        </button>
310        <div className="flex flex-wrap justify-center gap-5 max-sm:order-last max-sm:w-full">
311          {data.items.map((props, index: number) => {
312            return (
313              <button
314                key={index}
315                onClick={() => setCurrent(index)}
316                className={`${
317                  current === index ? "bg-sky-600" : "bg-slate-200"
318                } h-3 w-3 rounded-full duration-300`}
319              />
320            );
321          })}
322        </div>
323        <button
324          type="button"
325          onClick={
326            current !== data.items.length - 1
327              ? () => setCurrent(current + 1)
328              : () => setCurrent(0)
329          }
330          className="relative z-10 m-[3px] h-12 w-12 shrink-0 overflow-hidden rounded-xl border border-sky-200 bg-white p-2.5 ring-[3px] ring-sky-100"
331        >
332          <ChevronRightIcon className="h-full w-full fill-sky-600" />
333        </button>
334      </div>
335    </div>
336  );
337}
338