add gig page

next.config.js

@@ -12,6 +12,12 @@ const nextConfig = {
         port: "",
         pathname: "/f/**",
       },
+      {
+        protocol: "https",
+        hostname: "in8cddcab4.ufs.sh",
+        port: "",
+        pathname: "/**",
+      },
       {
         protocol: "https",
         hostname: "github.com",

package.json

@@ -69,7 +69,7 @@
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
+    "eslint": "^9.19.0",
     "eslint-config-next": "14.0.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",

src/app/api/stripe/verify/page.ts → src/app/api/stripe/verify/route.ts

@@ -11,7 +11,7 @@ export async function GET(request: Request) {
 
   try {
     const session = await stripe.checkout.sessions.retrieve(sessionId);
-    console.log(session, "<--")
+
     if (session.payment_status === 'paid') {
       return NextResponse.json({ success: true, session });
     } else {

src/app/gigs/_utils/actions.ts

@@ -19,4 +19,26 @@ export const Action___GET__VerifyPayment = async (sessionId: string) => {
             message: "Failed to verify payment"
         }
     }
-}
+}
+
+export const Action___GET__AllGigs = async () => {
+    try {
+        const url = `${process.env.BASEURL}/gigs`;
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            next: {
+                revalidate: 60 * 60 * 24 * 2,
+            },
+        });
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        return {
+            success: false,
+            message: "Failed to fetch gigs"
+        }
+    }
+}

src/app/gigs/page.tsx

@@ -1,10 +1,231 @@
-import GigList from './_utils/components/gig-list';
+import Carousel from "@/components/molecule/carousel";
+import FadeInOnScroll from "@/components/anims/fadein-onscroll";
+import { Send, Star, Trophy, Zap } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { Fragment } from "react";
+import { Action___GET__AllGigs } from "./_utils/actions";
+import { Button } from "@/components/ui/button";
 
-export default function GigsPage() {
+type T___Gig = {
+  _id: string;
+  title: string;
+  link: string;
+  startFrom: number;
+  thumbnails: string[];
+  rating: number;
+  updatedAt: string;
+  createdAt: string;
+};
+
+const GigsPage = async () => {
+  const result = await Action___GET__AllGigs();
+  const gigs: T___Gig[] = result.data;
+  return (
+    <Fragment>
+      <div className="section container mx-auto grid grid-cols-1 md:grid-cols-2 gap-10">
+        <div className="flex flex-col gap-10">
+          <div className="flex flex-wrap gap-10">
+            <Image
+              src="/images/yeatiq.png"
+              alt="yeatiqs-image"
+              height={1000}
+              width={1000}
+              className="w-[150px] h-[160px] rounded-md"
+            />
+            <div className="flex flex-col items-start justify-start gap-2">
+              <h2 className="font-bold text-2xl">
+                Yeatiq&nbsp;
+                <span className="font-semibold text-gray-400 text-lg">
+                  @Yeatiq
+                </span>
+              </h2>
+              <div className="flex items-center gap-[5px]">
+                <Star className="stroke-[1.3px] fill-black w-4 h-4" />
+                5.0 (<span className="underline">474</span>)
+              </div>
+              <div className="flex items-center justify-start gap-2">
+                <Star className="w-4 h-4 stroke-[1.3px]" /> Top Rated
+              </div>
+            </div>
+          </div>
+          <FadeInOnScroll>
+            <div className="max-w-[600px]">
+              <h3 className="text-lg font-bold pb-3">About</h3>
+              <p>
+                Hello, I am a digital marketing professional with over two years
+                of experience. I have worked for ad agencies as a Digital
+                Marketer, responsible for setting up and executing ad campaigns.
+                I earned a LinkedIn assessment badge on google analytics.
+                I&apos;m in the top 30% of 492k people who took this assessment.
+                I look forward to working with you.
+              </p>
+            </div>
+          </FadeInOnScroll>
+          <div className="block md:hidden">
+            <Characteristics />
+          </div>
+          <div className="max-w-[600px]">
+            <h3 className="text-lg font-bold">Skills</h3>
+            <ul className="flex flex-wrap gap-2 pt-3">
+              {skills.map((item) => {
+                return (
+                  <li key={item}>
+                    <FadeInOnScroll>
+                      <div className="px-4 py-1 rounded-full bg-gray-100 border">
+                        {item}
+                      </div>
+                    </FadeInOnScroll>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+        <div className="flex flex-col gap-10">
+          <div className="hidden md:block">
+            <Characteristics />
+          </div>
+          <div className="w-[300px] p-5 rounded-md border flex flex-col gap-2">
+            <h3>
+              <span className="font-bold">Know more</span> about Yeatiqur Rahman
+            </h3>
+            <Link
+              href="https://thesociomatic.com"
+              passHref={true}
+              target="_blank"
+            >
+              <Button className="w-full gap-2">
+                <Send className="w-4 h-4" />
+                Visit Fiverr Profile
+              </Button>
+            </Link>
+            {/* <Link
+              href="https://thesociomatic.com"
+              passHref={true}
+              target="_blank"
+            >
+              <Button variant="outline" className="w-full">
+                Visit Company Website
+              </Button>
+            </Link> */}
+
+            {/* <p className="text-gray-600">Presented by thesociomatic.com</p> */}
+          </div>
+        </div>
+      </div>
+      <div className="container mx-auto">
+        <h2 className="text-2xl font-bold">All My Gigs</h2>
+      </div>
+      <div className="pb-32 pt-10 container mx-auto flex flex-wrap justify-start items-start gap-10">
+        {gigs.map((item: T___Gig) => {
+          return (
+            <div className="w-[300px] group" key={item._id}>
+              <FadeInOnScroll>
+                <Carousel images={item.thumbnails} />
+                <div className="flex flex-col items-start justify-start gap-4 pt-4">
+                  <Link href={item.link}>
+                    <h4 className="font-medium hover:underline cursor-pointer">
+                      {item.title}
+                    </h4>
+                  </Link>
+                  <p><span className="text-gray-400">Starting from</span> US$15</p>
+                  <div className="flex items-center gap-2">
+                    <Button variant="outline">Buy on Fiverr</Button>
+                    <button
+                      onClick={() => handleStripePurchase(item._id)}
+                      className="bg-blue-500 text-white px-4 py-2 rounded"
+                    >
+                      Buy with Stripe
+                    </button>
+                  </div>
+                </div>
+              </FadeInOnScroll>
+            </div>
+          );
+        })}
+      </div>
+    </Fragment>
+  );
+};
+
+export default GigsPage;
+
+async function handleStripePurchase(gigId: string) {
+  try {
+    const response = await fetch("/api/stripe/create", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ gigId }),
+    });
+
+    const { url } = await response.json();
+    window.location.href = url;
+  } catch (error) {
+    console.error("Error:", error);
+  }
+}
+
+const Characteristics = () => {
   return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-8">My Fiverr Gigs</h1>
-      <GigList />
+    <div className="max-w-[600px]">
+      <ul className="flex flex-col gap-10">
+        {characteristics.map((item) => {
+          return (
+            <li key={item.id}>
+              <FadeInOnScroll>
+                <div className="flex items-start gap-[8px]">
+                  <div className="min-w-[30px]">{item.icon}</div>
+                  <div className="flex flex-col gap-[4px]">
+                    <h4 className="font-semibold">{item.title}</h4>
+                    <p className="text-gray-600">{item.description}</p>
+                  </div>
+                </div>
+              </FadeInOnScroll>
+            </li>
+          );
+        })}
+      </ul>
     </div>
   );
-}
+};
+
+const skills = [
+  "Social Media Marketing",
+  "Facebook Ads",
+  "On-page SEO",
+  "Google Tag Manager",
+  "Google Analytics",
+  "Digital Marketing",
+  "SEO",
+  "Social Media Management",
+  "Wordpress",
+  "Shopify",
+  "Custom Web Development",
+  "Google Ads",
+  "UI/UX",
+];
+
+const characteristics = [
+  {
+    id: 1,
+    title: "Top Rated",
+    icon: <Star />,
+    description:
+      "Top Rated seller are individually selected by Fiverr after meeting specific bench and services",
+  },
+  {
+    id: 2,
+    title: "Buyers Keep Returning",
+    icon: <Trophy />,
+    description: "Yeatiq has an exceptional numbers of returning buyers",
+  },
+  {
+    id: 3,
+    title: "Highly Responsive",
+    icon: <Zap />,
+    description: "Known for exceptionally quick replies",
+  },
+];