Skip to content

Feat/UI update #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lancesatorre wants to merge 3 commits into
base: feat/ui-update
Choose a base branch
from
Open

Feat/UI update #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
556255e
feat[SATORRE]: Responsiveness of Transaction. Profile, Only Personnel…
Lancesatorre Oct 31, 2025
31d94b5
Merge branch 'jnnzz:feat/ui-update' into feat/ui-update
Lancesatorre Oct 31, 2025
24515ff
fix[SATORRE]: Landing Page Fixed, All sections are equal margin. Logi…
Lancesatorre Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions client/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,15 +266,15 @@ export default function Navbar() {
"about"
)}`}
>
About
Help
</button>
<button
onClick={(e) => handleLinkClick("/#help", e)}
className={`px-4 py-2 rounded-lg font-medium text-left ${getActiveClass(
"help"
)}`}
>
Help
About
</button>
<button
onClick={(e) => handleLinkClick("/#faq", e)}
Expand Down
147 changes: 90 additions & 57 deletions client/src/pages/AboutUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,91 @@
import React from 'react'
import { Shield, Zap, CheckCircle2, Folder, BadgeCheck } from 'lucide-react'
import React from "react";
import { Shield, Zap, CheckCircle2, Folder, BadgeCheck } from "lucide-react";

export default function AboutUs() {
return (
<div className="w-full min-h-screen sm:gap-10 flex flex-col lg:flex-row justify-center items-center mt-20 sm:mt-7 py-16 px-10 sm:px-8">
{/* Left side */}
<div className="w-full lg:w-1/2 flex justify-center ml-7 mr-7 relative mb-12 lg:mb-0">
<div className="absolute -top-13 w-70 h-40 sm:w-100 sm:h-70 bg-[#F9AB00]/25 rounded-full filter blur-xl opacity-20"></div>

<div className="w-full min-h-screen gap-10 flex flex-col xl:flex-row justify-center items-center mt-30 sm:mt-10">
{/* Left side */}
<div className="w-full lg:w-1/2 flex justify-center xl:ml-35 xl:mr-35 relative mb-12 lg:mb-0">
{/* Container with scaling */}
<div className="relative flex justify-center w-[380px] sm:w-[450px] md:w-[470px] lg:w-[500px]
transform origin-center scale-90 sm:scale-90 md:scale-100">
<div
className="relative flex justify-center w-[380px] sm:w-[450px] md:w-[470px] lg:w-[500px]
transform origin-center scale-90 sm:scale-90 md:scale-100 lg:scale-130 xl:scale-120"
>
{/* Main ticket */}
<div className="bg-white w-1/2 shadow-sm border border-[#E2E3E4] rounded-xl
<div
className="bg-white w-1/2 shadow-sm border border-[#E2E3E4] rounded-xl
px-8 sm:px-12 py-12 sm:py-16 text-center
text-4xl sm:text-4xl md:text-5xl font-bold text-blue-600">
text-4xl sm:text-4xl md:text-5xl font-bold text-blue-600"
>
P01
</div>

{/* Floating tags */}
<div className="absolute font-semibold top-12 -left-4 sm:top-17 sm:-left-7 md:top-17 md:-left-11 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2">
<div
className="absolute font-semibold top-12 -left-4 sm:top-17 sm:-left-7 md:top-17 md:-left-11 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2"
>
<img src="assets/check.svg" alt="" />
Enrollment/Transfer
Enrollment/Transfer
</div>

<div className="absolute font-semibold top-22 -left-1 sm:top-27 sm:-left-1 md:top-28 md:-left-3 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2">
<img src="assets/check.svg" alt="" />Temporary Gate Pass
<div
className="absolute font-semibold top-22 -left-1 sm:top-27 sm:-left-1 md:top-28 md:-left-3 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2"
>
<img src="assets/check.svg" alt="" />
Temporary Gate Pass
</div>

<div className="absolute font-semibold top-32 left-14 sm:top-37 sm:left-17 md:top-39 md:left-18 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2">
<div
className="absolute font-semibold top-32 left-14 sm:top-37 sm:left-17 md:top-39 md:left-18 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2"
>
<img src="assets/check.svg" alt="" /> Uniform Exemption
</div>

<div className="absolute font-semibold -top-7 right-19 sm:-top-7 sm:right-23 md:-top-7 md:right-24 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2">
<img src="assets/check.svg" alt="" />Good Moral
<div
className="absolute font-semibold -top-7 right-19 sm:-top-7 sm:right-23 md:-top-7 md:right-24 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2"
>
<img src="assets/check.svg" alt="" />
Good Moral
</div>

<div className="absolute font-semibold top-3 -right-3 sm:top-3 sm:-right-2 md:top-4 md:-right-6 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2">
<img src="assets/check.svg" alt="" />Insurance Payment
<div
className="absolute font-semibold top-3 -right-3 sm:top-3 sm:-right-2 md:top-4 md:-right-10 xl:-right-6 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2"
>
<img src="assets/check.svg" alt="" />
Insurance Payment
</div>

<div className="absolute font-semibold top-13 right-2 sm:top-13 sm:right-3 md:top-15 md:-right-0 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2">
<div
className="absolute font-semibold top-13 right-0 sm:top-13 sm:right-4 md:top-15 md:-right-4 xl:-right-0 bg-white shadow-xs rounded-xl
border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm
flex items-center gap-2"
>
<img src="assets/check.svg" alt="" /> Transmittal Letter
</div>
</div>
</div>


{/* Right side */}
<div className="w-full pl-20 lg:w-1/2 lg:pl-8 xl:pl-12 text-left mr-15">
<h1 className="text-3xl sm:text-4xl font-medium leading-tight">Built to Streamline</h1>
<h1 className="text-3xl sm:text-4xl font-medium leading-tight mt-2">Your Campus Exercise</h1>
<p className="mt-4 text-gray-600 text-base sm:text-lg">
Join thousands of students and staff who use ExeQueue to save time and reduce wait times.
<div className="w-full sm:pl-20 lg:pl-8 xl:pl-12 text-left sm:mr-15 lg:mt-25 xl:mt-0">
<h1 className="text-2xl sm:text-4xl font-medium leading-tight">
Built to Streamline
</h1>
<h1 className="text-2xl sm:text-4xl font-medium leading-tight mt-2">
Your Campus Exercise
</h1>
<p className="mt-4 text-gray-600 text-base text-md sm:text-lg">
Join thousands of students and staff who use ExeQueue to save time and
reduce wait times.
</p>

{/* Features */}
Expand All @@ -74,39 +95,51 @@ export default function AboutUs() {
<Shield className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
</div>
<div>
<h2 className="font-semibold text-lg sm:text-lg mb-1">Secure</h2>
<p className="text-gray-600 text-md sm:text-md">Your information stays safe at all times.</p>
<h2 className="font-semibold text-lg sm:text-lg mb-1">Secure</h2>
<p className="text-gray-600 text-md sm:text-md">
Your information stays safe at all times.
</p>
</div>
</div>
<div className="gap-10">
<div className='inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2'>
<Zap className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
</div>
<div className='gap-10'>
<div className="inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2">
<Zap className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
</div>
<div className="gap-10">
<h2 className="font-semibold text-lg sm:text-lg mb-1">Fast</h2>
<p className="text-gray-600 text-md">Get in line and get real-time updates in seconds.</p>
<p className="text-gray-600 text-md">
Get in line and get real-time updates in seconds.
</p>
</div>
</div>
<div className="gap-3">
<div className='inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2'>
<BadgeCheck className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
<div className="inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2">
<BadgeCheck className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
</div>
<div>
<h2 className="font-semibold text-base sm:text-lg mb-1">Reliable</h2>
<p className="text-gray-600 text-md sm:text-md">Always available when you need it.</p>
<h2 className="font-semibold text-base sm:text-lg mb-1">
Reliable
</h2>
<p className="text-gray-600 text-md sm:text-md">
Always available when you need it.
</p>
</div>
</div>
<div className="gap-3">
<div className='inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2'>
<Folder className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
<div className="inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2">
<Folder className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
</div>
<div className=''>
<h2 className="font-semibold text-base sm:text-lg mb-1">Organized</h2>
<p className="text-gray-600 text-md sm:text-md">A structured and orderly digital queue for everyone.</p>
<div className="">
<h2 className="font-semibold text-base sm:text-lg mb-1">
Organized
</h2>
<p className="text-gray-600 text-md sm:text-md">
A structured and orderly digital queue for everyone.
</p>
</div>
</div>
</div>
</div>
</div>
)
}
);
}
10 changes: 5 additions & 5 deletions client/src/pages/Contact.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { Globe } from "lucide-react";

export default function Contact() {
return (
<footer className="bg-[#10458B] mt-20 text-white py-8 px-6 md:px-15 rounded-4xl w-full xl:w-[95%] 2xl:w-[100%]">
<div className="max-w-8xl mx-auto flex flex-col md:flex-row justify-between items-start gap-40">
<footer className="bg-[#10458B] mt-20 text-white py-8 rounded-4xl w-full">
<div className="max-w-8xl mx-auto flex flex-col lg:flex-row justify-between items-start gap-10 lg:gap-40">
{/* Left Section */}
<div className="md:mx-10 lg:mx-20 flex flex-col max-w-md w-full top-1/2 transform -translate-y-[15%] ">
<div className="ml-10 pr-20 sm:pr-0 md:mx-10 lg:mx-20 flex flex-col max-w-md w-full top-1/2 transform -translate-y-[15%] ">
<div className="flex items-center gap-2">
{/* Logo */}
<div className="w-30 h-30 flex items-center justify-center rounded-full left-1/2 transform -translate-x-[30%] ">
Expand All @@ -18,7 +18,7 @@ export default function Contact() {
/>
</div>
<h1
className="text-2xl font-bold left-1/2 transform -translate-x-[55%]"
className=" text-xl sm:text-2xl font-bold left-1/2 transform -translate-x-[55%]"
style={{ fontFamily: "Montserrat, sans-serif" }}
>
ExeQueue
Expand All @@ -45,7 +45,7 @@ export default function Contact() {
</div>

{/* Middle - Services */}
<div className="md:mr-20 lg:mr-40 grid grid-cols-2 gap-20">
<div className="md:mr-20 lg:mr-40 ml-10 grid grid-cols-2 gap-20">
<div className="text-left w-full sm:w-auto">
<h2 className="text-white font-medium mb-3">Service</h2>
<ul className="space-y-2 text-gray-300 text-sm md:text-base">
Expand Down
6 changes: 3 additions & 3 deletions client/src/pages/FAQs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,9 @@ export default function FAQ() {
};

return (
<div className="w-full xl:w-[70%] 2xl:w-[90%] mt-10 flex items-center flex-col xl:flex-row lg:gap-16 ">
<div className="w-full mt-25 sm:mt-0 flex items-center flex-col xl:flex-row lg:gap-16 ">
{/* Left side: Categories */}
<div className="w-full xl:w-3xl flex flex-col gap-4 mb-8 lg:mb-0 p-7 lg:p-0">
<div className="w-full xl:w-3xl flex flex-col gap-4 mb-8 lg:mb-0 ">
<h2 className="text-3xl sm:text-4xl lg:text-4xl text-left font-semibold text-gray-900 mb-2">
Frequently Asked Questions
</h2>
Expand Down Expand Up @@ -128,7 +128,7 @@ export default function FAQ() {
</div>

{/* Right side: Accordion */}
<div className="w-full md:w-3xl lg:w-3xl flex flex-col justify-center p-7 lg:p-0">
<div className="w-full xl:w-3xl flex flex-col justify-center">
<div className="flex flex-col gap-4">
{faqs[activeCategory].map((item, index) => (
<div
Expand Down
41 changes: 25 additions & 16 deletions client/src/pages/Help.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,63 @@
export default function Help() {
return (
<div className="w-full flex justify-center mt-24 sm:mt-20 lg:mt-35 items-center">
<div className="flex flex-col xl:flex-row bg-[#DDEAFC]/55 sm:mx-10 md:mx-20 rounded-2xl justify-start items-baseline p-10 sm:p-0">
<div className="w-full min-h-screen flex justify-center xl:mt-10 items-center">
<div className="flex flex-col xl:flex-row bg-[#DDEAFC]/55 gap-0 xl:gap-13 mt-15 xl:mt-5 rounded-2xl justify-start items-baseline">
{/* Left side */}
<div className="w-full py-10 md:py-10 xl:py-0 md:w-full xl:w-[40%] flex flex-col text-center xl:text-start xl:ml-10 mb-10 xl:mb-0 2xl:ml-20">
<h1 className="text-3xl sm:text-4xl md:text-4xl lg:text-4xl xl:text-4xl 2xl:text-5xl font-semibold text-gray-900 leading-tight">
<div className="w-full py-10 px-5 sm:px-0 md:py-10 xl:py-0 md:w-full xl:w-[40%] flex flex-col text-center xl:text-start xl:ml-10 2xl:ml-20">
<h1 className="text-2xl sm:text-4xl md:text-4xl lg:text-4xl xl:text-4xl 2xl:text-5xl font-semibold text-gray-900 leading-tight">
How Does it Work?
</h1>
<p className="mt-4 text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl text-gray-700">
<p className="mt-4 text-md sm:text-xl md:text-xl lg:text-xl xl:text-xl text-gray-700">
No lines, no stress—just follow these steps.
</p>
</div>

{/* Right side - single column for mobile AND iPad Pro, two columns only on xl screens (large PC) */}
<div className="w-full md:w-full xl:w-1/2 xl:min-h-[80vh] grid grid-cols-1 2xl:grid-cols-2 gap-6 xl:gap-8 xl:mr-5 2xl:mr-20 sm:p-10 md:p-10 xl:p-0 xl:pt-20 2xl:pt-40">

<div className="w-full md:w-full xl:w-1/2 xl:min-h-[80vh] grid grid-cols-1 lg:grid-cols-2 gap-6 xl:gap-8 xl:mr-5 2xl:mr-20 p-5 pb-10 sm:p-10 xl:p-0 xl:pt-20 2xl:pt-25">
{/* Step 1 */}
<div className="flex items-start gap-4 xl:gap-5">
<span className="text-4xl md:text-4xl xl:text-4xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">1</span>
<span className="text-4xl md:text-4xl xl:text-5xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">
1
</span>
<p className="text-base md:text-lg xl:text-base 2xl:text-xl text-start font-light pt-2 xl:pt-2">
Choose your queue type — Priority (for PWDs, seniors, etc.) or Standard for regular requests.
Choose your queue type — Priority (for PWDs, seniors, etc.) or
Standard for regular requests.
</p>
</div>

{/* Step 2 */}
<div className="flex items-start gap-4 xl:gap-5">
<span className="text-4xl md:text-4xl xl:text-4xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">2</span>
<span className="text-4xl md:text-4xl xl:text-5xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">
2
</span>
<p className="text-base md:text-lg xl:text-base 2xl:text-xl text-start font-light pt-2 xl:pt-2">
Fill in your details like name, ID number, and contact information.
Fill in your details like name, ID number, and contact
information.
</p>
</div>

{/* Step 3 */}
<div className="flex items-start gap-4 xl:gap-5">
<span className="text-4xl md:text-4xl xl:text-4xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">3</span>
<span className="text-4xl md:text-4xl xl:text-5xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">
3
</span>
<p className="text-base md:text-lg xl:text-base 2xl:text-xl text-start font-light pt-2 xl:pt-2">
Select the service you need, such as Good Moral Certificate, Insurance Payment, Gate Pass, and more.
Select the service you need, such as Good Moral Certificate,
Insurance Payment, Gate Pass, and more.
</p>
</div>

{/* Step 4 */}
<div className="flex items-start gap-4 xl:gap-5">
<span className="text-4xl md:text-4xl xl:text-4xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">4</span>
<span className="text-4xl md:text-4xl xl:text-5xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">
4
</span>
<p className="text-base md:text-lg xl:text-base 2xl:text-xl text-start font-light pt-2 xl:pt-2">
Review your information and confirm to get your queue number.
</p>
</div>

</div>
</div>
</div>
);
}
}
Loading