aminblm · aminblm · May 24, 2023 · Jun 19, 2023 · Jun 19, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,16 +10,30 @@
   },
   "dependencies": {
     "@types/node": "20.1.1",
-    "@types/react": "18.2.6",
+    "@types/react": "^18.2.6",
     "@types/react-dom": "18.2.4",
     "autoprefixer": "10.4.14",
     "axios": "^1.4.0",
     "next": "13.4.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.8.0",
+    "react-multi-carousel": "^2.8.2",
+    "react-player": "^2.12.0",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "tailwindcss": "3.3.2",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "styled-components": "^5.3.5"
+  },
+  "devDependencies": {
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-slick": "^0.23.10",
+    "@types/styled-components": "^5.1.25",
+    "typescript": "^4.7.4"
   },
   "devDependencies": {
     "json-server": "^0.17.3"

diff --git a/public/1682697077921_1000x1000 (1).webp b/public/1682697077921_1000x1000 (1).webp
diff --git a/public/atlantic_logo.svg b/public/atlantic_logo.svg
diff --git a/public/fast_company_logo.png b/public/fast_company_logo.png
diff --git a/public/featured_prompt_1.webp b/public/featured_prompt_1.webp
diff --git a/public/featured_prompt_2.webp b/public/featured_prompt_2.webp
diff --git a/public/featured_prompt_3.webp b/public/featured_prompt_3.webp
diff --git a/public/featured_prompt_4.webp b/public/featured_prompt_4.webp
diff --git a/public/ft_logo.png b/public/ft_logo.png
diff --git a/public/logo_200_png.png b/public/logo_200_png.png
diff --git a/public/tc_logo2.png b/public/tc_logo2.png
diff --git a/public/verge_logo.svg b/public/verge_logo.svg
diff --git a/public/wired_logo.png b/public/wired_logo.png
diff --git a/public/wsj_logo.png b/public/wsj_logo.png
diff --git a/public/yahoo_finance_logo.png b/public/yahoo_finance_logo.png
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -35,6 +35,7 @@ export default function RootLayout({
       <body className="center">
         <Header />
         <main>
+
           {children}
         </main>
         <Footer />

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,58 @@
+import About from "@/components/About";
+import CustomButton from "@/components/CustomButton";
+import EarnFromPrompt from "@/components/EarnFromPrompt";
+import FeaturedCompany from "@/components/FeaturedCompany";
+import FeaturedPrompt from "@/components/FeaturedPrompt";
+import Footer from "@/components/Footer";
+import GenerateImage from "@/components/GenerateImage";
+import HeroSection from "@/components/HeroSection";
+import HotestPrompt from "@/components/HotestPrompt";
+import MostPopularPromptsMonthly from "@/components/MostPopularPromptsMonthly";
+import MostPopularPrompt from "@/components/MostPopularPromptsWeekly";
+import NewestDALLEPrompt from "@/components/NewestDALLEPrompt";
+import NewestGptPrompt from "@/components/NewestGptPrompt";
+import NewestMidJourneyPrompt from "@/components/NewestMidJourneyPrompt";
+import NewestPrompt from "@/components/NewestPrompt";
+import NewestStableDiffusionPrompt from "@/components/NewestStableDiffusionPrompt";
+
 export default function Home() {
   return (
     <div className="">
-      home
+      <div className=" mx-auto h-[88vh] ">
+        <HeroSection />
+        <FeaturedCompany />
+
+        <div>
+          <FeaturedPrompt />
+          <HotestPrompt />
+          <NewestPrompt />
+          <CustomButton />
+        </div>
+        <About />
+        <div>
+          <MostPopularPrompt />
+          <MostPopularPromptsMonthly />
+          <CustomButton />
+        </div>
+
+        <EarnFromPrompt />
+        <div>
+          <NewestMidJourneyPrompt />
+          <NewestGptPrompt />
+          <CustomButton />
+        </div>
+
+        <GenerateImage />
+        <div>
+          <NewestDALLEPrompt />
+          <NewestStableDiffusionPrompt />
+          <CustomButton />
+        </div>
+
+        <div>
+          <Footer />
+        </div>
+      </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+const About = () => {
+  return (
+    <div className="mb-10">
+      <div className="flex flex-col items-center justify-center">
+        <h1 className="text-5xl  leading-tight font-medium pt-20 pb-8">
+          What is PromptBase?
+        </h1>
+
+        <div className=" text-center text-[#FFFFFF] leading-8">
+          <span className="block">
+            Prompts are becoming a powerful new way of programming AI models
+            like DALL·E, Midjourney & GPT.
+          </span>
+          <span className="block">
+            However, it's hard to find good quality prompts online.
+          </span>
+          <span className="block">
+            If you're good at prompt engineering, there's also no clear way to
+            make a living from your skills.
+          </span>
+          <span className="block">
+            PromptBase is a marketplace for buying and selling quality prompts
+            that produce the best results, and save you money on API costs.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default About;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+interface CardProps {
+  item: {
+    imageUrl?: string;
+    title?: string;
+    type?: string;
+    icon?: string;
+  };
+}
+
+
+
+const Card = ({ item }: CardProps) => {
+  const { imageUrl, title, type, icon } = item;
+
+  return (
+    <div>
+      <div className="rounded bg-black text-white overflow-hidden shadow-md hover:-translate-y-1 transition-all duration-700 relative">
+        <img src={imageUrl} alt="" className="w-full object-cover h-32" />
+        <div className="m-2 ">
+          <span className=" font-medium text-sm">{title}</span>
+        </div>
+        <div className="bg-[#454566] text-white rounded font-medium p-1 text-sm m-2 absolute top-0">
+          <span>{`${icon} ${type}`}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/CarouselCard.tsx b/src/components/CarouselCard.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import Heading from "./Heading";
+
+interface CardProps {
+  item: {
+    imageUrl?: string;
+    title?: string;
+    type?: string;
+    icon?: string;
+  };
+}
+
+
+const CarouselCard = ({ item }: CardProps) => {
+  const { imageUrl, title, type, icon } = item;
+  console.log(item);
+
+
+  return (
+    <div className="py-4  px-2 cursor-pointer">
+      <div className="rounded bg-black text-white overflow-hidden shadow-md hover:-translate-y-1 transition-all duration-700 relative">
+        <img src={imageUrl} alt="" className="w-full object-cover h-32" />
+        <div className="m-2 flex items-center justify-between">
+          <span className=" font-medium text-sm">{title}</span>
+          <span>$3.99</span>
+        </div>
+        <div className="bg-[#454566] text-white rounded font-medium p-1 text-sm m-2 absolute top-0">
+          <span>{`${icon} ${type}`}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CarouselCard;
diff --git a/src/components/CustomButton.tsx b/src/components/CustomButton.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+const CustomButton = () => {
+  return (
+    <div>
+      <div className="flex justify-center text-center">
+        <button className="h-10 bg-white text-pbr-darkpurple w-64 rounded-md font-medium text-2xl">
+          Browse Marketplace
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CustomButton;
diff --git a/src/components/CustomSlider.tsx b/src/components/CustomSlider.tsx
@@ -0,0 +1,95 @@
+"use client";
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { featuredData } from "@/mock/data";
+import Heading from "./Heading";
+
+interface SampleArrowProps {
+  className?: string;
+  style?: React.CSSProperties;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+const SampleArrow = (props: SampleArrowProps) => {
+  const { className, style, onClick } = props;
+  return (
+    <div
+      className={className}
+      style={{ ...style, display: "block", background: "" }}
+      onClick={onClick}
+    />
+  );
+};
+
+const CustomSlider = () => {
+  const settings = {
+    infinite: false,
+    speed: 500,
+    slidesToShow: 6,
+    slidesToScroll: 4,
+    initialSlide: 0,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 3,
+          slidesToScroll: 3,
+          infinite: true,
+          dots: true,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          initialSlide: 2,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+
+  return (
+    <div className="mx-8">
+      <Heading title="Newest DALL·E Prompts" />
+      <Slider
+        {...settings}
+        nextArrow={<SampleArrow />}
+        prevArrow={<SampleArrow />}
+      >
+        {featuredData.map((item, index) => (
+          <div
+            className="py-4  px-2 cursor-pointer overflow-hidden"
+            key={index}
+          >
+            <div className="rounded bg-black text-white overflow-hidden shadow-md hover:-translate-y-1 transition-all duration-700 relative">
+              <img
+                src={item?.imageUrl}
+                alt=""
+                className="w-full object-cover h-32"
+              />
+              <div className="m-2 flex items-center justify-between">
+                <span className="font-medium text-sm">{item?.title}</span>
+                <span>$3.99</span>
+              </div>
+              <div className="bg-[#454566] text-white rounded font-medium p-1 text-sm m-2 absolute top-0">
+                <span>{`${item?.icon} ${item?.type}`}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </Slider>
+    </div>
+  );
+};
+
+export default CustomSlider;
diff --git a/src/components/EarnFromPrompt.tsx b/src/components/EarnFromPrompt.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+
+
+const EarnFromPrompt = () => {
+  return (
+    <div>
+      <div className="flex gap-10 max-w-container mx-12 mt-16 mb-8">
+        <div className=" flex-1  w-full flex flex-col gap-8">
+          <h1 className=" text-5xl  leading-tight font-medium">
+            Generate images directly <br /> in PromptBase
+          </h1>
+          <p className=" text-[#FFFFFF] leading-normal font-normal">
+            <span className="block text-[16px] leading-normal">
+              Start prompt engineering instantly within PromptBase using Stable
+              Diffusion.
+            </span>
+
+            <span className="block leading-normal text-[16px]">
+              {" "}
+              Craft prompts and sell them on the marketplace.
+            </span>
+            <span className="block leading-normal text-[16px]">
+              {" "}
+              Get 5 free generation credits every day.
+            </span>
+          </p>
+
+          <div className="">
+            <button className="h-12 bg-white text-bodyColor w-48 rounded-md font-medium text-2xl">
+              Sell a prompt
+            </button>
+          </div>
+        </div>
+        <div className="flex-1 w-full">
+          {/* <ReactPlayer controls url="https://youtu.be/QORw7FJ5lho" /> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EarnFromPrompt;