chore:updated file names, folder structures and the landing page UI

Author: ipetersenpai

src/assets/black_background.webp

@@ -2,15 +2,14 @@ import React, { useState, useEffect } from "react";
 import { IoCloseOutline } from "react-icons/io5";
 import LoginForm from "./LoginForm";
 import RegisterForm from "./RegisterForm";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch } from "react-redux";
 import { resetStatus } from "../../redux/slice/auth/loginSlice";
 import { resetRegisterStatus } from "../../redux/slice/auth/registerSlice";
 
 const AuthenticationModal = ({ openModal, closeModal }) => {
   const dispatch = useDispatch();
   const [modalHandler, setModalHandler] = useState(false);
   const [currentPage, setCurrentPage] = useState("login");
-  const loginStatus = useSelector((state) => state.userLogin?.status);
 
   const handleModeChange = (mode) => {
     setCurrentPage(mode);

src/components/Auth/Auth.jsx

@@ -32,6 +32,7 @@ const RegisterForm = ({ handleModeChange }) => {
     const registerData = {
       first_name: values.first_name,
       last_name: values.last_name,
+      school_belong: values.selected_school,
       username: values.register_username,
       password: values.register_password,
     };

src/components/Auth/RegisterForm.jsx

@@ -103,6 +103,22 @@ const UpdateInfoForm = ({ userId, closeModal }) => {
             </p>
           )}
         </div>
+
+        <div className="mb-5 w-full">
+          <TextField
+            disabled
+            label="School Belong To"
+            variant="outlined"
+            name="school_belong"
+            className="w-full"
+            defaultValue={userInfo.school_belong}
+            inputProps={{
+              style: {
+                height: "14px",
+              },
+            }}
+          />
+        </div>
         {complete === "loading" ? (
           <>
             <Button

src/components/Auth/updateInfoForm.jsx

@@ -8,16 +8,16 @@ import { TextField } from "@mui/material";
 import { useForm } from "react-hook-form";
 import FormControl from "@mui/material/FormControl";
 import MenuItem from "@mui/material/MenuItem";
-import TemplateOne from "./../assets/certificate-sample/two_signature.webp";
-import TemplateTwo from "./../assets/certificate-sample/three_signature.webp";
-import TemplateThree from "./../assets/certificate-sample/four_signature.webp";
-import ImageIcon from "./../assets/image_icon.webp";
+import TemplateOne from "./../../assets/certificate-sample/two_signature.webp";
+import TemplateTwo from "./../../assets/certificate-sample/three_signature.webp";
+import TemplateThree from "./../../assets/certificate-sample/four_signature.webp";
+import ImageIcon from "./../../assets/image_icon.webp";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useDispatch, useSelector } from "react-redux";
-import { createSession } from "../redux/slice/session/createSession";
-import { getUserDatafromToken } from "../utils/extractJWT";
+import { createSession } from "../../redux/slice/session/createSession";
+import { getUserDatafromToken } from "../../utils/extractJWT";
 
-const GetStarted = ({ openModal, closeModal }) => {
+const SPITICFormat = ({ openModal, closeModal }) => {
   const dispatch = useDispatch();
   const SessionStatus = useSelector((state) => state.createSession?.status);
   const [complete, setComplete] = useState("idle");
@@ -48,7 +48,7 @@ const GetStarted = ({ openModal, closeModal }) => {
       section: values.section,
       quarter: values.quarter,
       dateToPresent: values.date_to_present,
-      schoolName: values.school_name,
+      designationPlace: values.designation_place,
       signatoryName1:
         watch("signatory_name1") === "" ||
         watch("signatory_name1") === undefined
@@ -212,7 +212,7 @@ const GetStarted = ({ openModal, closeModal }) => {
                   <div className="flex flex-col w-full">
                     <section className="flex flex-wrap gap-2 w-full h-full justify-center">
                       <button
-                        className="relative bg-[#ED6559] w-[48%] h-[170px] flex flex-col justify-end cursor-pointer rounded-[10px] p-2"
+                        className="relative bg-[#ED6559] w-[48%] h-[170px] flex flex-col justify-end cursor-pointer rounded-[10px] p-2 button-9"
                         onClick={() => {
                           pathHandler("path2");
                           setModalName("TEMPLATE FORMAT");
@@ -225,7 +225,7 @@ const GetStarted = ({ openModal, closeModal }) => {
                         </p>
                       </button>
                       <button
-                        className="relative bg-[#5AC648] w-[48%] h-[170px] flex flex-col justify-end cursor-pointer rounded-[10px] p-2"
+                        className="relative bg-[#5AC648] w-[48%] h-[170px] flex flex-col justify-end cursor-pointer rounded-[10px] p-2 button-9"
                         // onClick={() => {
                         //   // pathHandler("path2");
                         //   // setModalName("TEMPLATE FORMAT");
@@ -238,7 +238,7 @@ const GetStarted = ({ openModal, closeModal }) => {
                         </p>
                       </button>
                       <button
-                        className="relative bg-[#a057ff] w-[48%] h-[170px] flex flex-col justify-end cursor-pointer rounded-[10px] p-2"
+                        className="relative bg-[#a057ff] w-[48%] h-[170px] flex flex-col justify-end cursor-pointer rounded-[10px] p-2 button-9"
                         // onClick={() => {
                         //   // pathHandler("path2");
                         //   // setModalName("TEMPLATE FORMAT");
@@ -251,7 +251,7 @@ const GetStarted = ({ openModal, closeModal }) => {
                         </p>
                       </button>
                       <button
-                        className="relative bg-[#F5D45E] w-[48%] h-[170px] flex flex-col justify-end cursor-pointer rounded-[10px] p-2"
+                        className="relative bg-[#F5D45E] w-[48%] h-[170px] flex flex-col justify-end cursor-pointer rounded-[10px] p-2 button-9"
                         // onClick={() => {
                         //   // pathHandler("path2");
                         //   // setModalName("TEMPLATE FORMAT");
@@ -332,7 +332,7 @@ const GetStarted = ({ openModal, closeModal }) => {
                       FOUR SIGNATURE
                     </p>
                   </div>
-                  <div className="flex flex-row justify-end mt-2 mb-[-1rem]">
+                  <div className="flex flex-row justify-end mt-2 mb-[-1rem] z-10">
                     <button
                       className="py-2 bg-[#F5D45E] w-[150px] text-white font-bold rounded-md"
                       type="submit"
@@ -572,13 +572,29 @@ const GetStarted = ({ openModal, closeModal }) => {
                               3rd Quarter
                             </MenuItem>
                             <MenuItem
-                              value="2th Quarter"
+                              value="4th Quarter"
                               onClick={() => {
                                 setQuarter(false);
                               }}
                             >
                               4th Quarter
                             </MenuItem>
+                            <MenuItem
+                              value="1st Semester"
+                              onClick={() => {
+                                setQuarter(false);
+                              }}
+                            >
+                              1st Semester
+                            </MenuItem>
+                            <MenuItem
+                              value="2nd Semester"
+                              onClick={() => {
+                                setQuarter(false);
+                              }}
+                            >
+                              2nd Semester
+                            </MenuItem>
                           </TextField>
                           {errors.quarter && (
                             <p className="ml-1 mt-1 text-[13px] text-red-500 mb-[-1.5rem]">
@@ -616,23 +632,23 @@ const GetStarted = ({ openModal, closeModal }) => {
                       </div>
                       <div className="mb-3 w-full">
                         <TextField
-                          label="School Name"
+                          label="Designating place for the award ceremony"
                           variant="outlined"
-                          name="school_name"
+                          name="designation_place"
                           className="w-full"
-                          error={errors.school_name ? true : false}
+                          error={errors.designation_place ? true : false}
                           inputProps={{
                             style: {
                               height: "14px",
                             },
                           }}
-                          {...register("school_name", {
+                          {...register("designation_place", {
                             required: "This is required.",
                           })}
                         />
-                        {errors.school_name && (
+                        {errors.designation_place && (
                           <p className="ml-1 mt-1 text-[13px] text-red-500 mb-[-0.2rem]">
-                            {errors.school_name.message}
+                            {errors.designation_place.message}
                           </p>
                         )}
                       </div>
@@ -1514,4 +1530,4 @@ const GetStarted = ({ openModal, closeModal }) => {
   );
 };
 
-export default GetStarted;
+export default SPITICFormat;

src/components/GetStarted.jsx renamed to src/components/FormatSession/SPITICFormat.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Routes } from "react-router";
 import Landing from "../../screens/Landing";
 import Option1 from "../../screens/AcademicExcellence/Option1";
-import AcademicExcellence from "../../templates/AcademicExcellence";
+import SPITICTemplate from "../../templates/AcademicExcellence/SPITICTemplate";
 import NotFound from "../../screens/NotFound";
 const AuthenticateUser = () => {
   return (
@@ -13,7 +13,7 @@ const AuthenticateUser = () => {
         <Route path="*" element={<NotFound />} />
         <Route
           path="/generate-certificate/acadmic-excellence/"
-          element={<AcademicExcellence />}
+          element={<SPITICTemplate />}
         />
       </Routes>
     </>

src/components/Navigation/AuthenticateUser.jsx

@@ -111,30 +111,156 @@ html::-webkit-scrollbar-thumb:hover {
   background-color: #c4c4c4;
 }
 
-button {
+.shadow-text {
+  text-shadow: 2px 2px 4px rgba(0, 76, 198, 0.425); /* Horizontal offset, Vertical offset, Blur radius, Color */
+}
+
+/* CSS */
+.button-9 {
+  appearance: button;
+  backface-visibility: hidden;
   cursor: pointer;
+  line-height: 1.15;
+  outline: none;
+  overflow: hidden;
   position: relative;
-  transition: 0.2s;
+  text-align: center;
+  text-transform: none;
+  transform: translateZ(0);
+  transition: all 0.2s, box-shadow 0.08s ease-in;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.button-9:disabled {
+  cursor: default;
+}
+
+.button-9:focus {
+  box-shadow: rgba(50, 50, 93, 0.1) 0 0 0 1px inset,
+    rgba(50, 50, 93, 0.2) 0 6px 15px 0, rgba(0, 0, 0, 0.1) 0 2px 2px 0,
+    rgba(50, 151, 211, 0.3) 0 0 0 4px;
+}
+
+/* CSS */
+.button-52 {
+  font-size: 16px;
+  font-weight: 200;
+  letter-spacing: 1px;
+  padding: 13px 20px 13px;
+  outline: 0;
+  border: 1px solid black;
+  cursor: pointer;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
 }
 
-button::before {
+.button-52:after {
   content: "";
-  height: 3px;
-  width: 0;
-  left: 0;
-  bottom: 0;
+  background-color: #ffe54c;
+  width: 100%;
+  z-index: -1;
   position: absolute;
-  transition: 0.4s;
+  height: 100%;
+  top: 7px;
+  left: 7px;
+  transition: 0.2s;
+}
+
+.button-52:hover:after {
+  top: 0px;
+  left: 0px;
 }
 
-button:hover::before {
+@media (min-width: 768px) {
+  .button-52 {
+    padding: 13px 50px 13px;
+  }
+}
+
+/* CSS */
+.button-53 {
+  border: 0 solid #e5e7eb;
+  box-sizing: border-box;
+  color: #000000;
+  display: flex;
+  font-family: ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 700;
+  justify-content: center;
+  line-height: 1.75rem;
+  padding: 0.75rem 1.65rem;
+  position: relative;
+  text-align: center;
+  text-decoration: none #000000 solid;
+  text-decoration-thickness: auto;
   width: 100%;
+  max-width: 460px;
+  position: relative;
+  cursor: pointer;
+  transform: rotate(-2deg);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
 }
 
-button:active {
-  background-color: rgba(255, 255, 255, 0.1);
+.button-53:focus {
+  outline: 0;
 }
 
-.shadow-text {
-  text-shadow: 2px 2px 4px rgba(0, 76, 198, 0.425); /* Horizontal offset, Vertical offset, Blur radius, Color */
+.button-53:after {
+  content: "";
+  position: absolute;
+  border: 1px solid #000000;
+  bottom: 4px;
+  left: 4px;
+  width: calc(100% - 1px);
+  height: calc(100% - 1px);
+}
+
+.button-53:hover:after {
+  bottom: 2px;
+  left: 2px;
+}
+
+@media (min-width: 768px) {
+  .button-53 {
+    padding: 0.75rem 3rem;
+    font-size: 1.25rem;
+  }
+}
+
+.waviy {
+  position: relative;
+}
+
+.waviy span {
+  position: relative;
+  display: inline-block;
+  animation: flip 4s infinite, glow 6s infinite; /* Add glow animation */
+
+  animation-delay: calc(0.2 * var(--i));
+}
+
+@keyframes flip {
+  0%,
+  80% {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes glow {
+  0%,
+  100% {
+    text-shadow: 0 0 5px #fb7878, 0 0 5px #fb7878, 0 0 5px #fb7878; /* Adjust the colors and size as needed */
+  }
+  50% {
+    text-shadow: none;
+  }
 }

src/index.css

@@ -14,7 +14,7 @@ export const createSession = createAsyncThunk(
     formData.append("section", data.section);
     formData.append("quarter", data.quarter);
     formData.append("dateToPresent", data.dateToPresent);
-    formData.append("schoolName", data.schoolName);
+    formData.append("designationPlace", data.designationPlace);
     formData.append("signatoryName1", data.signatoryName1);
     formData.append("signatoryPosition1", data.signatoryPosition1);
     formData.append("signatoryName2", data.signatoryName2);