Merge pull request #41 from KNU-AEYE/39-landing-page-renewal

39 landing page renewal
KNU-AEYE · May 14, 2024 · 4b020be · 4b020be
2 parents eb01459 + 655579e
commit 4b020be
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 67 deletions.
diff --git a/aeye/app/page.tsx b/aeye/app/page.tsx
@@ -1,8 +1,83 @@
 "use client";
-
+import { Typography, SvgIcon, Button } from "@mui/material";
+import { styled } from "@mui/system";
 import { useEffect } from "react";
-import Image from "next/image";
-import { Paper, Stack, Typography } from "@mui/material";
+
+const RootContainer = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  minHeight: "100vh",
+});
+
+const ButtonContainer = styled("div")({
+  display: "flex",
+  gap: "16px",
+});
+
+const CustomTypography = styled(Typography)({
+  fontWeight: "bold",
+  fontStyle: "italic",
+  color: "#fff",
+  textAlign: "center",
+  textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)", // Adding shadow for more notability
+  fontSize: "8rem",
+});
+
+function GoogleIcon() {
+  return (
+    <SvgIcon>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M15.68 8.18182C15.68 7.61455 15.6291 7.06909 15.5345 6.54545H8V9.64364H12.3055C12.1164 10.64 11.5491 11.4836 10.6982 12.0509V14.0655H13.2945C14.8073 12.6691 15.68 10.6182 15.68 8.18182Z"
+          fill="#4285F4"
+        />
+        <path
+          d="M8 16C10.16 16 11.9709 15.2873 13.2945 14.0655L10.6982 12.0509C9.98545 12.5309 9.07636 12.8218 8 12.8218C5.92 12.8218 4.15273 11.4182 3.52 9.52727H0.858182V11.5927C2.17455 14.2036 4.87273 16 8 16Z"
+          fill="#34A853"
+        />
+        <path
+          d="M3.52 9.52C3.36 9.04 3.26545 8.53091 3.26545 8C3.26545 7.46909 3.36 6.96 3.52 6.48V4.41455H0.858182C0.312727 5.49091 0 6.70545 0 8C0 9.29455 0.312727 10.5091 0.858182 11.5855L2.93091 9.97091L3.52 9.52Z"
+          fill="#FBBC05"
+        />
+        <path
+          d="M8 3.18545C9.17818 3.18545 10.2255 3.59273 11.0618 4.37818L13.3527 2.08727C11.9636 0.792727 10.16 0 8 0C4.87273 0 2.17455 1.79636 0.858182 4.41455L3.52 6.48C4.15273 4.58909 5.92 3.18545 8 3.18545Z"
+          fill="#EA4335"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
+
+function KakaoIcon() {
+  return (
+    <SvgIcon>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="2500"
+        height="2500"
+        viewBox="0 0 256 256"
+      >
+        <path
+          fill="#FFE812"
+          d="M256 236c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0h216c11.046 0 20 8.954 20 20v216z"
+        />
+        <path d="M128 36C70.562 36 24 72.713 24 118c0 29.279 19.466 54.97 48.748 69.477-1.593 5.494-10.237 35.344-10.581 37.689 0 0-.207 1.762.934 2.434s2.483.15 2.483.15c3.272-.457 37.943-24.811 43.944-29.04 5.995.849 12.168 1.29 18.472 1.29 57.438 0 104-36.712 104-82 0-45.287-46.562-82-104-82z" />
+        <path
+          fill="#FFE812"
+          d="M70.5 146.625c-3.309 0-6-2.57-6-5.73V105.25h-9.362c-3.247 0-5.888-2.636-5.888-5.875s2.642-5.875 5.888-5.875h30.724c3.247 0 5.888 2.636 5.888 5.875s-2.642 5.875-5.888 5.875H76.5v35.645c0 3.16-2.691 5.73-6 5.73zM123.112 146.547c-2.502 0-4.416-1.016-4.993-2.65l-2.971-7.778-18.296-.001-2.973 7.783c-.575 1.631-2.488 2.646-4.99 2.646a9.155 9.155 0 0 1-3.814-.828c-1.654-.763-3.244-2.861-1.422-8.52l14.352-37.776c1.011-2.873 4.082-5.833 7.99-5.922 3.919.088 6.99 3.049 8.003 5.928l14.346 37.759c1.826 5.672.236 7.771-1.418 8.532a9.176 9.176 0 0 1-3.814.827c-.001 0 0 0 0 0zm-11.119-21.056L106 108.466l-5.993 17.025h11.986zM138 145.75c-3.171 0-5.75-2.468-5.75-5.5V99.5c0-3.309 2.748-6 6.125-6s6.125 2.691 6.125 6v35.25h12.75c3.171 0 5.75 2.468 5.75 5.5s-2.579 5.5-5.75 5.5H138zM171.334 146.547c-3.309 0-6-2.691-6-6V99.5c0-3.309 2.691-6 6-6s6 2.691 6 6v12.896l16.74-16.74c.861-.861 2.044-1.335 3.328-1.335 1.498 0 3.002.646 4.129 1.772 1.051 1.05 1.678 2.401 1.764 3.804.087 1.415-.384 2.712-1.324 3.653l-13.673 13.671 14.769 19.566a5.951 5.951 0 0 1 1.152 4.445 5.956 5.956 0 0 1-2.328 3.957 5.94 5.94 0 0 1-3.609 1.211 5.953 5.953 0 0 1-4.793-2.385l-14.071-18.644-2.082 2.082v13.091a6.01 6.01 0 0 1-6.002 6.003z"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}
 
 function GoogleLoginButton() {
   const handleLoginWithGoogle = async () => {
@@ -12,13 +87,16 @@ function GoogleLoginButton() {
   };
 
   return (
-    <Image
-      src="/signin-assets/[email protected]"
-      width={189}
-      height={40}
-      alt="kakao-login-button"
+    <Button
+      fullWidth
+      variant="outlined"
       onClick={handleLoginWithGoogle}
-    />
+      startIcon={<GoogleIcon />}
+      color="primary"
+      size="small"
+    >
+      Sign in with Google
+    </Button>
   );
 }
 
@@ -30,74 +108,34 @@ function KakaoLoginButton() {
   };
 
   return (
-    <Image
-      src="/signin-assets/kakao_login_medium_narrow.png"
-      width={183}
-      height={45}
-      alt="kakao-login-button"
+    <Button
+      fullWidth
+      variant="outlined"
       onClick={handleLoginWithKakao}
-    />
-  );
-}
-
-function LoginCard() {
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100vh",
-      }}
+      startIcon={<KakaoIcon />}
+      color="primary"
+      size="small"
     >
-      <Paper elevation={24} style={{ padding: "60px", textAlign: "center" }}>
-        <Stack spacing={3}>
-          <Typography variant="h4">AEYE</Typography>
-          <GoogleLoginButton />
-          <KakaoLoginButton />
-        </Stack>
-      </Paper>
-    </div>
+      Sign in with Kakao
+    </Button>
   );
 }
 
 export default function Landing() {
   useEffect(() => {
-    document.body.style.margin = "0";
-    document.body.style.padding = "0";
-    document.body.style.overflow = "hidden";
-    document.body.style.height = "100vh";
-
     document.body.style.background =
       "linear-gradient(135deg, #65d586 0%, #e0e0e0 100%)";
-    document.body.style.backgroundSize = "200% 200%";
-    document.body.style.animation = "waving 20s ease infinite";
-
-    const keyframes = `@keyframes waving {
-      0% { background-position: 0% 50%; opacity: 0.8; }
-      50% { background-position: 100% 50%; opacity: 1; }
-      100% { background-position: 0% 50%; opacity: 0.8; }
-    }`;
-
-    const styleSheet = document.styleSheets[0];
-    styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
-
-    return () => {
-      // Clean up the style changes when the component unmounts
-      document.body.style.removeProperty("margin");
-      document.body.style.removeProperty("padding");
-      document.body.style.removeProperty("overflow");
-      document.body.style.removeProperty("height");
-      document.body.style.removeProperty("background");
-      document.body.style.removeProperty("background-size");
-      document.body.style.removeProperty("animation");
-      styleSheet.deleteRule(styleSheet.cssRules.length - 1);
-    };
   }, []);
-
   return (
-    <Stack>
-      <LoginCard />
-    </Stack>
+    <RootContainer>
+      <CustomTypography variant="h1">AEYE</CustomTypography>
+      <Typography variant="overline" color="white" mb="15px" gutterBottom>
+        the smart survaillence system
+      </Typography>
+      <ButtonContainer>
+        <GoogleLoginButton />
+        <KakaoLoginButton />
+      </ButtonContainer>
+    </RootContainer>
   );
 }
diff --git a/aeye/public/signin-assets/kakao_login_medium_narrow.png b/aeye/public/signin-assets/kakao_login_medium_narrow.png
diff --git a/aeye/public/signin-assets/[email protected] b/aeye/public/signin-assets/[email protected]