predictcoin · nonseodion · Dec 9, 2021 · Dec 9, 2021 · Dec 9, 2021 · Dec 10, 2021
diff --git a/.env.example b/.env.example
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,16 +4,28 @@
         "Alfreds",
         "Anders",
         "assests",
+        "babyswap",
         "Berglund",
         "Berglunds",
+        "bsctimes",
+        "callout",
+        "chartjs",
         "COINGEC",
+        "dappcom",
+        "dersetfinance",
+        "desertfinance",
         "Futterkiste",
         "logoblue",
         "Marketo",
+        "nomics",
         "onlaptop",
         "predictcoin",
+        "registerables",
         "roadmap",
         "snabbköp",
-        "sparkline"
+        "sparkline",
+        "stakers",
+        "techrate",
+        "usecase"
     ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,15 +6,22 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^17.0.8",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
     "axios": "^0.24.0",
+    "bootstrap": "^5.1.3",
+    "chart.js": "^3.6.2",
     "react": "^17.0.2",
-    "react-bootstrap": "^2.0.2",
+    "react-bootstrap": "^2.0.3",
+    "react-chartjs-2": "^4.0.0",
+    "react-charts": "^2.0.0-beta.7",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
-    "react-table": "^7.7.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -40,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "typescript": "^4.5.4"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -8,17 +8,74 @@
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />
   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <title>React App</title>
+
+  <!-- Jquery logo slider in use -->
+  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
+
+  <!-- Font awesome in use -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+  <!-- Bootstrap cdn in use -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-  <title>React App</title>
+
+  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
+  <!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> -->
 </head>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
 
+
+  <script>
+    /* 
+      const allSections = document.querySelectorAll('.section');
+    const revealSection = function (entries, observer) {
+      const [entry] = entries;
+
+      if (!entry.isIntersecting) return;
+      entry.target.classList.remove('section--hidden');
+      observer.unobserve(entry.target);
+    };
+
+    const sectionObserver = new IntersectionObserver(revealSection, {
+      root: null,
+      threshold: 0.15,
+    });
+
+    allSections.forEach(function (section) {
+      sectionObserver.observe(section);
+      section.classList.add('section--hidden');
+    });
+    */
+
+    $(document).ready(function () {
+      $('.customer-logos').slick({
+        slidesToShow: 6,
+        slidesToScroll: 1,
+        autoplay: true,
+        autoplaySpeed: 1500,
+        arrows: false,
+        dots: false,
+        pauseOnHover: false,
+        responsive: [{
+          breakpoint: 768,
+          settings: {
+            slidesToShow: 4
+          }
+        }, {
+          breakpoint: 520,
+          settings: {
+            slidesToShow: 3
+          }
+        }]
+      });
+    });
+  </script>
 </body>
 
 </html>
diff --git a/src/App.js → src/App.tsx b/src/App.js → src/App.tsx
@@ -1,9 +1,7 @@
 import Home from "./views/Home/Home";
 
 function App() {
-  return (
-    <Home />
-  );
+  return <Home/>;
 }
 
 export default App;
diff --git a/src/MOCK_DATA.json b/src/MOCK_DATA.json
diff --git a/src/bootstrap.min.css b/src/bootstrap.min.css
diff --git a/src/columns.js → src/columns.ts b/src/columns.js → src/columns.ts
diff --git a/src/index.css b/src/index.css
@@ -3,15 +3,13 @@
 :root {
   --font-family: "Poppins", sans-serif;
 
-
   --gradient-launch: linear-gradient(133deg, #2449e8, #021a88);
   --gradient-hover: rgba(2, 26, 136, 0.5);
   --gradient-bg: rgba(36, 73, 232, 0.5);
-  /* --gradient-bg: linear-gradient(133deg, #2449e8, #021a88); */
 
   --color-transparent: rgba(43, 63, 85, 0.5);
   --color-bg: #0e101f;
   --color-footer: #1f2134;
   --color-blog: #042c54;
   --color-text: #2e59f3;
-}
+}
diff --git a/src/index.js → src/index.tsx b/src/index.js → src/index.tsx
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/src/views/Home/FAQ/faq.css b/src/views/Home/FAQ/faq.css
@@ -0,0 +1,62 @@
+.ptc__faq {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  margin: 4rem 0;
+}
+
+.ptc__faq-heading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2rem 0;
+}
+
+.ptc__faq-heading h1 {
+  font-size: calc(1.375rem + 1.5vw);
+  font-weight: 700;
+  color: #1f2134;
+  padding-bottom: 20px;
+  text-align: center;
+}
+
+.ptc__heading-content button {
+  font-size: 1.5rem;
+  border-color: 1px solid #1f2134;
+}
+
+.ptc__heading-element button {
+  font-size: 1.5rem !important;
+  color: #fbfcff !important;
+  background-color: #1f2134 !important;
+  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
+  border-color: #1f2134;
+}
+
+.ptc__heading p {
+  font-size: 1.7rem;
+}
+
+.ptc__heading {
+  width: 80%;
+}
+
+.ptc__main-content {
+  font-size: 20px;
+}
+
+/* @media screen and (max-width: 490px) {
+  .ptc__faq-heading h1 {
+    font-size: 3rem;
+    margin-top: 5rem;
+  }
+} */
+
+@media screen and (max-width: 768px) {
+  .ptc__faq-heading h1 {
+    font-size: 4rem;
+    margin-top: 5rem;
+  }
+}
diff --git a/src/views/Home/FAQ/index.jsx b/src/views/Home/FAQ/index.jsx
diff --git a/src/views/Home/FAQ/index.tsx b/src/views/Home/FAQ/index.tsx
@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import "./faq.css";
+
+import { Accordion } from "react-bootstrap";
+
+const FAQ = () => {
+  const [activeId, setActiveId] = useState("0");
+
+  const toggleActive = (id: string) => {
+    if (activeId === id) {
+      setActiveId("");
+    } else {
+      setActiveId(id);
+    }
+
+    console.log(id);
+  };
+
+  return (
+    <div className="ptc__faq" id="faq">
+      <div className="ptc__faq-heading">
+        <h1>Frequently Asked Question</h1>
+      </div>
+
+      {/* Section 1 */}
+      <Accordion className="ptc__heading" defaultActiveKey="0" flush>
+        <Accordion.Item eventKey="1" onClick={() => toggleActive("1")}>
+          <Accordion.Header
+            className={
+              activeId === "1" ? "ptc__heading-element" : "ptc__heading-content"
+            }
+          >
+            What is the usecase of PRED?
+          </Accordion.Header>
+
+          <Accordion.Body>
+            <p className="ptc__main-content">
+              PRED is the governance token of Predictcoin and can be used to
+              stake and earn more PRED, as well as vote and predict the prices
+              of crypto assets.
+            </p>
+          </Accordion.Body>
+        </Accordion.Item>
+
+        {/* Section 2 */}
+        <Accordion.Item eventKey="2" onClick={() => toggleActive("2")}>
+          <Accordion.Header
+            className={
+              activeId === "2" ? "ptc__heading-element" : "ptc__heading-content"
+            }
+          >
+            How to predict the price of Crypto Assets?
+          </Accordion.Header>
+          <Accordion.Body>
+            <p className="ptc__main-content">
+              You can start predicting on crypto assets by gaining access to the
+              DApp, where you can stake & farm as well.
+            </p>
+          </Accordion.Body>
+        </Accordion.Item>
+
+        {/* Section 3 */}
+        <Accordion.Item eventKey="3" onClick={() => toggleActive("3")}>
+          <Accordion.Header
+            className={
+              activeId === "3" ? "ptc__heading-element" : "ptc__heading-content"
+            }
+          >
+            How to launch DApp?
+          </Accordion.Header>
+          <Accordion.Body>
+            <p className="ptc__main-content">
+              You can launch the DApp by clicking on the "Launch DApp" if you're
+              on desktop or the download icon at the top of this page if you're
+              on mobile.
+            </p>
+          </Accordion.Body>
+        </Accordion.Item>
+        <Accordion.Item eventKey="4" onClick={() => toggleActive("4")}>
+          <Accordion.Header
+            className={
+              activeId === "4" ? "ptc__heading-element" : "ptc__heading-content"
+            }
+          >
+            What is the total supply of PRED?
+          </Accordion.Header>
+          <Accordion.Body>
+            <p className="ptc__main-content">
+              PRED is a deflationary token with a total capped supply of 100,000
+            </p>
+          </Accordion.Body>
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  );
+};
+
+export default FAQ;