Merge pull request #25 from ilyasbozdemir/case-project

landing page updated.

LibraryTrackingApp/src/frontend/components/LoginRegisterPage/LoginPage.jsx

@@ -20,6 +20,7 @@ import {
   Link as CLink,
   FormErrorMessage,
   IconButton,
+  Text,
 } from "@chakra-ui/react";
 import { IoEyeOffOutline, IoEyeOutline } from "react-icons/io5";
 import Link from "next/link";
@@ -32,8 +33,8 @@ const LoginPage = () => {
   const router = useRouter();
   const formik = useFormik({
     initialValues: {
-      username: "",
-      password: "",
+      username: "admin",
+      password: "admin",
     },
     validationSchema: Yup.object({
       username: Yup.string().required("Kullanıcı adı zorunlu"),
@@ -135,6 +136,11 @@ const LoginPage = () => {
             </VStack>
           </Stack>
         </Center>
+
+        <Text as='small' mt={5}>
+          Not: herhangi bir username ve password ile girilebilir su an
+          backende tam olarak baglanmamıstır.
+        </Text>
       </Container>
     </>
   );

LibraryTrackingApp/src/frontend/components/Features.jsx → LibraryTrackingApp/src/frontend/layouts/Anon/components/Features.jsx

@@ -66,9 +66,6 @@ const features = [
 const Features = () => {
   return (
     <Container maxW="6xl" p={{ base: 5, md: 10 }}>
-      <Heading as="h2" size="xl" textAlign={'center'} mb={8}>
-        Uygulamamızın Sunduğu Özellikler
-      </Heading>
       <SimpleGrid
         columns={{ base: 1, md: 2 }}
         placeItems="center"

LibraryTrackingApp/src/frontend/components/Footer.jsx → LibraryTrackingApp/src/frontend/layouts/Anon/components/Footer.jsx

@@ -1,17 +1,18 @@
 import {
   Link as CLink,
+  Flex,
 } from "@chakra-ui/react";
 
 
 import React from "react";
 
-const FooterSection = () => {
+const Footer = () => {
 
 
   return (
-    <>
+    <Flex justifyContent={'center'}>
     <FooterData/>
-    </>
+    </Flex>
   );
 };
 
@@ -35,4 +36,4 @@ export async function getStaticProps({ locale }) {
   };
 }
 
-export default React.memo(FooterSection);
+export default React.memo(Footer);

LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx

@@ -0,0 +1,146 @@
+import { Fragment } from 'react';
+import {
+  chakra,
+  Container,
+  Stack,
+  Text,
+  useColorModeValue,
+  Link as CLink,
+  Icon,
+  Flex,
+  Box
+} from '@chakra-ui/react';
+
+import { FaGithub } from 'react-icons/fa';
+import { FaCircleNodes } from 'react-icons/fa6';
+
+import { RiNextjsLine } from "react-icons/ri";
+import { AiOutlineDotNet } from "react-icons/ai";
+import Link from 'next/link';
+const features = [
+  {
+    title: 'Next.js ile Güçlendirilmiş',
+    detail: 'Next.js ile oluşturulan hızlı, etkileşimli ve SEO dostu web uygulamaları.',
+    icon: <Icon as={RiNextjsLine} boxSize={8} color="white" />
+  },
+  {
+    title: '.NET Core Backend',
+    detail: '.NET Core kullanarak güçlü ve ölçeklenebilir bir backend oluşturun.',
+    icon: <Icon as={AiOutlineDotNet} boxSize={8} color="white" />
+  },
+  {
+    title: 'Kolay Özelleştirme',
+    detail: 'Tüm bileşenler ve kancalar türleri ihraç eder.',
+    icon: <Icon as={FaCircleNodes} boxSize={8} color="white" />
+  }
+];
+const HeroSection = () => {
+  return (
+    <Fragment>
+      <Container maxW="6xl" px={{ base: 6, md: 10 }} py={14}>
+        <Stack direction={{ base: 'column', md: 'row' }}>
+          <Stack direction="column" spacing={10} justifyContent="center">
+            <chakra.h1 fontSize="5xl" lineHeight={1} fontWeight="bold" textAlign="left">
+              Kütüphane Yönetim Sistemi
+            </chakra.h1>
+            <Text
+              color={useColorModeValue('gray.500', 'gray.400')}
+              fontSize="lg"
+              textAlign="left"
+              fontWeight="400"
+              maxW="700px"
+            >
+              Hızlı ve etkili bir şekilde kütüphanenizi yönetin. Kolay kullanım ve esnek özelliklerle kütüphane işlerinizi düzenleyin.
+            </Text>
+            <Stack
+              direction={{ base: 'column', md: 'row' }}
+              spacing={{ base: 5, md: 10 }}
+              flexWrap="wrap"
+            >
+              {features.map((feature, index) => (
+                <Stack key={index} direction={{ base: 'row', md: 'column' }} spacing={2}>
+                  <Flex
+                    p={3}
+                    maxH="52px"
+                    w="max-content"
+                    color="white"
+                    bgGradient="linear(to-br, #228be6, #15aabf)"
+                    rounded="md"
+                  >
+                    {feature.icon}
+                  </Flex>
+                  <Stack direction="column" spacing={2}>
+                    <Text fontSize="md" fontWeight="500">
+                      {feature.title}
+                    </Text>
+                    <Text fontSize="sm" color="gray.400" maxW={{ base: '100%', md: '200px' }}>
+                      {feature.detail}
+                    </Text>
+                  </Stack>
+                </Stack>
+              ))}
+            </Stack>
+            <Stack
+              direction={{ base: 'column', sm: 'row' }}
+              spacing={{ base: 0, sm: 2 }}
+              flexWrap="wrap"
+            >
+              <chakra.button
+                h={12}
+                px={6}
+                bgGradient="linear(to-br, #228be6, #15aabf)"
+                color="white"
+                _hover={{ bgGradient: 'linear(to-br, #228be6, #228be6)' }}
+                variant="solid"
+                size="lg"
+                rounded="md"
+                fontWeight="bold"
+                mb={{ base: 2, sm: 0 }}
+              >
+                <chakra.span> Get started </chakra.span>
+              </chakra.button>
+              <Flex
+                border="1px solid"
+                borderColor="gray.700"
+                justifyContent="center"
+                p={3}
+                px={4}
+                lineHeight={1.18}
+                rounded="md"
+                boxShadow="md"
+                fontWeight="bold"
+                alignItems="center"
+              >
+                <CLink as={Link} href={'https://github.com/ilyasbozdemir/libraryTrackingApp'} rel={'noopener noreferrer'} target='_blank'>
+                  <Icon as={FaGithub} h={4} w={4} />
+                  <chakra.span ml={1}> Github</chakra.span>
+                </CLink>
+
+              </Flex>
+            </Stack>
+          </Stack>
+        </Stack>
+      </Container>
+      <Box overflow="hidden">
+        <svg
+          fill={useColorModeValue('#f7fafc', '#171923')}
+          width="150%"
+          height="56px"
+          transform="scaleX(-1)"
+          filter="drop-shadow(10px 5px 5px rgba(0, 0, 0, 0.05))"
+          preserveAspectRatio="none"
+          viewBox="0 0 1200 120"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d={`M321.39 56.44c58-10.79 114.16-30.13 172-41.86 82.39-16.72 168.19-17.73 
+            250.45-.39C823.78 31 906.67 72 985.66 92.83c70.05 18.48 146.53 26.09 214.34 
+            3V0H0v27.35a600.21 600.21 0 00321.39 29.09z`}
+          ></path>
+        </svg>
+      </Box>
+    </Fragment>
+  );
+};
+
+export default HeroSection;

LibraryTrackingApp/src/frontend/layouts/Anon/components/LibraryPricing.jsx

@@ -0,0 +1,99 @@
+import {
+  chakra,
+  VStack,
+  HStack,
+  Text,
+  Container,
+  Box,
+  Icon,
+  Button,
+  SimpleGrid,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import { BiCheck } from "react-icons/bi";
+import { IconType } from "react-icons";
+
+const plansList = [
+  {
+    title: "Ücretsiz",
+    price: "0.00",
+    icon: BiCheck,
+    features: [
+      "Sınırsız kitap erişimi",
+      "Sesli kitap dinleme",
+      "PDF kitap okuma",
+      "Kütüphane oluşturma ve paylaşma",
+      "Öneri ve incelemeler",
+      "Sosyal etkileşim ve topluluk katılımı",
+      "Ücretsiz deneme ve örnek bölümler",
+      "İşaretler ve ilerleme takibi",
+    ],
+  },
+];
+
+const LibraryPricing = () => {
+  return (
+    <Container maxW="7xl" py="8" px="0">
+      <chakra.h2 fontSize="5xl" fontWeight="bold" textAlign="center" mb={5}>
+        Premium Plan
+      </chakra.h2>
+      <SimpleGrid columns={{ base: 1, md: 1 }} spacing={1} mt={4}>
+        {plansList.map((plan, index) => (
+          <PricingCard key={index} {...plan} />
+        ))}
+      </SimpleGrid>
+    </Container>
+  );
+};
+
+const PricingCard = ({ title, price, icon, features }) => {
+  return (
+    <Box
+      minW={{ base: "xs", sm: "xs", lg: "sm" }}
+      rounded="md"
+      bg={useColorModeValue("white", "gray.800")}
+      boxShadow="md"
+      marginInline="auto"
+      my={3}
+      p={6}
+    >
+      <Box textAlign="center">
+        <Icon as={icon} h={10} w={10} color="teal.500" />
+        <chakra.h2 fontSize="2xl" fontWeight="bold">
+          {title}
+        </chakra.h2>
+        <Box fontSize="7xl" fontWeight="bold">
+          <Text as="sup" fontSize="3xl" fontWeight="normal" top="-1em">
+            ₺
+          </Text>
+
+          {price}
+        </Box>
+        <Text fontSize="md" color="gray.500">
+          Ömür Boyu
+        </Text>
+      </Box>
+      <VStack spacing={2} alignItems="flex-start" my={6}>
+        {features.map((feature, index) => (
+          <HStack key={index} spacing={3}>
+            <Icon as={BiCheck} h={4} w={4} color="green.500" />
+            <Text fontSize="sm" color="gray.500">
+              {feature}
+            </Text>
+          </HStack>
+        ))}
+      </VStack>
+      <Button
+        colorScheme="teal"
+        variant="solid"
+        size="md"
+        rounded="md"
+        w="100%"
+      >
+        Şimdi Deneyin
+      </Button>
+    </Box>
+  );
+};
+
+export default LibraryPricing;