Skip to content

Commit e9bf2fa

Browse files
ipetersenpaiipetersenpai
committed
feat:landing page user manual placeholder added
1 parent 6d3b2ef commit e9bf2fa

File tree

5 files changed

+348
-56
lines changed

5 files changed

+348
-56
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@mui/x-data-grid": "^6.19.6",
1818
"@react-pdf/renderer": "^3.4.0",
1919
"@reduxjs/toolkit": "^2.2.1",
20+
"aos": "^3.0.0-beta.6",
2021
"axios": "^1.6.8",
2122
"jwt-decode": "^4.0.0",
2223
"react": "^18.2.0",

‎src/App.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function App() {
3131
setIsLoading(false);
3232
};
3333

34-
const intervalId = setInterval(checkTokenValidity, 1200);
34+
const intervalId = setInterval(checkTokenValidity, 900);
3535

3636
return () => clearInterval(intervalId);
3737
}, [tokenCookie]);

‎src/components/Footer.jsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from "react";
2+
import BridgetteLogo from "./../assets/bridgette-logo.webp";
3+
import { FaPhone } from "react-icons/fa6";
4+
import { MdEmail } from "react-icons/md";
5+
6+
const Footer = () => {
7+
return (
8+
<div className="relative w-full bg-[#F5D45E]">
9+
<div className="flex flex-col lg:w-[900px] w-full lg:p-0 p-4 mx-auto">
10+
<div className="flex md:hidden flex-col mx-auto">
11+
<div className="flex flex-row items-center">
12+
<img src={BridgetteLogo} className="h-[60px] w-[65px]" />
13+
<p className="font-bold font_sansita text-[34px]">BRIDGETTE</p>
14+
</div>
15+
</div>
16+
<section className="flex md:flex-row flex-col justify-between mt-5 border-b-[1px] pb-10 border-[#323232]">
17+
<div className="flex flex-col">
18+
<p className="font_sansita font-bold text-[24px]">CONTACT US</p>
19+
<div className="flex flex-row items-center gap-2 mt-2">
20+
<FaPhone className="text-white text-[24px]" />
21+
<p>+6391-203-3121</p>
22+
</div>
23+
<div className="flex flex-row items-center gap-2 mt-2">
24+
<MdEmail className="text-white text-[26px]" />
25+
<p>[email protected]</p>
26+
</div>
27+
</div>
28+
29+
<div className="md:flex hidden flex-col">
30+
<div className="flex flex-row items-center">
31+
<img src={BridgetteLogo} className="h-[60px] w-[65px]" />
32+
<p className="font-bold font_sansita text-[34px]">BRIDGETTE</p>
33+
</div>
34+
</div>
35+
</section>
36+
<p className="text-center mt-5 mb-10 font-bold text-[15px]">
37+
© 2024 BRIDGETTE - CERTIFICATE GENERATOR{" "}
38+
</p>
39+
</div>
40+
</div>
41+
);
42+
};
43+
44+
export default Footer;

‎src/screens/Landing.jsx

+263-40
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,16 @@ import { getUserDatafromToken } from "../utils/extractJWT";
1010
import { useDispatch, useSelector } from "react-redux";
1111
import { getSession } from "../redux/slice/session/getSession";
1212
import { deleteSession } from "../redux/slice/session/resetSession";
13+
import sample from "./../assets/certificate-sample/two_signature.webp";
1314
import { Button } from "@mui/material";
15+
import AOS from "aos";
16+
import "aos/dist/aos.css";
17+
import Footer from "../components/Footer";
18+
19+
AOS.init({
20+
duration: 1000,
21+
easing: "ease",
22+
});
1423

1524
const Landing = () => {
1625
const navigate = useNavigate();
@@ -66,55 +75,269 @@ const Landing = () => {
6675
)}
6776

6877
<Navbar />
69-
<div className="font-oxygen h-full w-full flex flex-col items-center">
78+
<div className="font-oxygen h-[100%] w-full flex flex-col items-center">
7079
<section className="flex flex-col mt-[90px] px-4 w-full md:w-[800px]">
71-
<img src={BridgetteLogo} className="h-[95px] w-[95px] mx-auto" />
72-
<p className="font_sansita text-center font-bold text-[25px] md:text-[34px]">
73-
BRIDGETTE
74-
</p>
75-
<h1 className="text-[#ED6559] font_sansita font-bold text-[30px] md:text-[70px] mt-[-0.4rem] md:mt-[-1.4rem] text-center">
76-
CERTIFICATE GENERATOR
77-
</h1>
78-
<p className="text-[14px] md:text-[24px] text-center">
79-
Generate input effortlessly and receive instant rewards.
80-
</p>
81-
</section>
82-
{SessionStatus === "Session found" ? (
83-
<button
84-
onClick={() => {
85-
navigate("/academic-excellence/");
86-
}}
87-
className="text-[#F5D45E] text-[20px] font-bold mt-[55px] border-[#F5D45E] border-[3px] p-2 rounded-[10px] w-[220px] hover:bg-[#F5D45E] hover:text-white"
88-
>
89-
Continue
90-
</button>
91-
) : SessionStatus === "Session not found" ? (
92-
<button
93-
onClick={OpenModalHandler}
94-
className="text-[#F5D45E] text-[20px] font-bold mt-[55px] border-[#F5D45E] border-[3px] p-2 rounded-[10px] w-[220px] hover:bg-[#F5D45E] hover:text-white"
95-
>
96-
Get Started
97-
</button>
98-
) : (
99-
<button
100-
disabled
101-
className="text-[#F5D45E] text-[20px] font-bold mt-[55px] border-[#F5D45E] border-[3px] p-2 rounded-[10px] w-[220px] hover:bg-[#F5D45E] hover:text-white"
102-
>
103-
Loading
104-
</button>
105-
)}
80+
<div className="w-full" data-aos="zoom-in">
81+
<img src={BridgetteLogo} className="h-[95px] w-[95px] mx-auto" />
82+
<p className="font_sansita text-center font-bold text-[25px] md:text-[34px]">
83+
BRIDGETTE
84+
</p>
85+
</div>
10686

87+
<div className="w-full" data-aos="zoom-in">
88+
<h1 className="text-[#ED6559] font_sansita font-bold text-[30px] md:text-[70px] mt-[-0.4rem] md:mt-[-1.4rem] text-center">
89+
CERTIFICATE GENERATOR
90+
</h1>
91+
<p className="text-[14px] md:text-[24px] text-center">
92+
Generate effortlessly and receive instant outputs.
93+
</p>
94+
</div>
95+
</section>
96+
<section className="h-[170px]">
97+
{SessionStatus === "Session found" ? (
98+
<button
99+
onClick={() => {
100+
navigate("/academic-excellence/");
101+
}}
102+
className="text-[#F5D45E] text-[20px] font-bold mt-[55px] border-[#F5D45E] border-[3px] p-2 rounded-[10px] w-[220px] hover:bg-[#F5D45E] hover:text-white"
103+
>
104+
Continue
105+
</button>
106+
) : SessionStatus === "Session not found" ? (
107+
<button
108+
onClick={OpenModalHandler}
109+
className="text-[#F5D45E] text-[20px] font-bold mt-[55px] border-[#F5D45E] border-[3px] p-2 rounded-[10px] w-[220px] hover:bg-[#F5D45E] hover:text-white"
110+
>
111+
Get Started
112+
</button>
113+
) : (
114+
<button
115+
disabled
116+
className="text-[#F5D45E] text-[20px] font-bold mt-[55px] border-[#F5D45E] border-[3px] p-2 rounded-[10px] w-[220px] hover:bg-[#F5D45E] hover:text-white"
117+
>
118+
Loading
119+
</button>
120+
)}
121+
</section>
107122
{/* -----User Manual on how to use----- */}
108-
<div className="relative bg-[#323232] w-full h-full mt-[60px]">
109-
<div className="flex flex-col w-[900px] bg-red-300 mx-auto">
110-
<p>user manual</p>
123+
<div className="relative bg-[#323232] min-w-full h-full mt-[60px] overflow-hidden pb-10">
124+
<div className="flex flex-col lg:w-[900px] w-full h-full mx-auto px-4 lg:px-0">
125+
<h1
126+
className="font-bold font_sansita text-[45px] text-[#F5D45E]"
127+
data-aos="fade-right"
128+
data-aos-offset="300"
129+
data-aos-easing="ease-in-sine"
130+
>
131+
How to Use?
132+
</h1>
133+
<p
134+
className="text-white mb-32 md:w-[80%] md:text-start text-justify"
135+
data-aos="fade-right"
136+
data-aos-offset="300"
137+
data-aos-easing="ease-in-sine"
138+
>
139+
Here are the comprehensive steps detailing how to effectively
140+
utilize the system for creating and generating certificates for
141+
students, ensuring a streamlined process from initial setup to
142+
final certificate issuance.
143+
</p>
144+
{/* -------Step 1-------- */}
145+
<div
146+
className="flex md:flex-row flex-col w-full justify-end gap-4 mb-20"
147+
data-aos="fade-up-left"
148+
data-aos-anchor-placement="center-bottom"
149+
>
150+
<div className="flex flex-col md:w-[420px] md:mr-2 ">
151+
<p className="font-bold font_sansita text-[34px] text-[#F5D45E] md:text-end">
152+
Step 1
153+
</p>
154+
155+
<p className="lg:text-end text-justify text-white text-[15px]">
156+
<span className="font-bold text-[#F5D45E]">
157+
Prepare Template{" "}
158+
</span>
159+
- Design a landscape-oriented certificate template on a
160+
letter-size (8.5 x 11) background. Ensure the template meets
161+
your design preferences. You can download the sample template
162+
file from{" "}
163+
<span className="text-[#47A2FF] hover:underline z-10 cursor-pointer">
164+
Link
165+
</span>{" "}
166+
</p>
167+
</div>
168+
<img
169+
src={sample}
170+
className="h-[250px] w-[360px] transform md:rotate-[7deg] lg:mr-[-7rem] bg-slate-400"
171+
/>
172+
</div>
173+
{/* -------Step 1 end-------- */}
174+
{/* -------Step 2-------- */}
175+
<div
176+
className="flex md:flex-row flex-col-reverse w-full justify-start gap-4 mb-20"
177+
data-aos="fade-up-right"
178+
data-aos-anchor-placement="center-bottom"
179+
>
180+
<img
181+
src={sample}
182+
className="h-[250px] w-[360px] transform md:rotate-[-7deg] lg:ml-[-7rem] bg-slate-400"
183+
/>
184+
<div className="flex flex-col md:w-[420px] md:ml-2">
185+
<p className="font-bold font_sansita text-[34px] text-[#F5D45E] text-start">
186+
Step 2
187+
</p>
188+
<p className="lg:text-start text-justify text-white text-[15px]">
189+
<span className="font-bold text-[#F5D45E]">
190+
Organize Student Data{" "}
191+
</span>
192+
- Compile a list of students per section with their grades in
193+
an Excel file. Columns should be labeled "awardeeName" and
194+
"avg" to maintain consistency and prevent errors. Download a
195+
sample Excel file from{" "}
196+
<span className="text-[#47A2FF] hover:underline z-10 cursor-pointer">
197+
Link
198+
</span>{" "}
199+
for reference.
200+
</p>
201+
</div>
202+
</div>
203+
{/* -------Step 2 end-------- */}
204+
{/* -------Step 3-------- */}
205+
<div
206+
className="flex md:flex-row flex-col w-full justify-end gap-4 mb-20"
207+
data-aos="fade-up-left"
208+
data-aos-anchor-placement="center-bottom"
209+
>
210+
<div className="flex flex-col md:w-[420px] md:mr-2 ">
211+
<p className="font-bold font_sansita text-[34px] text-[#F5D45E] md:text-end">
212+
Step 3
213+
</p>
214+
<p className="lg:text-end text-justify text-white text-[15px]">
215+
<span className="font-bold text-[#F5D45E]">
216+
Create Account{" "}
217+
</span>
218+
- If new to the system, sign up by clicking the login button
219+
and then the get started button.
220+
</p>
221+
</div>
222+
<img
223+
src={sample}
224+
className="h-[250px] w-[360px] transform md:rotate-[7deg] lg:mr-[-7rem] bg-slate-400"
225+
/>
226+
</div>
227+
{/* -------Step 3 end-------- */}
228+
{/* -------Step 4-------- */}
229+
<div
230+
className="flex md:flex-row flex-col-reverse w-full justify-start gap-4 mb-20"
231+
data-aos="fade-up-right"
232+
data-aos-anchor-placement="center-bottom"
233+
>
234+
<img
235+
src={sample}
236+
className="h-[250px] w-[360px] transform md:rotate-[-7deg] lg:ml-[-7rem] bg-slate-400"
237+
/>
238+
<div className="flex flex-col md:w-[420px] md:ml-2">
239+
<p className="font-bold font_sansita text-[34px] text-[#F5D45E] text-start">
240+
Step 4
241+
</p>
242+
<p className="lg:text-start text-justify text-white text-[15px]">
243+
<span className="font-bold text-[#F5D45E]">
244+
Set Up Session{" "}
245+
</span>
246+
- Configure the session by selecting certificate categories,
247+
total signatures, and attaching the certificate background
248+
prepared in Step 1. Fill in remaining details such as grade
249+
level, school name, section, and attach signatory signatures.
250+
</p>
251+
</div>
252+
</div>
253+
{/* -------Step 4 end-------- */}
254+
{/* -------Step 5-------- */}
255+
<div
256+
className="flex md:flex-row flex-col w-full justify-end gap-4 mb-20"
257+
data-aos="fade-up-left"
258+
data-aos-anchor-placement="center-bottom"
259+
>
260+
<div className="flex flex-col md:w-[420px] md:mr-2 ">
261+
<p className="font-bold font_sansita text-[34px] text-[#F5D45E] md:text-end">
262+
Step 5
263+
</p>
264+
<p className="lg:text-end text-justify text-white text-[15px]">
265+
<span className="font-bold text-[#F5D45E]">
266+
Generate Certificate{" "}
267+
</span>
268+
- Proceed to the dashboard after setting up the session.
269+
Import the Excel file prepared in Step 2 or manually input
270+
awardee names. The system automatically ranks students and
271+
excludes those not meeting criteria. Generate certificates by
272+
clicking the "Print All" button.
273+
</p>
274+
</div>
275+
<img
276+
src={sample}
277+
className="h-[250px] w-[360px] transform md:rotate-[7deg] lg:mr-[-7rem] bg-slate-400"
278+
/>
279+
</div>
280+
{/* -------Step 5 end-------- */}
281+
{/* -------Step 6-------- */}
282+
<div
283+
className="flex md:flex-row flex-col-reverse w-full justify-start gap-4 mb-20"
284+
data-aos="fade-up-right"
285+
data-aos-anchor-placement="center-bottom"
286+
>
287+
<img
288+
src={sample}
289+
className="h-[250px] w-[360px] transform md:rotate-[-7deg] lg:ml-[-7rem] bg-slate-400"
290+
/>
291+
<div className="flex flex-col md:w-[420px] md:ml-2">
292+
<p className="font-bold font_sansita text-[34px] text-[#F5D45E] text-start">
293+
Step 6
294+
</p>
295+
<p className="lg:text-start text-justify text-white text-[15px]">
296+
<span className="font-bold text-[#F5D45E]">
297+
Manage Batches{" "}
298+
</span>
299+
- To handle different certificate formats for another batch of
300+
awardees, reset the current session by clicking the trash
301+
button. Repeat Step 4 to configure the new session and proceed
302+
accordingly.
303+
</p>
304+
</div>
305+
</div>
306+
{/* -------Step 6 end-------- */}
307+
{/* -------Step 7-------- */}
308+
<div
309+
className="flex md:flex-row flex-col w-full justify-end gap-4 mb-20"
310+
data-aos="fade-up-left"
311+
data-aos-anchor-placement="center-bottom"
312+
>
313+
<div className="flex flex-col md:w-[320px] md:mr-2 ">
314+
<p className="font-bold font_sansita text-[34px] text-[#F5D45E] md:text-end">
315+
Step 7
316+
</p>
317+
<p className="lg:text-end text-justify text-white text-[15px]">
318+
<span className="font-bold text-[#F5D45E]">
319+
Update Profile{" "}
320+
</span>
321+
- Access the user icon on the menu and click "Edit Profile" to
322+
update personal details such as first name and last name.
323+
Change the password through the same menu option under "Edit
324+
Profile".
325+
</p>
326+
</div>
327+
<img
328+
src={sample}
329+
className="h-[250px] w-[360px] transform md:rotate-[7deg] lg:mr-[-7rem] bg-slate-400"
330+
/>
331+
</div>
332+
{/* -------Step 7 end-------- */}
111333
</div>
112334
</div>
335+
<Footer />
113336
</div>
114337

115338
{SessionStatus === "Session found" && (
116339
<>
117-
<div className="absolute md:right-7 md:bottom-7 right-4 bottom-4">
340+
<div className="fixed md:right-7 md:bottom-7 right-4 bottom-4">
118341
<Tooltip
119342
title="Reset current session to create new session."
120343
placement="left"

0 commit comments

Comments
 (0)