Skip to content

Commit a45a641

Browse files
author
Ryan Roland Dabao
committed
refactor: migrate UI from Ethereal Glass to amph-v2 Field Manual spec
- Rewrite globals.css and tailwind.config.ts with warm off-white palette - Replace glass-morphism with flat white cards, 1px #E5E5E0 borders - Swap sky blue #007EFF accent for brand orange #FF6B35 - Remove framer-motion, grain overlays, gradient orbs, dark themes - Update all 40+ components to amph-v2 design tokens - Adjust landing page copy: free service for Project Amazon PH Academy enrollees
1 parent 3377687 commit a45a641

39 files changed

Lines changed: 2300 additions & 2736 deletions

‎src/app/about/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ export default function AboutPage() {
1010
return (
1111
<div className="min-h-[100dvh] flex items-center justify-center bg-pa-navy relative overflow-hidden">
1212
<div className="absolute inset-0 pointer-events-none">
13-
<div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-accent-violet/8 rounded-full blur-[120px]" />
13+
<div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-[#FF6B35]/8 rounded-full blur-[120px]" />
1414
</div>
1515
<div className="text-center z-10 px-6 max-w-xl">
1616
<h1 className="text-4xl font-heading font-bold text-white mb-4">About Interview Lab</h1>
17-
<p className="text-text-muted text-lg mb-8 leading-relaxed">
17+
<p className="text-[#737373] text-lg mb-8 leading-relaxed">
1818
Interview Lab is an AI-powered mock interview platform built for Filipino VAs targeting Amazon VA roles.
19-
Built and maintained by <strong className="text-accent-indigo">ProjectAmazonPH</strong>.
19+
Built and maintained by <strong className="text-[#FF6B35]">ProjectAmazonPH</strong>.
2020
</p>
2121
<a
2222
href="/"
23-
className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent-indigo text-white font-medium hover:bg-accent-indigo/90 transition-colors"
23+
className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-[#FF6B35] text-white font-medium hover:bg-[#FF6B35]/90 transition-colors"
2424
>
2525
Back to Home
2626
</a>

‎src/app/contact/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,22 @@ export default function ContactPage() {
1010
return (
1111
<div className="min-h-[100dvh] flex items-center justify-center bg-pa-navy relative overflow-hidden">
1212
<div className="absolute inset-0 pointer-events-none">
13-
<div className="absolute bottom-[-10%] right-[-15%] w-[50vw] h-[50vw] bg-accent-indigo/5 rounded-full blur-[100px]" />
13+
<div className="absolute bottom-[-10%] right-[-15%] w-[50vw] h-[50vw] bg-[#FF6B35]/5 rounded-full blur-[100px]" />
1414
</div>
1515
<div className="text-center z-10 px-6 max-w-xl">
1616
<h1 className="text-4xl font-heading font-bold text-white mb-4">Get in Touch</h1>
17-
<p className="text-text-muted text-lg mb-4 leading-relaxed">
17+
<p className="text-[#737373] text-lg mb-4 leading-relaxed">
1818
Have questions or feedback? Reach us at:
1919
</p>
2020
<div className="space-y-3">
21-
<p className="text-accent-indigo font-medium">support@interview-lab.vercel.app</p>
22-
<p className="text-text-muted text-sm">
21+
<p className="text-[#FF6B35] font-medium">support@interview-lab.vercel.app</p>
22+
<p className="text-[#737373] text-sm">
2323
Or open an issue on{" "}
2424
<a
2525
href="https://github.com/projectamazonph/Interview-lab"
2626
target="_blank"
2727
rel="noopener noreferrer"
28-
className="text-accent-indigo hover:underline"
28+
className="text-[#FF6B35] hover:underline"
2929
>
3030
GitHub
3131
</a>
@@ -34,7 +34,7 @@ export default function ContactPage() {
3434
<div className="mt-8">
3535
<a
3636
href="/"
37-
className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent-indigo text-white font-medium hover:bg-accent-indigo/90 transition-colors"
37+
className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-[#FF6B35] text-white font-medium hover:bg-[#FF6B35]/90 transition-colors"
3838
>
3939
Back to Home
4040
</a>

‎src/app/dashboard/page.tsx‎

Lines changed: 68 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
import React, { useEffect, useState, useRef } from "react";
44
import { useRouter } from "next/navigation";
55
import Link from "next/link";
6-
import { GlassCard } from "@/components/ui/glass-card";
7-
import { GlassButton } from "@/components/ui/glass-button";
8-
import { motion } from "framer-motion";
9-
import { fadeUpVariants, staggerContainer, slideUpVariants } from "@/lib/animations";
10-
import { Lightning, LightningSlash, ArrowRight } from "@phosphor-icons/react";
6+
import { FieldCard } from "@/components/ui/glass-card";
7+
import { FieldButton } from "@/components/ui/glass-button";
8+
import { Lightning, LightningSlash, ArrowRight, ChatsCircle, FileDoc, ClipboardText } from "@phosphor-icons/react";
119

1210
interface User {
1311
id: string;
@@ -21,12 +19,10 @@ export default function DashboardPage() {
2119
const [loading, setLoading] = useState(true);
2220
const initializedRef = useRef(false);
2321

24-
// eslint-disable-next-line react-hooks/set-state-in-effect
2522
useEffect(() => {
2623
if (initializedRef.current) return;
2724
initializedRef.current = true;
2825

29-
// Check if user is logged in
3026
const checkAuth = () => {
3127
try {
3228
const stored = localStorage.getItem("interviewlab_user");
@@ -49,15 +45,12 @@ export default function DashboardPage() {
4945

5046
if (loading) {
5147
return (
52-
<div className="min-h-[100dvh] flex items-center justify-center bg-pa-navy relative overflow-hidden">
53-
<div className="absolute inset-0 pointer-events-none">
54-
<div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-accent-violet/8 rounded-full blur-[120px]" />
55-
</div>
56-
<div className="text-center z-10 animate-fade-up">
57-
<div className="w-14 h-14 rounded-full bg-accent-violet/20 flex items-center justify-center mx-auto mb-4 animate-glow-pulse">
58-
<Lightning className="w-7 h-7 text-accent-indigo" weight="light" />
48+
<div className="min-h-[100dvh] flex items-center justify-center bg-background">
49+
<div className="text-center">
50+
<div className="w-12 h-12 rounded-lg bg-[#FFE5D9] flex items-center justify-center mx-auto mb-4">
51+
<Lightning className="w-6 h-6 text-[#FF6B35]" />
5952
</div>
60-
<p className="text-text-muted font-heading text-sm">Loading...</p>
53+
<p className="text-[#737373] font-heading text-sm">Loading...</p>
6154
</div>
6255
</div>
6356
);
@@ -68,93 +61,76 @@ export default function DashboardPage() {
6861
}
6962

7063
return (
71-
<div className="min-h-[100dvh] bg-pa-navy relative overflow-hidden">
72-
{/* Background orbs */}
73-
<div className="absolute inset-0 pointer-events-none">
74-
<div className="absolute top-[-20%] left-[-10%] w-[60vw] h-[60vw] bg-accent-violet/8 rounded-full blur-[120px]" />
75-
<div className="absolute bottom-[-10%] right-[-15%] w-[50vw] h-[50vw] bg-accent-indigo/5 rounded-full blur-[100px]" />
76-
</div>
77-
78-
<div className="relative z-10 px-6 py-12 max-w-6xl mx-auto">
64+
<div className="min-h-[100dvh] bg-background">
65+
<div className="px-6 py-12 max-w-6xl mx-auto">
7966
{/* Header */}
80-
<motion.div
81-
variants={staggerContainer}
82-
initial="hidden"
83-
animate="visible"
84-
className="mb-12"
85-
>
86-
<motion.div variants={fadeUpVariants} className="flex items-center gap-3 mb-4">
87-
<div className="w-10 h-10 rounded-full bg-accent-violet/20 flex items-center justify-center">
88-
<Lightning className="w-5 h-5 text-accent-indigo" weight="light" />
67+
<div className="mb-12">
68+
<div className="flex items-center gap-3 mb-4">
69+
<div className="w-9 h-9 rounded-md bg-[#FFE5D9] flex items-center justify-center">
70+
<Lightning className="w-5 h-5 text-[#FF6B35]" />
8971
</div>
90-
<span className="font-heading text-lg text-text-muted">Interview Lab</span>
91-
</motion.div>
72+
<span className="font-heading text-sm text-[#737373]">Interview Lab</span>
73+
</div>
9274

93-
<motion.h1 variants={fadeUpVariants} className="text-4xl font-heading font-bold text-text-primary mb-2">
75+
<h1 className="text-4xl font-heading font-bold text-[#171717] mb-2">
9476
Welcome back, {user.name?.split(" ")[0] || "Learner"}!
95-
</motion.h1>
96-
<motion.p variants={fadeUpVariants} className="text-text-muted text-lg">
77+
</h1>
78+
<p className="text-[#737373] text-lg">
9779
Continue your journey to becoming an Amazon VA
98-
</motion.p>
99-
</motion.div>
80+
</p>
81+
</div>
10082

10183
{/* Coming Soon Card */}
102-
<motion.div
103-
variants={staggerContainer}
104-
initial="hidden"
105-
animate="visible"
106-
>
107-
<motion.div variants={slideUpVariants} className="mb-8">
108-
<GlassCard variant="elevated" className="p-12 text-center">
109-
<div className="w-20 h-20 rounded-full bg-accent-violet/10 flex items-center justify-center mx-auto mb-6">
110-
<LightningSlash className="w-10 h-10 text-accent-indigo" weight="light" />
111-
</div>
112-
<h2 className="text-2xl font-heading font-bold text-text-primary mb-4">
113-
Full Dashboard Coming Soon
114-
</h2>
115-
<p className="text-text-muted text-lg mb-8 max-w-md mx-auto">
116-
We are building a comprehensive dashboard with progress tracking,
117-
interview history, and personalized recommendations.
118-
</p>
119-
120-
<div className="flex flex-col sm:flex-row gap-4 justify-center">
121-
<Link href="/">
122-
<GlassButton className="gap-2">
123-
Go to Home
124-
<ArrowRight className="w-4 h-4" weight="light" />
125-
</GlassButton>
126-
</Link>
127-
</div>
128-
</GlassCard>
129-
</motion.div>
84+
<div className="mb-8">
85+
<FieldCard variant="default" className="p-12 text-center">
86+
<div className="w-16 h-16 rounded-lg bg-[#FFE5D9] flex items-center justify-center mx-auto mb-6">
87+
<LightningSlash className="w-8 h-8 text-[#FF6B35]" />
88+
</div>
89+
<h2 className="text-2xl font-heading font-bold text-[#171717] mb-4">
90+
Full Dashboard Coming Soon
91+
</h2>
92+
<p className="text-[#737373] text-lg mb-8 max-w-md mx-auto">
93+
We are building a comprehensive dashboard with progress tracking,
94+
interview history, and personalized recommendations.
95+
</p>
96+
97+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
98+
<Link href="/">
99+
<FieldButton className="gap-2">
100+
Go to Home
101+
<ArrowRight className="w-4 h-4" />
102+
</FieldButton>
103+
</Link>
104+
</div>
105+
</FieldCard>
106+
</div>
130107

131-
{/* Feature Preview Cards */}
132-
<motion.div variants={slideUpVariants} className="grid md:grid-cols-3 gap-6">
133-
<GlassCard className="p-6">
134-
<div className="w-10 h-10 rounded-lg bg-accent-violet/10 flex items-center justify-center mb-4">
135-
<Lightning className="w-5 h-5 text-accent-indigo" weight="light" />
136-
</div>
137-
<h3 className="font-heading font-semibold text-text-primary mb-2">Mock Interviews</h3>
138-
<p className="text-text-muted text-sm">AI-powered practice sessions for Amazon VA roles</p>
139-
</GlassCard>
108+
{/* Feature Preview Cards */}
109+
<div className="grid md:grid-cols-3 gap-5">
110+
<FieldCard className="p-6">
111+
<div className="w-10 h-10 rounded-md bg-[#FFE5D9] flex items-center justify-center mb-4">
112+
<ChatsCircle className="w-5 h-5 text-[#FF6B35]" />
113+
</div>
114+
<h3 className="font-heading font-semibold text-[#171717] mb-2">Mock Interviews</h3>
115+
<p className="text-[#737373] text-sm">AI-powered practice sessions for Amazon VA roles</p>
116+
</FieldCard>
140117

141-
<GlassCard className="p-6">
142-
<div className="w-10 h-10 rounded-lg bg-accent-emerald/10 flex items-center justify-center mb-4">
143-
<Lightning className="w-5 h-5 text-accent-emerald" weight="light" />
144-
</div>
145-
<h3 className="font-heading font-semibold text-text-primary mb-2">Resume Lab</h3>
146-
<p className="text-text-muted text-sm">Build and optimize your VA resume for Amazon roles</p>
147-
</GlassCard>
118+
<FieldCard className="p-6">
119+
<div className="w-10 h-10 rounded-md bg-[#D1FAE5] flex items-center justify-center mb-4">
120+
<FileDoc className="w-5 h-5 text-[#0E7C3A]" />
121+
</div>
122+
<h3 className="font-heading font-semibold text-[#171717] mb-2">Resume Lab</h3>
123+
<p className="text-[#737373] text-sm">Build and optimize your VA resume for Amazon roles</p>
124+
</FieldCard>
148125

149-
<GlassCard className="p-6">
150-
<div className="w-10 h-10 rounded-lg bg-accent-amber/10 flex items-center justify-center mb-4">
151-
<Lightning className="w-5 h-5 text-accent-amber" weight="light" />
152-
</div>
153-
<h3 className="font-heading font-semibold text-text-primary mb-2">Practice Tests</h3>
154-
<p className="text-text-muted text-sm">Test your knowledge with role-specific assessments</p>
155-
</GlassCard>
156-
</motion.div>
157-
</motion.div>
126+
<FieldCard className="p-6">
127+
<div className="w-10 h-10 rounded-md bg-[#FEF3C7] flex items-center justify-center mb-4">
128+
<ClipboardText className="w-5 h-5 text-[#B45309]" />
129+
</div>
130+
<h3 className="font-heading font-semibold text-[#171717] mb-2">Practice Tests</h3>
131+
<p className="text-[#737373] text-sm">Test your knowledge with role-specific assessments</p>
132+
</FieldCard>
133+
</div>
158134
</div>
159135
</div>
160136
);

0 commit comments

Comments
 (0)