create react app

2024-12-11 20:15:56 +03:00 · 2024-12-11 20:15:56 +03:00 · 9ec9189a18
commit 9ec9189a18
parent 5f55b68836
44 changed files with 18166 additions and 1359 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,70 @@
+node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/App.js
+++ b/App.js
@ -1,16 +0,0 @@
-import Home from "./components/Home";
-import { ThemeProvider as MuiThemeProvider } from "@mui/material";
-import createTheme from "./theme";
-import "./App.css";
-import useTheme from "./hooks/useTheme";
-
-function App() {
-  const { theme } = useTheme();
-  return (
-    <MuiThemeProvider theme={createTheme(theme)}>
-      <Home />
-    </MuiThemeProvider>
-  );
-}
-
-export default App;
--- a/README.md
+++ b/README.md
@ -1,12 +1,70 @@
-# quickabdest
+# Getting Started with Create React App

-quickabdest.com sitesinin değiştirilmiş versiyonudur
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

+## Available Scripts

-<!-- 
-değişiklikler:
- reklamlar kaldırıldı
- sitenin asıl sahibinin emekleri üzerinden maddi gelir kazanmak istemiyorum !
- abdestli kalma süresi 1 saate çıkarıldı !
- sürekli ses dosyası indirme ve fazla internet harcama problemi çözüldü ! 
-->
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
--- a/components/Home.js
+++ b/components/Home.js
@ -1,78 +0,0 @@
-import {
-  CssBaseline,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  Paper as MuiPaper,
-  Typography,
-} from "@mui/material";
-import NavMenu from "./Menu.js";
-import { useRoutes } from "react-router-dom/dist";
-import { routes } from "../routes";
-import React from "react";
-import styled from "@emotion/styled";
-import { spacing } from "@mui/system";
-import "./pages/Texts.css";
-import { useDetectAdBlock } from "adblock-detect-react";
-import BlockIcon from "@mui/icons-material/Block";
-// import Social from "./Social";
-
-const Paper = styled(MuiPaper)(spacing);
-
-const AppContent = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-`;
-
-const MainContent = styled(Paper)`
-  flex: 1;
-  background: ${(props) => props.theme.palette.background.default};
-  margin: 20px 20px;
-  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    flex: none;
-  }
-
-  .MuiPaper-root .MuiPaper-root {
-    box-shadow: none;
-  }
-`;
-export default function Home() {
-  const content = useRoutes(routes);
-  const adBlockDetected = useDetectAdBlock();
-
-  return (
-    <React.Fragment>
-      <CssBaseline />
-      <AppContent>
-        <NavMenu />
-        {/* <Social /> */}
-        <Grid
-          item
-          sx={{
-            marginLeft: { xs: 0, lg: 45 },
-            marginRight: { xs: 0, lg: 45 },
-            overflow: "hidden",
-          }}>
-          <Dialog open={adBlockDetected}>
-            <DialogTitle align="center">
-              <Typography variant="h1">
-                <BlockIcon color="error" />
-                Reklam Engelleyici Tespit Edildi!
-                <BlockIcon color="error" />
-              </Typography>
-            </DialogTitle>
-            <DialogContent>
-              <Typography variant="h4" align="center">
-                Lütfen reklam engelleyicinizi kapatıp sayfayı yenileyin.
-              </Typography>
-            </DialogContent>
-          </Dialog>
-          <MainContent>{content}</MainContent>
-        </Grid>
-      </AppContent>
-    </React.Fragment>
-  );
-}
--- a/components/Menu.js
+++ b/components/Menu.js
@ -1,143 +0,0 @@
-import * as React from "react";
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import Menu from "@mui/material/Menu";
-import MenuIcon from "@mui/icons-material/Menu";
-import Container from "@mui/material/Container";
-import MenuItem from "@mui/material/MenuItem";
-import { useNavigate } from "react-router-dom";
-import Settings from "./Settings";
-import { AppBar, Button, Grid, Toolbar } from "@mui/material";
-
-const pages = [
-  { name: "Abdest Hakkında", href: "/abdesthakkinda" },
-  { name: "Abdest Nasıl Alınır?", href: "/abdestnasilalinir" },
-  { name: "Abdestin Etimolojisi", href: "/abdestetimoloji" },
-  { name: "Abdestin Hükümleri", href: "/abdestinhukumleri" },
-  { name: "Abdestin Farzları", href: "/abdestinfarzlari" },
-  { name: "Abdestin Sünnetleri", href: "/abdestinsunnetleri" },
-  { name: "Abdestin Mehrukları", href: "/abdestinmehruklari" },
-  { name: "Abdesti Bozan Durumlar", href: "/abdestbozandurumlar" },
-  { name: "Engelli Abdesti Nasıl Alınır?", href: "/engelliabdesti" },
-  {
-    name: "Teyemmüm Abdesti Nasıl Alınır?",
-    href: "/teyemmumabdesti",
-  },
-];
-
-function NavMenu() {
-  const [anchorElNav, setAnchorElNav] = React.useState(null);
-  const navigate = useNavigate();
-
-  const handleOpenNavMenu = (event) => {
-    setAnchorElNav(event.currentTarget);
-  };
-
-  const handleCloseNavMenu = (href) => {
-    setAnchorElNav(null);
-    if (href) {
-      navigate(href);
-    }
-  };
-
-  return (
-    <React.Fragment>
-      <AppBar position="sticky" sx={{ zIndex: 99 }}>
-        <Container maxWidth="xxl">
-          <Toolbar disableGutters>
-            <Grid
-              item
-              width={300}
-              textAlign={"center"}
-              sx={{
-                display: { xs: "none", lg: "block" },
-              }}>
-              <Typography
-                variant="h6"
-                noWrap
-                component="a"
-                href="/"
-                sx={{
-                  fontFamily: "monospace",
-                  fontWeight: 700,
-                  letterSpacing: ".3rem",
-                  color: "inherit",
-                  textDecoration: "none",
-                }}>
-                quickabdest
-              </Typography>
-            </Grid>
-
-            <Box sx={{ flexGrow: 1, display: { xs: "flex", lg: "none" } }}>
-              <IconButton
-                size="large"
-                aria-label="account of current user"
-                aria-controls="menu-appbar"
-                aria-haspopup="true"
-                onClick={handleOpenNavMenu}
-                color="inherit">
-                <MenuIcon />
-              </IconButton>
-              <Menu
-                id="menu-appbar"
-                anchorEl={anchorElNav}
-                anchorOrigin={{
-                  vertical: "bottom",
-                  horizontal: "left",
-                }}
-                keepMounted
-                transformOrigin={{
-                  vertical: "top",
-                  horizontal: "left",
-                }}
-                open={Boolean(anchorElNav)}
-                onClose={handleCloseNavMenu}
-                sx={{
-                  display: { xs: "block", lg: "none" },
-                }}>
-                {pages.map((page) => (
-                  <MenuItem
-                    key={page.name}
-                    onClick={() => handleCloseNavMenu(page.href)}>
-                    <Typography textAlign="center">{page.name}</Typography>
-                  </MenuItem>
-                ))}
-              </Menu>
-            </Box>
-            <Typography
-              variant="h5"
-              noWrap
-              component="a"
-              href="/"
-              sx={{
-                mr: 2,
-                display: { xs: "flex", lg: "none" },
-                flexGrow: 1,
-                fontFamily: "monospace",
-                fontWeight: 700,
-                letterSpacing: ".5rem",
-                color: "inherit",
-                textDecoration: "none",
-              }}>
-              quickabdest
-            </Typography>
-            <Box sx={{ flexGrow: 4, display: { xs: "none", lg: "flex" } }}>
-              {pages.map((page) => (
-                <Button
-                  key={page.name}
-                  onClick={() => handleCloseNavMenu(page.href)}
-                  sx={{ color: "white", display: "block" }}
-                  noWrap>
-                  {page.name}
-                </Button>
-              ))}
-            </Box>
-            <Settings />
-          </Toolbar>
-        </Container>
-      </AppBar>
-    </React.Fragment>
-  );
-}
-export default NavMenu;
--- a/components/Settings.js
+++ b/components/Settings.js
@ -1,66 +0,0 @@
-import styled from "@emotion/styled";
-import { Switch } from "@mui/material";
-import useTheme from "../hooks/useTheme";
-
-const MaterialUISwitch = styled(Switch)(({ theme }) => ({
-  width: 50,
-  height: 25,
-  padding: 7,
-  "& .MuiSwitch-switchBase": {
-    margin: 1,
-    padding: 0,
-    transform: "translateX(6px)",
-    "&.Mui-checked": {
-      color: "#fff",
-      transform: "translateX(22px)",
-      "& .MuiSwitch-thumb:before": {
-        backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-          "#fff"
-        )}" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>')`,
-      },
-      "& + .MuiSwitch-track": {
-        opacity: 1,
-        backgroundColor: theme.palette.mode === "DARK" ? "#8796A5" : "#aab4be",
-      },
-    },
-  },
-  "& .MuiSwitch-thumb": {
-    backgroundColor: theme.palette.mode === "DARK" ? "#003892" : "#001e3c",
-    width: 22,
-    height: 22,
-    "&:before": {
-      content: "''",
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      left: 0,
-      top: 0,
-      backgroundRepeat: "no-repeat",
-      backgroundPosition: "center",
-      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="${encodeURIComponent(
-        "#fff"
-      )}" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>')`,
-    },
-  },
-  "& .MuiSwitch-track": {
-    opacity: 1,
-    backgroundColor: theme.palette.mode === "DARK" ? "#8796A5" : "#aab4be",
-    borderRadius: 20 / 2,
-  },
-}));
-
-function Settings() {
-  const { setTheme, theme } = useTheme(
-    localStorage.getItem("theme") || "DEFAULT"
-  );
-  return (
-    <MaterialUISwitch
-      sx={{ m: 1 }}
-      defaultValue={theme}
-      defaultChecked
-      onChange={() => setTheme(theme === "DARK" ? "DEFAULT" : "DARK")}
-    />
-  );
-}
-
-export default Settings;
--- a/components/pages/Abdest.js
+++ b/components/pages/Abdest.js
@ -1,135 +0,0 @@
-import feelsGood from "../../files/feels.png";
-import feelsBad from "../../files/feelsbad.png";
-import { useEffect, useState } from "react";
-import abdestSound from "../../files/sound.m4a";
-import { Grid, Typography } from "@mui/material";
-
-function Abdest() {
-  const [abdest, setAbdest] = useState(localStorage.getItem("cd"));
-  const [timeLeft, setTimeLeft] = useState(localStorage.getItem("timeleft"));
-  const [minutes, setMinutes] = useState(0);
-  const [seconds, setSeconds] = useState(0);
-  var audio = new Audio(abdestSound);
-
-  const changeAbdestState = () => {
-    if (!abdest) {
-      audio.play();
-      setAbdest(true);
-      const currentTime = new Date().getTime();
-      setTimeLeft(currentTime + 300000);
-      setMinutes(5);
-      setSeconds(0);
-    }
-  };
-
-  useEffect(() => {
-    localStorage.setItem("cd", abdest);
-    localStorage.setItem("timeleft", timeLeft);
-  }, [abdest, timeLeft]);
-
-  useEffect(() => {
-    let timer;
-
-    if (abdest) {
-      const storedTimeLeft = localStorage.getItem("timeleft");
-      const currentTime = new Date().getTime();
-      if (storedTimeLeft && currentTime < storedTimeLeft) {
-        const timeDifference = Math.floor(
-          (storedTimeLeft - currentTime) / 1000
-        );
-        const updatedMinutes = Math.floor(timeDifference / 60);
-        const updatedSeconds = timeDifference % 60;
-        setMinutes(updatedMinutes);
-        setSeconds(updatedSeconds);
-        setTimeLeft(storedTimeLeft);
-        timer = setInterval(() => {
-          const currentTime = new Date().getTime();
-          if (currentTime >= storedTimeLeft) {
-            setAbdest(false);
-            setTimeLeft(null);
-            setMinutes(0);
-            setSeconds(0);
-            clearInterval(timer);
-          } else {
-            const timeDifference = Math.floor(
-              (storedTimeLeft - currentTime) / 1000
-            );
-            const updatedMinutes = Math.floor(timeDifference / 60);
-            const updatedSeconds = timeDifference % 60;
-            setMinutes(updatedMinutes);
-            setSeconds(updatedSeconds);
-          }
-        }, 1000);
-      } else {
-        setAbdest(false);
-        setTimeLeft(null);
-        setMinutes(0);
-        setSeconds(0);
-        localStorage.removeItem("cd");
-        localStorage.removeItem("timeleft");
-      }
-    }
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, [abdest]);
-
-  return (
-    <Grid container textAlign="center">
-      <Grid item onClick={changeAbdestState} xs={12} mt={7}>
-        <img
-          src={abdest ? feelsGood : feelsBad}
-          alt=""
-          height={"auto"}
-          style={{ width: "clamp(12.5rem, 45%, 50rem)" }}
-        />
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        m={2}
-        sx={{ display: abdest ? "none" : "block", fontSize: "2rem" }}>
-        abdest almak için{" "}
-        <Typography
-          component="a"
-          style={{ color: "red", fontSize: "2rem" }}
-          onClick={changeAbdestState}>
-          tıkla
-        </Typography>
-      </Grid>
-      <Grid item xs={12} m={2}>
-        <Typography
-          component="h2"
-          style={{ fontSize: "2rem" }}
-          className={abdest ? "abdestTrue" : "abdestFalse"}>
-          {abdest ? "ABDESTLENDİN" : "abdest almanın doğru adresi"}
-        </Typography>
-      </Grid>
-      <Grid container>
-        <Grid item xs={12} m={2}>
-          {abdest && (
-            <Typography component="h2" style={{ fontSize: "2rem" }}>
-              Abdestin geçerlilik süresi:{" "}
-              {minutes < 10 ? "0" + minutes : minutes}:
-              {seconds < 10 ? "0" + seconds : seconds}
-            </Typography>
-          )}
-        </Grid>
-        <Grid item xs={12} m={2}>
-          <Typography variant="h5">
-            Site tamamen eğlence amacıyla hazırlanmıştır
-          </Typography>
-        </Grid>
-      </Grid>
-    </Grid>
-  );
-}
-
-export function QuickAbdest() {
-  return (
-    <>
-      <Abdest />
-    </>
-  );
-}
--- a/components/pages/AbdestBozan.js
+++ b/components/pages/AbdestBozan.js
@ -1,31 +0,0 @@
-import "./Texts.css";
-
-export function AbdestBozan() {
-  return (
-    <>
-      <h1>Abdesti Bozan Durumlar</h1>
-      <p>
-        Nisa Suresi, 43 ayetine göre sekerat (şuuru yerinde olmamak:
-        delilik/cinnet, esriklik/sarhoşluk, bayılmak-baygınlık, uyku-uyumak...)
-        durumu ile boşaltım organlarından çıkış olması durumu namaza dolayısıyla
-        da abdestin varlığına engeldir. Maide Suresi 6. ayetine göre namaz için
-        abdest ya da teyemmüm şarttır.
-      </p>
-      <ul>
-        <li>
-          Boşaltım organlarından idrar, kan, meni, gaita (dışkı), yel gibi katı,
-          sıvı veya gaz çıkması,
-        </li>
-        <li>
-          Uyumak, delirmek, bayılmak, sarhoş olmak gibi idrak gücünün
-          kaybedildiği durumlar,
-        </li>
-        <li>Kanama,</li>
-        <li>Cinsî münasebet,</li>
-        <li>Ağız dolusu kusmak,</li>
-        <li>Teyemmüm almış birinin su bulması,</li>
-        <li>Yellenmek.</li>
-      </ul>
-    </>
-  );
-}
--- a/components/pages/AbdestEngelli.js
+++ b/components/pages/AbdestEngelli.js
@ -1,22 +0,0 @@
-export function AbdestEngelli() {
-  return (
-    <>
-      <h1>Engelli abdesti</h1>
-      <p>
-        Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
-        göre farklı yönlerden eksik kalan abdesttir.
-      </p>
-      <p>
-        Vücudunun belli yerlerini tıbbi sebeplerden yıkayamayan insanlar normal
-        abdest almaktan muhaf tutulur. Örnek olarak, kolu kırılan ve alçıya
-        alınan kişi abdestini alır; ancak kolunu yıkayamadığından sadece alçının
-        üstünü suyla mesh edebilir. O da zararlıysa, onu da yapmaz. Vücudunda
-        devamlı kanayan yara olan Müslümanlar da engelli abdesti alır. Buna
-        göre, normal abdest alırlar, fakat bu abdestle sadece tek vakit namaz
-        kılabilirler. Engelli abdesti alan Müslüman'ın, tam abdest alan
-        Müslüman'a cemaatle kılınan namazlarda imamlık yapması uygun
-        görülmemiştir.
-      </p>
-    </>
-  );
-}
--- a/components/pages/AbdestEtimoloji.js
+++ b/components/pages/AbdestEtimoloji.js
@ -1,22 +0,0 @@
-export function AbdestEtimiloji() {
-  return (
-    <>
-      <h1>Abdestin Etimolojisi</h1>
-      <p>
-        &quot;Abdest&quot; sözcüğü Türkçeye Selçuklular zamanında Farsça'dan
-        geçmiştir. Anlamı &quot;su tutmak&quot;tır. âb (su) ve dest (tutmak,
-        kavramak) kelimelerinin birleşiminden oluşmuştur. İran ve bazı diğer
-        Müslüman ülkeler ile İngilizce konuşan ülkelerde abdest yerine
-        &quot;vudu&quot; kelimesi kullanılır.
-      </p>
-      <p>
-        Abdest Kur'an' da gasil veya gusül olarak geçer. Bu sözcük, Arapça'da
-        &quot;bir sıvıyı bir nesne üzerinden akıtmak, koku sürünmek&quot;
-        anlamlarına gelir. Bazı hadisçiler ve fıkıhçılar vudû kelimesini abdest
-        anlamında kullanmakta ve gusül kelimesini boy abdesti için
-        kullanmaktadırlar. Kur'an'da boy abdesti için ıttıhar yani taharlanma
-        (temizlik) sözcüğü kullanılmaktadır.
-      </p>
-    </>
-  );
-}
--- a/components/pages/AbdestFarz.js
+++ b/components/pages/AbdestFarz.js
@ -1,14 +0,0 @@
-export function AbdestFarz() {
-  return (
-    <>
-      <h1>Abdestin Farzları</h1>
-      <p>Sünni alimlere göre abdestin farzları dörttür:</p>
-      <ul>
-        <li>Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.</li>
-        <li>Kolları (dirsekleriyle beraber) yıkamak.</li>
-        <li>Yüzü yıkamak.</li>
-        <li>Ayakları (topuklarıyla beraber) yıkamak.</li>
-      </ul>
-    </>
-  );
-}
--- a/components/pages/AbdestHakkında.js
+++ b/components/pages/AbdestHakkında.js
@ -1,181 +0,0 @@
-export function AbdestHakkinda() {
-  return (
-    <>
-      <h1>Abdest</h1>
-      <p>
-        Abdest, Müslümanların, namaz gibi belli ibadetleri yapabilmek için bir
-        düzen içerisinde bazı organları yıkayıp bazılarını mesh etme yoluyla
-        yaptıkları arınma ve temizliktir. Kur'ana göre her namazın yanında
-        bedensel temizlenme amacıyla belli organları yıkamak (gasil) ve
-        meshetmek (mesih) şeklinde anlatılır. Suyun abdeste uygun olması
-        önemlidir. Su abdeste tadı, bulanıklığı ve kokusunun olağan olması ile
-        uygun olmaktadır.
-      </p>
-      <h2>Etimolojisi</h2>
-      <p>
-        &quot;Abdest&quot; sözcüğü Türkçeye Selçuklular zamanında Farsça'dan
-        geçmiştir. Anlamı &quot;su tutmak&quot;tır. âb (su) ve dest (tutmak,
-        kavramak) kelimelerinin birleşiminden oluşmuştur. İran ve bazı diğer
-        Müslüman ülkeler ile İngilizce konuşan ülkelerde abdest yerine
-        &quot;vudu&quot; kelimesi kullanılır.
-      </p>
-      <p>
-        Abdest Kur'an' da gasil veya gusül olarak geçer. Bu sözcük, Arapça'da
-        &quot;bir sıvıyı bir nesne üzerinden akıtmak, koku sürünmek&quot;
-        anlamlarına gelir. Bazı hadisçiler ve fıkıhçılar vudû kelimesini abdest
-        anlamında kullanmakta ve gusül kelimesini boy abdesti için
-        kullanmaktadırlar. Kur'an'da boy abdesti için ıttıhar yani taharlanma
-        (temizlik) sözcüğü kullanılmaktadır.
-      </p>
-      <h2>Teyemmüm</h2>
-      <p>
-        Fakihlere (fıkıh alimi) göre namaz kılmak için abdest yerine bazı
-        durumlarda teyemmüm yapılabilir. Ayrıca teyemmüm, hastalık, yolculuk, su
-        bulmama/suyun olmaması veya erişilememesi gibi durumlarda boy abdesti
-        yerine de yapılır. Kur'an'da teyemmüm yapmak için türâb (toprak) sözcüğü
-        kullanılmaz, bunun yerine said sözcüğü kullanılır ki bu sözcük
-        &quot;toz, toprak, taş vs.&quot; anlamına gelmektedir. Kullanıma uygun
-        su bulunduğu zaman bozulmaktadır.
-      </p>
-      <h2>Abdest Ayeti</h2>
-      <p>
-        Kur'anda; (Maide Suresi, 6), (Nisa suresi, 43), (Müddessir suresi, 4-5),
-        (Bakara suresi, 222), (Tevbe suresi, 108), (Vakıa suresi, 79)'da geçer.
-      </p>
-      <p>
-        Ayetin ayakları anlatan “ercüleküm” kelimesinin okunuşu kıraat
-        mezhepleri arasında ihtilaflı bir konudur. Kelime iki şekilde
-        okunabilir; ercüleküm şeklinde okunduğunda abdest alırken ayakların
-        yıkanması gerektiği anlaşılır, ercüliküm şeklinde okunmasında ise
-        ayakların yıkanmıyacağı, sadece meshedileceği anlaşılır.
-      </p>
-      <p>
-        Ayette kullanılan vücûhe küm (vecihleriniz) ibaresi, başın ön yanı için
-        kullanılır, bu yüzden başta saçların döküldüğü ön kısım, yüz, boyun altı
-        demektir. Baş sıvazlanırken, ayette sınır koymadığı için, baş adlı
-        organın başın ön yanı dışındaki her yanı, kulaklar, ense, boyun
-        sıvazlanır.
-      </p>
-      <h2>Abdestin hükümleri</h2>
-      <p>
-        Fıkıh alimleri, Kur'an ve Sünneti referans göstererek abdestin
-        hükümlerini (farz, sünnet, mendup, müstehab, mekruh vs.) şunlar olarak
-        belirtirler:
-      </p>
-      <h3>Abdestin farzları</h3>
-      <p>Sünni alimlere göre abdestin farzları dörttür:</p>
-      <ul>
-        <li>Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.</li>
-        <li>Kolları (dirsekleriyle beraber) yıkamak.</li>
-        <li>Yüzü yıkamak.</li>
-        <li>Ayakları (topuklarıyla beraber) yıkamak.</li>
-      </ul>
-      <p>
-        Şia alimlerden bazıları &quot;ayaklara meshetmenin&quot; abdestin
-        farzlarından olduğuna, bazı alimler meshin farz, yıkamanın sünnet
-        olduğuna, diğer bir kısmı ise her iki uygulamadan birisini yerine
-        getirmenin yeterli olacağına inanmışlardır.
-      </p>
-      <h3>Abdestin sünnetleri</h3>
-      <ul>
-        <li>Niyet etmek</li>
-        <li>Eûzü ve Besmele ile başlamak</li>
-        <li>Evvela ellerini bileklerine kadar yıkamak</li>
-        <li>Misvak kullanmak</li>
-        <li>Bir âzâ kurumadan diğerini yıkamak</li>
-        <li>Ağzına ve burnuna üç kere su vermek</li>
-        <li>Kulağını meshetmek</li>
-        <li>
-          Parmaklarını hilâllemek; yâni bir elin parmaklarını diğer elin
-          parmakları arasına geçirip çekmek
-        </li>
-        <li>Âzâları üçer kere yıkamak</li>
-        <li>Başını kaplama meshetmek</li>
-        <li>
-          Abdesti tertip üzere almak; yâni abdest âzâlarını sırasıyla yıkamak
-        </li>
-        <li>El ve ayaklarını yıkamakta parmak uçlarından başlamak</li>
-        <li>
-          Abdest alırken okunacak birçok duâ olmakla beraber evlâ olan bütün
-          âzâlarını yıkarken besmele çekip şehâdet getirmektir
-        </li>
-      </ul>
-      <h3>Abdestin mekruhları</h3>
-      <ul>
-        <li>Sağ el ile sümkürmek</li>
-        <li>Abdest âzâlarından birini üç defadan az veya fazla yıkamak</li>
-        <li>Suyu yüzüne çarpmak</li>
-        <li>Güneşte ısınmış su ile abdest almak</li>
-        <li>Suyu çok az kullanmak veya israf etmek</li>
-        <li>Abdest alırken konuşmak</li>
-        <li>Sünnetlerini terk etmek</li>
-      </ul>
-      <h3>Abdesti bozan durumlar</h3>
-      <p>
-        Nisa Suresi, 43 ayetine göre sekerat (şuuru yerinde olmamak:
-        delilik/cinnet, esriklik/sarhoşluk, bayılmak-baygınlık, uyku-uyumak...)
-        durumu ile boşaltım organlarından çıkış olması durumu namaza dolayısıyla
-        da abdestin varlığına engeldir. Maide Suresi 6. ayetine göre namaz için
-        abdest ya da teyemmüm şarttır.
-      </p>
-      <ul>
-        <li>
-          Boşaltım organlarından idrar, kan, meni, gaita (dışkı), yel gibi katı,
-          sıvı veya gaz çıkması,
-        </li>
-        <li>
-          Uyumak, delirmek, bayılmak, sarhoş olmak gibi idrak gücünün
-          kaybedildiği durumlar,
-        </li>
-        <li>Kanama,</li>
-        <li>Cinsî münasebet,</li>
-        <li>Ağız dolusu kusmak,</li>
-        <li>Teyemmüm almış birinin su bulması,</li>
-        <li>Yellenmek.</li>
-      </ul>
-      <h3>Abdest nasıl alınır</h3>
-      <ol>
-        <li>Eller bileklere kadar Üç kere oğusturularak yıkanır.</li>
-        <li>
-          Sağ elle, ilkin ağza, sonra buruna olmak üzere, üçer kere su alınır.
-        </li>
-        <li>Yüz, Üç kere yıkanır.</li>
-        <li>
-          Dirseği biraz aşacak şekilde önce sağ kol, sonra sol kol üçer kere
-          yıkanır.
-        </li>
-        <li>
-          Sağ elin içi ıslatılıp, alından enseye doğru sıvazlanarak baş mesh
-          edilir.
-        </li>
-        <li>
-          Islak elin başparmağıyla, serçeparmağıyla sıvazlanarak kulaklar mesh
-          edilir.
-        </li>
-        <li>
-          Islak parmakların tersiyle, ense ortasından yanlara doğru boyun da
-          mesh edilir.
-        </li>
-        <li>
-          Topuğu biraz geçmek üzere, sol elle ilkin sağ, sonra sol ayak yıkanır.
-        </li>
-      </ol>
-      <h3>Engelli abdesti</h3>
-      <p>
-        Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
-        göre farklı yönlerden eksik kalan abdesttir.
-      </p>
-      <p>
-        Vücudunun belli yerlerini tıbbi sebeplerden yıkayamayan insanlar normal
-        abdest almaktan muhaf tutulur. Örnek olarak, kolu kırılan ve alçıya
-        alınan kişi abdestini alır; ancak kolunu yıkayamadığından sadece alçının
-        üstünü suyla mesh edebilir. O da zararlıysa, onu da yapmaz. Vücudunda
-        devamlı kanayan yara olan Müslümanlar da engelli abdesti alır. Buna
-        göre, normal abdest alırlar, fakat bu abdestle sadece tek vakit namaz
-        kılabilirler. Engelli abdesti alan Müslüman'ın, tam abdest alan
-        Müslüman'a cemaatle kılınan namazlarda imamlık yapması uygun
-        görülmemiştir.
-      </p>
-    </>
-  );
-}
--- a/components/pages/AbdestHükümleri.js
+++ b/components/pages/AbdestHükümleri.js
@ -1,26 +0,0 @@
-export function AbdestHukum() {
-  return (
-    <>
-      <h1>Abdestin Hükümleri</h1>
-      <p>
-        Fıkıh alimleri, Kur'an ve Sünneti referans göstererek abdestin
-        hükümlerini (farz, sünnet, mendup, müstehab, mekruh vs.) şunlar olarak
-        belirtirler:
-      </p>
-      <h3>Abdestin farzları</h3>
-      <p>Sünni alimlere göre abdestin farzları dörttür:</p>
-      <ul>
-        <li>Başın dörtte birini meshetmek, yani ıslak elle sıvazlamak.</li>
-        <li>Kolları (dirsekleriyle beraber) yıkamak.</li>
-        <li>Yüzü yıkamak.</li>
-        <li>Ayakları (topuklarıyla beraber) yıkamak.</li>
-      </ul>
-      <p>
-        Şia alimlerden bazıları &quot;ayaklara meshetmenin&quot; abdestin
-        farzlarından olduğuna, bazı alimler meshin farz, yıkamanın sünnet
-        olduğuna, diğer bir kısmı ise her iki uygulamadan birisini yerine
-        getirmenin yeterli olacağına inanmışlardır.
-      </p>
-    </>
-  );
-}
--- a/components/pages/AbdestMekruh.js
+++ b/components/pages/AbdestMekruh.js
@ -1,16 +0,0 @@
-export function AbdestMekruh() {
-  return (
-    <>
-      <h1>Abdestin Mekruhları</h1>
-      <ul>
-        <li>Sağ el ile sümkürmek</li>
-        <li>Abdest âzâlarından birini üç defadan az veya fazla yıkamak</li>
-        <li>Suyu yüzüne çarpmak</li>
-        <li>Güneşte ısınmış su ile abdest almak</li>
-        <li>Suyu çok az kullanmak veya israf etmek</li>
-        <li>Abdest alırken konuşmak</li>
-        <li>Sünnetlerini terk etmek</li>
-      </ul>
-    </>
-  );
-}
--- a/components/pages/AbdestNasılAlınır.js
+++ b/components/pages/AbdestNasılAlınır.js
@ -1,49 +0,0 @@
-export function AbdestNasil() {
-  return (
-    <>
-      <h1>Abdest Nasıl Alınır?</h1>
-      <ol>
-        <li>Eller bileklere kadar Üç kere oğusturularak yıkanır.</li>
-        <li>
-          Sağ elle, ilkin ağza, sonra buruna olmak üzere, üçer kere su alınır.
-        </li>
-        <li>Yüz, Üç kere yıkanır.</li>
-        <li>
-          Dirseği biraz aşacak şekilde önce sağ kol, sonra sol kol üçer kere
-          yıkanır.
-        </li>
-        <li>
-          Sağ elin içi ıslatılıp, alından enseye doğru sıvazlanarak baş mesh
-          edilir.
-        </li>
-        <li>
-          Islak elin başparmağıyla, serçeparmağıyla sıvazlanarak kulaklar mesh
-          edilir.
-        </li>
-        <li>
-          Islak parmakların tersiyle, ense ortasından yanlara doğru boyun da
-          mesh edilir.
-        </li>
-        <li>
-          Topuğu biraz geçmek üzere, sol elle ilkin sağ, sonra sol ayak yıkanır.
-        </li>
-      </ol>
-      <h2>Engelli Abdesti Nasıl Alınır?</h2>
-      <p>
-        Normal abdest almasına engel bir durumu olan Müslüman'ın, rahatsızlığına
-        göre farklı yönlerden eksik kalan abdesttir.
-      </p>
-      <p>
-        Vücudunun belli yerlerini tıbbi sebeplerden yıkayamayan insanlar normal
-        abdest almaktan muhaf tutulur. Örnek olarak, kolu kırılan ve alçıya
-        alınan kişi abdestini alır; ancak kolunu yıkayamadığından sadece alçının
-        üstünü suyla mesh edebilir. O da zararlıysa, onu da yapmaz. Vücudunda
-        devamlı kanayan yara olan Müslümanlar da engelli abdesti alır. Buna
-        göre, normal abdest alırlar, fakat bu abdestle sadece tek vakit namaz
-        kılabilirler. Engelli abdesti alan Müslüman'ın, tam abdest alan
-        Müslüman'a cemaatle kılınan namazlarda imamlık yapması uygun
-        görülmemiştir.
-      </p>
-    </>
-  );
-}
--- a/components/pages/AbdestSunnet.js
+++ b/components/pages/AbdestSunnet.js
@ -1,30 +0,0 @@
-export function AbdestSunnet() {
-  return (
-    <>
-      <h1>Abdestin Sünnetleri</h1>
-      <ul>
-        <li>Niyet etmek</li>
-        <li>Eûzü ve Besmele ile başlamak</li>
-        <li>Evvela ellerini bileklerine kadar yıkamak</li>
-        <li>Misvak kullanmak</li>
-        <li>Bir âzâ kurumadan diğerini yıkamak</li>
-        <li>Ağzına ve burnuna üç kere su vermek</li>
-        <li>Kulağını meshetmek</li>
-        <li>
-          Parmaklarını hilâllemek; yâni bir elin parmaklarını diğer elin
-          parmakları arasına geçirip çekmek
-        </li>
-        <li>Âzâları üçer kere yıkamak</li>
-        <li>Başını kaplama meshetmek</li>
-        <li>
-          Abdesti tertip üzere almak; yâni abdest âzâlarını sırasıyla yıkamak
-        </li>
-        <li>El ve ayaklarını yıkamakta parmak uçlarından başlamak</li>
-        <li>
-          Abdest alırken okunacak birçok duâ olmakla beraber evlâ olan bütün
-          âzâlarını yıkarken besmele çekip şehâdet getirmektir
-        </li>
-      </ul>
-    </>
-  );
-}
--- a/components/pages/AbdestTeyemmüm.js
+++ b/components/pages/AbdestTeyemmüm.js
@ -1,16 +0,0 @@
-export function AbdestTeyemmum() {
-  return (
-    <>
-      <h1>Teyemmüm</h1>
-      <p>
-        Fakihlere (fıkıh alimi) göre namaz kılmak için abdest yerine bazı
-        durumlarda teyemmüm yapılabilir. Ayrıca teyemmüm, hastalık, yolculuk, su
-        bulmama/suyun olmaması veya erişilememesi gibi durumlarda boy abdesti
-        yerine de yapılır. Kur'an'da teyemmüm yapmak için türâb (toprak) sözcüğü
-        kullanılmaz, bunun yerine said sözcüğü kullanılır ki bu sözcük
-        &quot;toz, toprak, taş vs.&quot; anlamına gelmektedir. Kullanıma uygun
-        su bulunduğu zaman bozulmaktadır.
-      </p>
-    </>
-  );
-}
--- a/constants.js
+++ b/constants.js
@ -1,5 +0,0 @@
-export const THEMES = {
-  DEFAULT: "DEFAULT",
-  GREEN: "GREEN",
-  DARK: "DARK",
-};
--- a/contexts/Themes.js
+++ b/contexts/Themes.js
@ -1,34 +0,0 @@
-import React, { useEffect, useState, createContext } from "react";
-import { THEMES } from "../constants";
-
-const initialState = {
-  theme: THEMES.DEFAULT,
-  setTheme: (theme) => {},
-};
-
-const ThemeContext = createContext(initialState);
-
-function ThemeProvider({ children }) {
-  const [theme, setTheme] = useState(initialState.theme);
-
-  useEffect(() => {
-    const storedTheme = localStorage.getItem("theme");
-
-    if (storedTheme) {
-      setTheme(JSON.parse(storedTheme));
-    }
-  }, []);
-
-  const updateTheme = (theme) => {
-    localStorage.setItem("theme", JSON.stringify(theme));
-    setTheme(theme);
-  };
-
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme: updateTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export { ThemeProvider, ThemeContext };
--- a/hooks/useTheme.js
+++ b/hooks/useTheme.js
@ -1,6 +0,0 @@
-import { useContext } from "react";
-import { ThemeContext } from "../contexts/Themes";
-
-const useTheme = () => useContext(ThemeContext);
-
-export default useTheme;
--- a/index.js
+++ b/index.js
@ -1,21 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import "@fontsource/poppins";
-import reportWebVitals from "./reportWebVitals";
-import { BrowserRouter } from "react-router-dom/dist";
-import { ThemeProvider } from "./contexts/Themes";
-
-const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <BrowserRouter>
-    <ThemeProvider>
-      <App />
-    </ThemeProvider>
-  </BrowserRouter>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,41 @@
+{
+  "name": "quickabdest",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "ajv": "^7.2.4"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <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" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
--- a/public/logo192.png
+++ b/public/logo192.png
--- a/public/logo512.png
+++ b/public/logo512.png
--- a/public/manifest.json
+++ b/public/manifest.json
@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
--- a/routes.js
+++ b/routes.js
@ -1,30 +0,0 @@
-import { QuickAbdest } from "./components/pages/Abdest";
-import { AbdestBozan } from "./components/pages/AbdestBozan";
-import { AbdestEngelli } from "./components/pages/AbdestEngelli";
-import { AbdestEtimiloji } from "./components/pages/AbdestEtimoloji";
-import { AbdestFarz } from "./components/pages/AbdestFarz";
-import { AbdestHakkinda } from "./components/pages/AbdestHakkında";
-import { AbdestHukum } from "./components/pages/AbdestHükümleri";
-import { AbdestMekruh } from "./components/pages/AbdestMekruh";
-import { AbdestNasil } from "./components/pages/AbdestNasılAlınır";
-import { AbdestSunnet } from "./components/pages/AbdestSunnet";
-import { AbdestTeyemmum } from "./components/pages/AbdestTeyemmüm";
-
-export const routes = [
-  {
-    path: "/",
-    children: [
-      { path: "", element: <QuickAbdest /> },
-      { path: "abdesthakkinda", element: <AbdestHakkinda /> },
-      { path: "abdestnasilalinir", element: <AbdestNasil /> },
-      { path: "abdestetimoloji", element: <AbdestEtimiloji /> },
-      { path: "abdestinhukumleri", element: <AbdestHukum /> },
-      { path: "abdestinfarzlari", element: <AbdestFarz /> },
-      { path: "abdestinsunnetleri", element: <AbdestSunnet /> },
-      { path: "abdestinmehruklari", element: <AbdestMekruh /> },
-      { path: "abdestbozandurumlar", element: <AbdestBozan /> },
-      { path: "engelliabdesti", element: <AbdestEngelli /> },
-      { path: "teyemmumabdesti", element: <AbdestTeyemmum /> },
-    ],
-  },
-];
--- a/src/App.css
+++ b/src/App.css
@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
--- a/src/App.js
+++ b/src/App.js
@ -0,0 +1,25 @@
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;
--- a/src/App.test.js
+++ b/src/App.test.js
@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
--- a/src/logo.svg
+++ b/src/logo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
--- a/src/setupTests.js
+++ b/src/setupTests.js
@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
--- a/theme/breakpoints.js
+++ b/theme/breakpoints.js
@ -1,11 +0,0 @@
-const breakpoints = {
-  values: {
-    xs: 0,
-    sm: 600,
-    md: 960,
-    lg: 1280,
-    xl: 1440,
-  },
-};
-
-export default breakpoints;
--- a/theme/components.js
+++ b/theme/components.js
@ -1,138 +0,0 @@
-const components = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableRipple: true,
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: "hover",
-    },
-  },
-  MuiCardHeader: {
-    defaultProps: {
-      titleTypographyProps: {
-        variant: "h6",
-      },
-    },
-    styleOverrides: {
-      action: {
-        marginTop: "-4px",
-        marginRight: "-4px",
-      },
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: {
-        borderRadius: "6px",
-        boxShadow:
-          "rgba(50, 50, 93, 0.025) 0px 2px 5px -1px, rgba(0, 0, 0, 0.05) 0px 1px 3px -1px",
-        backgroundImage: "none",
-      },
-    },
-  },
-  MuiPaper: {
-    styleOverrides: {
-      root: {
-        backgroundImage: "none",
-      },
-    },
-  },
-  MuiPickersDay: {
-    styleOverrides: {
-      day: {
-        fontWeight: "300",
-      },
-    },
-  },
-  MuiPickersYear: {
-    styleOverrides: {
-      root: {
-        height: "64px",
-      },
-    },
-  },
-  MuiPickersCalendar: {
-    styleOverrides: {
-      transitionContainer: {
-        marginTop: "6px",
-      },
-    },
-  },
-  MuiPickersCalendarHeader: {
-    styleOverrides: {
-      iconButton: {
-        backgroundColor: "transparent",
-        "& > *": {
-          backgroundColor: "transparent",
-        },
-      },
-      switchHeader: {
-        marginTop: "2px",
-        marginBottom: "4px",
-      },
-    },
-  },
-  MuiPickersClock: {
-    styleOverrides: {
-      container: {
-        margin: `32px 0 4px`,
-      },
-    },
-  },
-  MuiPickersClockNumber: {
-    styleOverrides: {
-      clockNumber: {
-        left: `calc(50% - 16px)`,
-        width: "32px",
-        height: "32px",
-      },
-    },
-  },
-  MuiPickerDTHeader: {
-    styleOverrides: {
-      dateHeader: {
-        "& h4": {
-          fontSize: "2.125rem",
-          fontWeight: 400,
-        },
-      },
-      timeHeader: {
-        "& h3": {
-          fontSize: "3rem",
-          fontWeight: 400,
-        },
-      },
-    },
-  },
-  MuiPickersTimePicker: {
-    styleOverrides: {
-      hourMinuteLabel: {
-        "& h2": {
-          fontSize: "3.75rem",
-          fontWeight: 300,
-        },
-      },
-    },
-  },
-  MuiPickersToolbar: {
-    styleOverrides: {
-      toolbar: {
-        "& h4": {
-          fontSize: "2.125rem",
-          fontWeight: 400,
-        },
-      },
-    },
-  },
-  MuiChip: {
-    styleOverrides: {
-      root: {
-        borderRadius: "6px",
-      },
-    },
-  },
-};
-
-export default components;
--- a/theme/index.js
+++ b/theme/index.js
@ -1,35 +0,0 @@
-import "@mui/lab/themeAugmentation";
-import { createTheme as createMuiTheme } from "@mui/material/styles";
-import variants from "./variants";
-import typography from "./typography";
-import breakpoints from "./breakpoints";
-import components from "./components";
-import shadows from "./shadows";
-
-const createTheme = (name) => {
-  let themeConfig = variants.find((variant) => variant.name === name);
-
-  if (!themeConfig) {
-    console.warn(new Error(`The theme ${name} is not valid`));
-    themeConfig = variants[0];
-  }
-
-  return createMuiTheme(
-    {
-      spacing: 4,
-      breakpoints: breakpoints,
-      components: components,
-      typography: typography,
-      shadows: shadows,
-      palette: themeConfig.palette,
-    },
-    {
-      name: themeConfig.name,
-      header: themeConfig.header,
-      footer: themeConfig.footer,
-      sidebar: themeConfig.sidebar,
-    }
-  );
-};
-
-export default createTheme;
--- a/theme/shadows.js
+++ b/theme/shadows.js
@ -1,33 +0,0 @@
-function createShadow() {
-  return `box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);`;
-}
-
-const shadows = [
-  "none",
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-  createShadow(),
-];
-
-export default shadows;
--- a/theme/typography.js
+++ b/theme/typography.js
@ -1,58 +0,0 @@
-const typography = {
-  fontFamily: [
-    "Inter",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    '"Segoe UI"',
-    "Roboto",
-    '"Helvetica Neue"',
-    "Arial",
-    "sans-serif",
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-  ].join(","),
-  fontSize: 13,
-  fontWeightLight: 300,
-  fontWeightRegular: 400,
-  fontWeightMedium: 500,
-  fontWeightBold: 600,
-  h1: {
-    fontSize: "2rem",
-    fontWeight: 600,
-    lineHeight: 1.25,
-  },
-  h2: {
-    fontSize: "1.75rem",
-    fontWeight: 600,
-    lineHeight: 1.25,
-  },
-  h3: {
-    fontSize: "1.5rem",
-    fontWeight: 600,
-    lineHeight: 1.25,
-  },
-  h4: {
-    fontSize: "1.125rem",
-    fontWeight: 500,
-    lineHeight: 1.25,
-  },
-  h5: {
-    fontSize: "1.0625rem",
-    fontWeight: 500,
-    lineHeight: 1.25,
-  },
-  h6: {
-    fontSize: "1rem",
-    fontWeight: 500,
-    lineHeight: 1.25,
-  },
-  body1: {
-    fontSize: 13,
-  },
-  button: {
-    textTransform: "none",
-  },
-};
-
-export default typography;
--- a/theme/variants.js
+++ b/theme/variants.js
@ -1,134 +0,0 @@
-import merge from "deepmerge";
-import { green, grey } from "@mui/material/colors";
-import { THEMES } from "../constants";
-
-const customBlue = {
-  50: "#e9ebf0",
-  100: "#cbced4",
-  200: "#a4a9b3",
-  300: "#858b94",
-  400: "#6a6f76",
-  500: "#5c6066",
-  600: "#3c3f43",
-  700: "#24441c",
-  800: "#1a1d24",
-  900: "#0f131a ",
-};
-
-const defaultVariant = {
-  name: THEMES.DEFAULT,
-  palette: {
-    mode: "light",
-    primary: {
-      main: customBlue[700],
-      contrastText: "#FFF",
-    },
-    secondary: {
-      main: customBlue[500],
-      contrastText: "#FFF",
-    },
-    background: {
-      paper: customBlue[700],
-      contrastText: "#FFF",
-    },
-  },
-  header: {
-    color: grey[500],
-    background: "#FFF",
-    search: {
-      color: grey[800],
-    },
-    indicator: {
-      background: customBlue[600],
-    },
-  },
-  footer: {
-    color: grey[500],
-    background: "#FFF",
-  },
-  sidebar: {
-    color: grey[200],
-    background: "#233044",
-    header: {
-      color: grey[200],
-      background: "#233044",
-      brand: {
-        color: customBlue[500],
-      },
-    },
-    footer: {
-      color: grey[200],
-      background: "#1E2A38",
-      online: {
-        background: green[500],
-      },
-    },
-    badge: {
-      color: "#FFF",
-      background: customBlue[500],
-    },
-  },
-};
-
-const darkVariant = merge(defaultVariant, {
-  name: THEMES.DARK,
-  palette: {
-    mode: "dark",
-    primary: {
-      main: customBlue[400],
-      contrastText: "#FFF",
-    },
-    background: {
-      default: customBlue[800],
-      paper: customBlue[900],
-    },
-    text: {
-      primary: "rgba(255, 255, 255, 0.95)",
-      secondary: "rgba(255, 255, 255, 0.5)",
-    },
-  },
-  header: {
-    color: grey[300],
-    background: "#1B2635",
-    search: {
-      color: grey[200],
-    },
-  },
-  footer: {
-    color: grey[300],
-    background: "#233044",
-  },
-});
-
-const variants = [defaultVariant, darkVariant];
-
-export default variants;
-
-/**
- * @typedef {object} VariantType
- * @property {string} name
- * @property {object} palette
- * @property {MainContrastTextType} palette.primary
- * @property {MainContrastTextType} palette.secondary
- * @property {ColorBgType} palette.background
- * @property {ColorBgType} header
- * @property {object} header.search
- * @property {ColorBgType} header.indicator
- * @property {ColorBgType} footer
- * @property {ColorBgType} sidebar
- * @property {ColorBgType} sidebar.header
- * @property {ColorBgType} sidebar.footer
- * @property {ColorBgType} sidebar.badge
- */
-
-/**
- * @typedef {object} MainContrastTextType
- * @property {string} main
- * @property {string} contrastText
- */
-
-/**
- * @typedef {object} ColorBgType
- * @property {string} color
- * @property {string} background
- */
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>