Skip to content

feat: #384 [Frontend] Background Consistency Across All Pages #473

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

Merged
Olowodarey merged 1 commit into from
Mar 29, 2026
Merged

feat: #384 [Frontend] Background Consistency Across All Pages #473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
130 changes: 63 additions & 67 deletions frontend/src/app/Faq/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,80 +52,76 @@ export default function CryptoFAQ() {
};

return (
<div className="relative min-h-screen overflow-x-hidden text-white">
<PageBackground />
<PageBackground>
<Header />

<div className="relative z-10">
<Header />
<main className="max-w-5xl mx-auto px-6 pt-32 pb-20 text-white">
<section className="rounded-[2rem] border border-white/10 bg-[#111726]/85 p-6 shadow-[0_25px_80px_rgba(2,6,23,0.45)] backdrop-blur sm:p-10">
<div className="flex flex-col gap-5 border-b border-white/10 pb-8 sm:flex-row sm:items-end sm:justify-between">
<div className="space-y-3">
<p className="text-sm font-medium uppercase tracking-[0.28em] text-[#4FD1C5]">
Support
</p>
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
Frequently Asked Questions
</h1>
<p className="max-w-2xl text-base text-[#94a3b8]">
Find quick answers about crypto basics, tournaments, and how
to get started on InsightArena.
</p>
</div>

<main className="max-w-5xl mx-auto px-6 pt-32 pb-20">
<section className="rounded-[2rem] border border-white/10 bg-[#111726]/85 p-6 shadow-[0_25px_80px_rgba(2,6,23,0.45)] backdrop-blur sm:p-10">
<div className="flex flex-col gap-5 border-b border-white/10 pb-8 sm:flex-row sm:items-end sm:justify-between">
<div className="space-y-3">
<p className="text-sm font-medium uppercase tracking-[0.28em] text-[#4FD1C5]">
Support
</p>
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
Frequently Asked Questions
</h1>
<p className="max-w-2xl text-base text-[#94a3b8]">
Find quick answers about crypto basics, tournaments, and how
to get started on InsightArena.
</p>
</div>
<Link
href="/"
className="inline-flex items-center gap-2 self-start rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-[#d8dee9] transition hover:bg-white/10 hover:text-white"
>
<ChevronLeft size={18} />
<span>Back to home</span>
</Link>
</div>

<Link
href="/"
className="inline-flex items-center gap-2 self-start rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-[#d8dee9] transition hover:bg-white/10 hover:text-white"
<div className="mt-8 space-y-4">
{faqItems.map((item) => (
<div
key={item.id}
className="overflow-hidden rounded-2xl border border-white/10 bg-[#0f172a]/90"
>
<ChevronLeft size={18} />
<span>Back to home</span>
</Link>
</div>

<div className="mt-8 space-y-4">
{faqItems.map((item) => (
<div
key={item.id}
className="overflow-hidden rounded-2xl border border-white/10 bg-[#0f172a]/90"
<button
type="button"
className="flex w-full items-center justify-between gap-4 px-5 py-5 text-left transition hover:bg-white/5"
onClick={() => toggleFAQ(item.id)}
>
<button
type="button"
className="flex w-full items-center justify-between gap-4 px-5 py-5 text-left transition hover:bg-white/5"
onClick={() => toggleFAQ(item.id)}
>
<h2 className="text-lg font-semibold text-white sm:text-xl">
{item.id}. {item.question}
</h2>
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#4FD1C5] text-[#0f172a]">
{item.isOpen ? (
<Minus size={18} />
) : (
<Plus size={18} />
)}
</span>
</button>
<h2 className="text-lg font-semibold text-white sm:text-xl">
{item.id}. {item.question}
</h2>
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#4FD1C5] text-[#0f172a]">
{item.isOpen ? (
<Minus size={18} />
) : (
<Plus size={18} />
)}
</span>
</button>

{item.isOpen && (
<div className="border-t border-white/10 px-5 py-5 text-[15px] leading-7 text-[#cbd5e1]">
<p>{item.answer}</p>
</div>
)}
</div>
))}
</div>
{item.isOpen && (
<div className="border-t border-white/10 px-5 py-5 text-[15px] leading-7 text-[#cbd5e1]">
<p>{item.answer}</p>
</div>
)}
</div>
))}
</div>

<div className="mt-8 rounded-2xl border border-[#4FD1C5]/20 bg-[#0b1220] px-6 py-5">
<p className="text-sm leading-6 text-[#94a3b8]">
Still need help? Explore the platform from the homepage and
keep an eye on upcoming guides and community resources.
</p>
</div>
</section>
</main>
<div className="mt-8 rounded-2xl border border-[#4FD1C5]/20 bg-[#0b1220] px-6 py-5">
<p className="text-sm leading-6 text-[#94a3b8]">
Still need help? Explore the platform from the homepage and
keep an eye on upcoming guides and community resources.
</p>
</div>
</section>
</main>

<Footer />
</div>
</div>
<Footer />
</PageBackground>
);
}
217 changes: 110 additions & 107 deletions frontend/src/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
"use client"
"use client";
import { useState } from "react";
import type { NextPage } from "next";
import Head from "next/head";
import Link from "next/link";
import { Github } from "lucide-react";
import PageBackground from "@/component/PageBackground";

const Login: NextPage = () => {
const [formData, setFormData] = useState({
Expand Down Expand Up @@ -31,125 +32,127 @@ const Login: NextPage = () => {
<title>Login</title>
<meta name="description" content="Login to your account" />
</Head>
<main className="flex min-h-screen items-center justify-center bg-black px-4">
<div className="w-full max-w-md p-6 space-y-8">
{/* Progress Indicators */}
<div className="flex justify-center space-x-4">
<div className="w-16 h-1 bg-purple-600 rounded"></div>
<div className="w-16 h-1 bg-purple-600 rounded"></div>
<div className="w-16 h-1 bg-gray-600 rounded"></div>
<div className="w-16 h-1 bg-gray-600 rounded"></div>
</div>

<div className="text-center">
<h1 className="text-2xl font-bold text-white">Login Account</h1>
<p className="mt-1 text-gray-400">
Entre you date to create your account
</p>
</div>

<div className="mt-8 space-y-6">
{/* OAuth Buttons */}
<div className="grid grid-cols-2 gap-4">
<button
type="button"
aria-label="Continue with Google"
className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
>
<img
src="/google-logo.svg"
alt="Google"
className="w-5 h-5 mr-2"
/>
Google
</button>
<button
type="button"
aria-label="Continue with GitHub"
className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
>
<Github className="w-5 h-5 mr-2" />
Git Hub
</button>
<PageBackground>
<main className="flex min-h-screen items-center justify-center px-4">
<div className="w-full max-w-md p-6 space-y-8">
{/* Progress Indicators */}
<div className="flex justify-center space-x-4">
<div className="w-16 h-1 bg-purple-600 rounded"></div>
<div className="w-16 h-1 bg-purple-600 rounded"></div>
<div className="w-16 h-1 bg-gray-600 rounded"></div>
<div className="w-16 h-1 bg-gray-600 rounded"></div>
</div>

{/* Divider */}
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-700"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-black text-gray-400">or</span>
</div>
<div className="text-center">
<h1 className="text-2xl font-bold text-white">Login Account</h1>
<p className="mt-1 text-gray-400">
Entre you date to create your account
</p>
</div>

{/* Login Form */}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-white mb-1"
<div className="mt-8 space-y-6">
{/* OAuth Buttons */}
<div className="grid grid-cols-2 gap-4">
<button
type="button"
aria-label="Continue with Google"
className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
>
<img
src="/google-logo.svg"
alt="Google"
className="w-5 h-5 mr-2"
/>
Google
</button>
<button
type="button"
aria-label="Continue with GitHub"
className="flex items-center justify-center w-full py-2 px-4 bg-purple-800 text-white rounded-md hover:bg-purple-700 transition"
>
Email <span className="text-red-500">*</span>
</label>
<input
id="email"
name="email"
type="email"
required
placeholder="john@example.com"
autoComplete="email"
className="w-full rounded border border-gray-600 bg-gray-700 p-2 text-white placeholder:text-gray-300"
value={formData.email}
onChange={handleChange}
/>
<Github className="w-5 h-5 mr-2" />
Git Hub
</button>
</div>

<div>
<label
htmlFor="password"
className="block text-sm font-medium text-white mb-1"
>
Password <span className="text-red-500">*</span>
</label>
<input
id="password"
name="password"
type="password"
required
placeholder="••••••••"
autoComplete="current-password"
className="w-full rounded border border-gray-600 bg-gray-700 p-2 text-white placeholder:text-gray-300"
value={formData.password}
onChange={handleChange}
/>
<p className="mt-1 text-xs text-gray-400">
Must be at least 8 character Long
</p>
{/* Divider */}
<div className="relative">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-gray-700"></div>
</div>
<div className="relative flex justify-center text-sm">
<span className="px-2 bg-transparent text-gray-400">or</span>
</div>
</div>

<button
type="submit"
className="w-full py-3 px-4 bg-purple-700 hover:bg-purple-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 mt-6"
>
Login
</button>
</form>
{/* Login Form */}
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-white mb-1"
>
Email <span className="text-red-500">*</span>
</label>
<input
id="email"
name="email"
type="email"
required
placeholder="john@example.com"
autoComplete="email"
className="w-full rounded border border-gray-600 bg-gray-700/60 p-2 text-white placeholder:text-gray-300"
value={formData.email}
onChange={handleChange}
/>
</div>

<div className="text-center mt-4">
<p className="text-sm text-gray-400">
Already have an Account?{" "}
<Link
href="/signup"
className="text-purple-500 hover:text-purple-400"
<div>
<label
htmlFor="password"
className="block text-sm font-medium text-white mb-1"
>
Password <span className="text-red-500">*</span>
</label>
<input
id="password"
name="password"
type="password"
required
placeholder="••••••••"
autoComplete="current-password"
className="w-full rounded border border-gray-600 bg-gray-700/60 p-2 text-white placeholder:text-gray-300"
value={formData.password}
onChange={handleChange}
/>
<p className="mt-1 text-xs text-gray-400">
Must be at least 8 character Long
</p>
</div>

<button
type="submit"
className="w-full py-3 px-4 bg-purple-700 hover:bg-purple-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900 mt-6"
>
Sign Up
</Link>
</p>
Login
</button>
</form>

<div className="text-center mt-4">
<p className="text-sm text-gray-400">
Already have an Account?{" "}
<Link
href="/signup"
className="text-purple-500 hover:text-purple-400"
>
Sign Up
</Link>
</p>
</div>
</div>
</div>
</div>
</main>
</main>
</PageBackground>
</>
);
};
Expand Down
Loading
Loading