Merge pull request #2 from berat/develop

added about, how it works, price, faq and customized footer
berat · Feb 24, 2024 · 3687274 · 3687274
2 parents c852cff + c778b3e
commit 3687274
Show file tree

Hide file tree

Showing 15 changed files with 343 additions and 25 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -2,3 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+div, p {
+  animation: ease-in-out animate 0.2s;
+}
+
+@keyframes animate {
+  from {
+    opacity: 0.4;
+  }
+
+  to {
+    transform: 1;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,7 +4,6 @@ import { Inter } from "next/font/google";
 // config
 import config from "@/config/general";
 // components
-import Footer from "@/components/Footer";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -24,7 +23,6 @@ export default function RootLayout({
       <body className={inter.className + " bg-gray"}>
         {children}
         <Analytics />
-        <Footer />
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,11 +1,15 @@
-import Header from "@/components/Header";
-import Hero from "@/components/Hero";
+import { About, Hero, Header, Price, Faq, HowWorks, Footer } from "@/components";
 
 export default function Home() {
   return (
-    <main className="lg:mt-20 lg:mx-20 lg:p-12 bg-white mt-4 mx-4 p-8 rounded">
+    <main className="lg:mt-20 lg:mx-20 lg:p-12 bg-white mt-4 mx-4 p-8 mb-24 rounded">
       <Header />
       <Hero />
+      <About />
+      <HowWorks />
+      <Price />
+      <Faq />
+      <Footer />
     </main>
   );
 }
diff --git a/components/About.tsx b/components/About.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import config from "@/config/general";
+
+const About = () => {
+  return (
+    <div className="mt-16 xl:mt-0 flex lg:flex-row flex-col justify-between gap-4 mb-24">
+      {config.contents.about.map((item) => (
+        <div
+          key={item.id}
+          className="bg-grayBackground w-full lg:w-1/3 px-8 py-7 rounded flex flex-col items-start gap-3"
+        >
+          <span>{item.emoji}</span>
+          <h3 className="text-xl font-semibold">{item.title}</h3>
+          <p className="text-base font-normal">{item.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default About;
diff --git a/components/Atoms/Title.tsx b/components/Atoms/Title.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+interface TitleProps {
+  label: string;
+}
+
+const Title: React.FC<TitleProps> = ({ label }) => {
+  return (
+    <div className="relative center w-fit mx-auto mb-16">
+      <span className="absolute mw-[150%] h-[5px] bg-primary rounded top-3 -left-1 -right-1 z-10" />
+      <h2 className="text-xl xl:text-2xl font-semibold uppercase relative z-20">{label}</h2>
+    </div>
+  );
+};
+export default Title;
diff --git a/components/Atoms/index.ts b/components/Atoms/index.ts
@@ -0,0 +1 @@
+export { default as Title } from './Title'
diff --git a/components/Faq.tsx b/components/Faq.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import Image from "next/image";
+import { Title } from "./Atoms";
+import config from "@/config/general";
+import { useState } from "react";
+
+const Faq = () => {
+  const [activeQuestion, setActiveQuestion] = useState(0);
+
+  return (
+    <div className="mb-24">
+      <Title label="Frequently Asked Questions" />
+      <div className="flex gap-8 justify-center">
+        <div className="w-11/12 xl:w-5/12 flex flex-col gap-4">
+          {config.contents.faq.map((item, index) => {
+            return (
+              <div
+                key={index}
+                onClick={() => setActiveQuestion(index)}
+              >
+                <div className="flex items-center gap-2 cursor-pointer">
+                  <h4 className="flex-1 font-semibold text-lg text-black">
+                    {index + 1}. {item.question}
+                  </h4>
+                  <Image alt="" src={"/down.svg"} width={12} height={6} />
+                </div>
+                {activeQuestion === index && (
+                  <p className="text-base text-activeButton w-full xl:w-[550px] pt-4 mb-2">
+                    {item.answer}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Faq;
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,23 +1,61 @@
+"use client";
+import config from "@/config/general";
+import Image from "next/image";
 import Link from "next/link";
 
 const Footer = () => {
   return (
-    <footer className="lg:mt-8 lg:mx-16 lg:mb-20 lg:px-12 px-8 py-4 text-black">
-      © 2023 -
-      <Link
-        href="https://twitter.com/beratbozkurt0/status/1699164095994372577"
-        passHref
-        legacyBehavior
-      >
-        <a
-          target="_blank"
-          className="underline underline-offset-2"
-          rel="noopener noreferrer"
-        >
-          #buildinpublic
-        </a>
-      </Link>
-    </footer>
+    <div className="mb-15">
+      <div className="bg-grayBackground rounded-md">
+        <div className="w-11/12 xl:w-[1050px] mx-auto flex md:flex-row flex-col justify-between md:gap-0 gap-12 items-start py-16">
+          <div className="flex flex-col gap-2">
+            <Image
+              src={"/logo.svg"}
+              width={180}
+              height={60}
+              alt={config.title}
+            />
+            <p className="w-[300px] text-activeButton">{config.description}</p>
+          </div>
+          <div>
+            <span className="uppercase text-[#8d8d8d] font-semibold">
+              Links
+            </span>
+            <ul className="font-medium flex flex-col gap-2 mt-4 text-activeButton">
+              <li>How it works</li>
+              <li>Price</li>
+              <li>FAQ</li>
+              <li>Support</li>
+            </ul>
+          </div>
+          <div>
+            <span className="uppercase text-[#8d8d8d] font-semibold">
+              Legal
+            </span>
+            <ul className="font-medium flex flex-col gap-2 mt-4 text-activeButton">
+              <li>Terms of services</li>
+              <li>Privact policy</li>
+            </ul>
+          </div>
+        </div>
+        <div className="w-11/12 xl:w-[1050px] mx-auto pb-16">
+          © 2023 -
+          <Link
+            href="https://twitter.com/beratbozkurt0/status/1699164095994372577"
+            passHref
+            legacyBehavior
+          >
+            <a
+              target="_blank"
+              className="underline underline-offset-2"
+              rel="noopener noreferrer"
+            >
+              #buildinpublic
+            </a>
+          </Link>
+        </div>
+      </div>
+    </div>
   );
 };
 

diff --git a/components/HowWorks.tsx b/components/HowWorks.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import Image from "next/image";
+import { Title } from "./Atoms";
+import config from "@/config/general";
+import { useState } from "react";
+
+const HowWorks = () => {
+  const [activeTitle, setActiveTitle] = useState(0);
+
+  return (
+    <div className="mb-24">
+      <Title label="How it works" />
+      <div className="flex xl:flex-row flex-col gap-8 justify-center">
+        <Image
+          src="/hero.jpg"
+          alt="hero"
+          width={460}
+          height={330}
+          className="xl:w-[460px] w-full xl:order-1 order-2 rounded-sm h-max"
+        />
+        <div className="xl:order-2 order-1 flex flex-col gap-5">
+          {config.contents.howWorks.map((item, index) => {
+            return (
+              <div key={index} onClick={() => setActiveTitle(index)}>
+                <div className="flex items-center gap-2 cursor-pointer">
+                  <h4 className="flex-1 font-semibold text-lg text-black">
+                    {index + 1}. {item.title}
+                  </h4>
+                  <Image alt="" src={"/down.svg"} width={12} height={6} />
+                </div>
+                {activeTitle === index && (
+                  <p className="text-base text-activeButton w-[550px] pt-4 mb-2">
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HowWorks;
diff --git a/components/Price.tsx b/components/Price.tsx
@@ -0,0 +1,39 @@
+"use client";
+import config from "@/config/general";
+
+const Price = () => {
+  return (
+    <div className="mb-24">
+      <div className="bg-grayBackground rounded-md">
+        <div className="w-11/12 xl:w-[1050px] mx-auto py-16">
+          <p className="font-light text-2xl text-activeButton text-center">
+            {config.contents.price.description}
+          </p>
+          <div className="flex xl:flex-row flex-col w-fit mx-auto gap-12 items-center mt-12">
+            <ul className="flex flex-col gap-1">
+              {config.contents.price.advantages.map((advantage, index) => (
+                <li
+                  key={index}
+                  className="flex items-center gap-2 pl-2 font-normal text-lg text-activeButton"
+                >
+                  <div className="w-[5px] h-[5px] bg-primary rounded" />
+                  {advantage}
+                </li>
+              ))}
+            </ul>
+            <div className="flex flex-col items-center gap-5">
+              <span className="text-4xl font-bold text-activeButton">
+                {config.contents.price.price}/month
+              </span>
+              <button className="bg-primary rounded-md py-4 px-16 text-black uppercase font-medium text-base">
+                Get started
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Price;
diff --git a/components/index.ts b/components/index.ts
@@ -0,0 +1,8 @@
+export { default as About } from './About'
+export { default as Footer } from './Footer'
+export { default as Form } from './Form'
+export { default as Header } from './Header'
+export { default as Hero } from './Hero'
+export { default as HowWorks } from './HowWorks'
+export { default as Price } from './Price'
+export { default as Faq } from './Faq'