update folder structure

src/App.tsx

@@ -6,7 +6,7 @@ import { AppStateProvider } from "./states/AppState";
 
 import Home from "./pages/Home";
 import Scanner from "./pages/Scanner";
-import Backtest from "./pages/Backtest";
+import Details from "./pages/Details";
 import Contact from "./pages/Contact";
 
 const queryClient = new QueryClient();
@@ -18,7 +18,7 @@ function App(): React.ReactElement {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/scanner" element={<Scanner />} />
-            <Route path="/scanner/:backtest" element={<Backtest />} />
+            <Route path="/scanner/:backtest" element={<Details />} />
             <Route path="/contact" element={<Contact />} />
           </Routes>
         </BrowserRouter>

src/components/About.tsx

@@ -1,10 +1,10 @@
-import { Link } from "react-router-dom";
+import { HashLink as Link } from "react-router-hash-link";
 
 const About = () => {
   return (
     <section
       id="about-us"
-      className="relative z-10 bg-white dark:bg-darkBlue1 h-screen flex"
+      className="relative z-10 flex h-screen bg-gray-50 dark:bg-darkBlue1"
     >
       <div className="container mx-auto flex flex-col items-center px-6 pt-24 pb-32 md:flex-row md:space-x-16">
         <div className="w-2/3 md:w-1/2">
@@ -14,26 +14,29 @@ const About = () => {
         <div className="flex flex-col items-start md:w-1/2">
           <div className="flex flex-col space-y-5">
             <h4 className="max-w-md text-xl font-bold md:text-4xl">About Us</h4>
-            <p className="text-md md:text-lg text-justify">
+            <p className="text-md text-justify md:text-lg">
               The Algorithmic Trading Society of Turkey was founded in March
               2020 with the aim of bringing people together to develop their
               understanding of the application algorithms in a financially
               driven context.
             </p>
 
-            <p className="text-md md:text-lg text-justify">
+            <p className="text-md text-justify md:text-lg">
               We hope to build a community of Algo traders that can help improve
               one another.
             </p>
           </div>
 
-          <div className="blok mt-4">
-            <Link to="/scanner" className="border-b border-accentCyan text-accentCyan">
-              Scanner
+          <div className="blok mt-2">
+            <Link
+              to="/#work"
+              className="border-b border-accentCyan text-accentCyan"
+            >
+              How We Work
               <img
                 src="./assets/images/icon-arrow.svg"
                 alt=""
-                className="inline pb-1 ml-2"
+                className="ml-2 inline pb-1"
               />
             </Link>
           </div>

src/components/Info.tsx

@@ -0,0 +1,25 @@
+const Info: React.FC = () => {
+  return (
+    <div className="container mx-auto px-6 pt-12 pb-80 md:pb-96">
+      <div className="container mx-auto max-w-4xl space-y-6 rounded-lg bg-gray-200 p-10 px-6 text-center dark:bg-darkBlue1 md:px-16">
+        <p className="text-md text-justify md:text-lg">
+          Please do not hesitate to contact us, if you want to learn more about
+          simple trading strategies or more complicated statistical arbitrage of
+          stocks. Regardless of whether you are a novice to trading or a veteran
+          Quant, all are welcomed to be part of the society.
+        </p>
+        <p className="text-md text-justify md:text-lg">
+          {" "}
+          <img
+            src="./assets/images/icon-email.svg"
+            alt=""
+            className="scale-10 mr-2 inline pb-1 invert dark:invert-0"
+          />
+          Email: [email protected]
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Info;

src/components/Layout/Footer.tsx

@@ -1,7 +1,7 @@
 import { HashLink as Link} from 'react-router-hash-link'
 const Footer: React.FC = () => {
   return (
-    <div className="bg-darkBlue2 text-white">
+    <div className="bg-darkBlue2 text-white relative z-10">
       <div className="container mx-auto px-5 pt-12 pb-10">
         <div className="flex flex-col justify-between space-y-24 md:flex-row md:space-y-0">
           <div className="flex items-center space-x-3">
@@ -16,12 +16,12 @@ const Footer: React.FC = () => {
           </div>
 
           <div className="flex flex-col space-y-10 text-xl md:flex-row md:space-x-20 md:space-y-0 md:text-base">
-            <div className="flex flex-col space-y-3">
+            <div className="flex flex-col space-y-3 f-nav">
               <Link to="/#navbar">Home</Link>
               <Link to="/#about-us">About Us</Link>
-              <Link to="/#features">Features</Link>
+              <Link to="/#work">How We Work</Link>
             </div>
-            <div className="flex flex-col space-y-3">
+            <div className="flex flex-col space-y-3 f-nav">
               <Link to="/scanner#scanner">Scanner</Link>
               <Link to="/contact">Contact</Link>
             </div>

src/components/Cover.tsx → src/components/UI/Cover.tsx

@@ -5,10 +5,10 @@ type CoverProps = {
 
 const Cover: React.FC<CoverProps> = ({header,description}) => {
     return(
-        <div className="flex justify-center items-center w-full h-96 bg-scanner-cover bg-center bg-no-repeat">
+        <div className="flex justify-center items-center w-full h-96 dark:bg-scanner-cover bg-scanner-cover-light bg-center bg-no-repeat">
         <div className="text-center space-y-5">
         <h1 className="bold text-4xl md:text-6xl mx-7">{header}</h1>
-        <p className="px-5 text-lg md:text-xl text-darkCyan">{description}</p>
+        <p className="px-5 text-lg font-bold md:text-xl text-darkCyan dark:">{description}</p>
         </div>
     </div>
     )

src/components/Work.tsx

@@ -1,14 +1,16 @@
+import { HashLink as Link } from "react-router-hash-link";
+
 const Work: React.FC = () => {
   return (
-    <section id="work" className="bg-gray-50 pt-12 dark:bg-darkBlue1">
+    <section
+      id="work"
+      className="relative z-10 bg-white pt-12 dark:bg-darkBlue"
+    >
       <div className="container-mx-auto px-6 pb-32">
         <div className="flex flex-col space-y-24 text-center md:flex-row md:space-y-0">
           <div className="flex flex-col items-center space-y-2 md:w-1/2">
             <div className="mb-6 flex h-24 items-center justify-center">
-              <img
-                src="./assets/images/icon-team.svg"
-                alt=""
-              />
+              <img src="./assets/images/icon-team.svg" alt="" />
             </div>
             <h3 className="text-xl font-bold">Grow Together</h3>
             <p className="max-w-md">
@@ -56,7 +58,18 @@ const Work: React.FC = () => {
               algorithmic strategtic results. You can then download the code and
               run it on your own machine. You can also use the code as a
               starting point for your own algorithmic trading strategy. To see
-              the scanner in action, click the button
+              the scanner in action,{" "}
+              <Link
+                to="/scanner#scanner"
+                className="border-b border-accentCyan text-accentCyan"
+              >
+                Click
+                <img
+                  src="./assets/images/icon-arrow.svg"
+                  alt=""
+                  className="ml-2 inline pb-1"
+                />
+              </Link>
             </p>
           </div>
         </div>

src/components/Hero.tsx → src/components/hero/Hero.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import Typed from "react-typed";
-import Particle from "./Particle";
 
 const Hero: React.FC = () => {
   return (
     <section id="hero">
-      <div className="container mx-auto mt-[-96px] flex h-screen w-full max-w-4xl flex-col justify-center text-center">
+      <div className="container mx-auto mt-[-6rem] flex h-screen w-full max-w-4xl flex-col justify-center text-center">
         <p className="p-2 font-bold text-darkCyan">ALGOTRASOFT</p>
         <h1 className="text-4xl font-bold sm:text-6xl md:py-6">
           THE NEXT GENERATION

src/components/Particle.tsx → src/components/hero/Particle.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import type { Container, Engine } from "tsparticles-engine";
 import Particles from "react-tsparticles";
 import { loadFull } from "tsparticles";
-import useDarkSide from "../hooks/useDarkSide";
+import useDarkSide from "../../hooks/useDarkSide";
 
 const Particle = (props: any) => {
   const particlesInit = useCallback(async (engine: Engine) => {

src/components/BarGraph.tsx → src/components/results/BarChart.tsx

@@ -1,9 +1,9 @@
-type grapProps = {
+type barProps = {
     description: string;
     value: number;
 }
 
-const BarGraph:React.FC<grapProps>  = ({description, value}) => {
+const BarChart:React.FC<barProps>  = ({description, value}) => {
     const barColor = value < 0 ? "bg-red-500" : "bg-darkCyan";
 
     return(
@@ -29,4 +29,4 @@ const BarGraph:React.FC<grapProps>  = ({description, value}) => {
     )
 }
 
-export default BarGraph;
+export default BarChart;

src/components/results/ResultDetails.tsx

@@ -0,0 +1,40 @@
+import { useNavigate } from "react-router";
+import BarGraph from "./BarChart";
+import {BacktestResponseResult} from "../types";
+
+const Details: React.FC<BacktestResponseResult> = ({data}) => {
+  const navigate = useNavigate();
+
+  const goBack = () => navigate(-1);
+
+  return (
+    <div className="container mx-auto mt-[-5rem] w-full px-6 md:max-w-2xl">
+      <div className="flex flex-col justify-between space-y-4 rounded-lg bg-gray-100 p-10 dark:bg-darkBlue3">
+        <BarGraph
+          description="1 Month Result"
+          value={data.return_monthly_1}
+        />
+        <BarGraph
+          description="3 Month Result"
+          value={data.return_monthly_3}
+        />
+        <BarGraph
+          description="6 Month Result"
+          value={data.return_monthly_6}
+        />
+        <BarGraph
+          description="1 Year Result"
+          value={data.return_yearly_1}
+        />
+      </div>
+      <button
+        className="text-md mt-2 w-20 cursor-pointer rounded-xl bg-gray-100 p-3 text-center hover:bg-darkCyan dark:bg-darkBlue3 dark:hover:bg-accentCyan md:text-lg"
+        onClick={goBack}
+      >
+        Back
+      </button>
+    </div>
+  );
+};
+
+export default Details;

src/components/ResultItem.tsx → src/components/results/ResultItem.tsx

@@ -1,12 +1,12 @@
-import Loader from "./Loader";
+import Loader from "../UI/Loader";
 import { Link } from "react-router-dom";
-import useFindBacktest from "../hooks/useFindBacktest";
+import useFindBacktest from "../../hooks/useFindBacktest";
 
-type BacktestCardProps = {
+type BacktestProps = {
   id: number;
 };
 
-const BacktestCard: React.FC<BacktestCardProps> = ({ id }) => {
+const Item: React.FC<BacktestProps> = ({ id }) => {
   // in the firebase database, the id's start at 1, but the array index starts at 0
   const backtest = useFindBacktest(id - 1);
 
@@ -57,4 +57,4 @@ const BacktestCard: React.FC<BacktestCardProps> = ({ id }) => {
   );
 };
 
-export default BacktestCard;
+export default Item;

src/components/results/ResultList.tsx

@@ -0,0 +1,35 @@
+import { InView } from "react-intersection-observer";
+import { MarketResponseResult } from "../../@types/api";
+
+import Item from "./ResultItem";
+import { useApp } from "../../states/AppState";
+const Scanner: React.FC = () => {
+  const { getStocks, filteredStocks } = useApp();
+
+
+  return (
+    <ul className="mt-8 flex max-h-screen w-full flex-col space-y-8 overflow-y-scroll scrollbar scrollbar-track-gray-300 scrollbar-thumb-darkCyan dark:scrollbar-track-white">
+      {filteredStocks?.map((backtest: MarketResponseResult) => (
+        <InView
+          key={backtest.id}
+          rootMargin="200px 0px"
+          threshold={0.3}
+          triggerOnce={true}
+        >
+          {({ inView, ref }) => {
+            return inView ? (
+              <Item key={backtest.id} id={backtest.id} />
+            ) : (
+              <div
+                ref={ref}
+                className="h-72 w-full rounded-lg bg-gray-100 dark:bg-darkBlue3"
+              ></div>
+            );
+          }}
+        </InView>
+      ))}
+    </ul>
+  );
+};
+
+export default Scanner;

src/components/results/Search.tsx

@@ -0,0 +1,24 @@
+import { useApp } from "../../states/AppState";
+
+const Search: React.FC = () => {
+  const { searchQuery, setSearchQuery } = useApp();
+
+  return (
+    <div className="px-6 md:px-0">
+      <div className="container mx-auto max-w-4xl space-y-6 rounded-lg bg-gray-200 p-10 px-6 text-center dark:bg-darkBlue1 md:px-16">
+        <h5 className="text-2xl font-bold">Search</h5>
+        <div className="w-full md:flex-1">
+          <input
+            type="text"
+            className="w-full rounded-full px-10 py-3 focus:outline-none dark:text-black"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Enter Stock Name"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Search;

src/index.css

@@ -2,8 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-.ficon:hover {
+.ficon:hover, .f-nav a:hover {
     filter: invert(80%) sepia(37%) saturate(7048%) hue-rotate(132deg)
       brightness(105%) contrast(104%);
+      color:  #202a3c,
   }