Skip to content

Commit 5955a15

Browse files
krishnaandhekrishnaandhe
committed
Tuning Training & Certificate Verification concept
1 parent 749651c commit 5955a15

16 files changed

Lines changed: 933 additions & 496 deletions

‎app/globals.css‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,20 +66,19 @@ body {
6666
transform: translate(-50%, -50%);
6767
}
6868
.cursor-dot {
69-
width: 6px;
70-
height: 6px;
69+
width: 8px; height: 8px;
7170
background: rgb(var(--accent));
71+
box-shadow: 0 0 8px rgb(var(--accent));
7272
}
7373
.cursor-ring {
74-
width: 34px;
75-
height: 34px;
76-
border: 1.5px solid rgb(var(--accent) / 0.6);
77-
transition: width 0.25s, height 0.25s, background 0.25s, border-color 0.25s;
74+
width: 40px; height: 40px;
75+
border: 2px solid rgb(var(--accent) / 0.8);
76+
box-shadow: 0 0 14px rgb(var(--accent) / 0.35);
77+
transition: width .25s, height .25s, background .25s, border-color .25s;
7878
}
7979
.cursor-ring.hovered {
80-
width: 56px;
81-
height: 56px;
82-
background: rgb(var(--accent) / 0.12);
80+
width: 64px; height: 64px;
81+
background: rgb(var(--accent) / 0.15);
8382
border-color: rgb(var(--accent));
8483
}
8584

‎app/training/old_page.jsx‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
"use client";
2+
import { useState, useEffect } from "react";
3+
import { motion, AnimatePresence } from "framer-motion";
4+
import {
5+
FiArrowLeft, FiCheck, FiEye, FiDownload, FiX, FiFileText,
6+
FiBookOpen, FiClock, FiAward, FiUser, FiUsers, FiStar,
7+
} from "react-icons/fi";
8+
import { trainingDetails, profile } from "@/data/portfolio";
9+
import CustomCursor from "@/components/CustomCursor";
10+
import ScrollProgress from "@/components/ScrollProgress";
11+
12+
function bookLink(name) {
13+
const m = encodeURIComponent(
14+
`Hi Krishna, I'm interested in your "${name}" Microsoft 365 training. Could you share availability?`
15+
);
16+
return profile.whatsapp
17+
? `https://wa.me/${profile.whatsapp}?text=${m}`
18+
: `mailto:${profile.email}?subject=${encodeURIComponent("Training enquiry: " + name)}&body=${m}`;
19+
}
20+
21+
function PreviewModal({ item, onClose }) {
22+
const src = item.file || item.image;
23+
const isPdf = item?.type === "pdf" || src?.toLowerCase().endsWith(".pdf");
24+
useEffect(() => {
25+
const onKey = (e) => e.key === "Escape" && onClose();
26+
document.addEventListener("keydown", onKey);
27+
document.body.style.overflow = "hidden";
28+
return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
29+
}, [onClose]);
30+
return (
31+
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={onClose}
32+
className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm">
33+
<motion.div initial={{ scale: 0.94, y: 12, opacity: 0 }} animate={{ scale: 1, y: 0, opacity: 1 }} exit={{ scale: 0.94, y: 12, opacity: 0 }}
34+
transition={{ type: "spring", stiffness: 260, damping: 24 }} onClick={(e) => e.stopPropagation()}
35+
className="relative w-full max-w-3xl glass rounded-2xl border border-line overflow-hidden">
36+
<div className="flex items-start justify-between gap-4 p-5 border-b border-line">
37+
<div className="min-w-0"><h3 className="font-bold truncate">{item.name}</h3>
38+
{item.detail && <p className="text-xs text-muted truncate">{item.detail}</p>}</div>
39+
<button data-hover onClick={onClose} aria-label="Close"
40+
className="w-9 h-9 shrink-0 rounded-full border border-line flex items-center justify-center hover:border-accent hover:text-accent transition-colors"><FiX size={18} /></button>
41+
</div>
42+
<div className="p-5">
43+
{isPdf ? (
44+
<object data={src} type="application/pdf" className="w-full h-[65vh] rounded-lg bg-white">
45+
<p className="text-muted text-sm">Preview unavailable. <a href={src} target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">Open PDF ↗</a></p>
46+
</object>
47+
) : (
48+
/* eslint-disable-next-line @next/next/no-img-element */
49+
<img src={src} alt={item.name} className="w-full max-h-[65vh] object-contain rounded-lg bg-white" />
50+
)}
51+
</div>
52+
<div className="flex flex-wrap items-center justify-end gap-3 p-5 border-t border-line">
53+
<a href={src} target="_blank" rel="noopener noreferrer" data-hover
54+
className="text-sm px-4 py-2 rounded-full border border-line hover:border-accent hover:text-accent transition-colors flex items-center gap-2"><FiEye size={15} /> Open full</a>
55+
{item.downloadable && (
56+
<a href={src} download data-hover
57+
className="text-sm px-4 py-2 rounded-full bg-accent text-bg font-semibold hover:opacity-90 transition flex items-center gap-2"><FiDownload size={15} /> Download</a>
58+
)}
59+
</div>
60+
</motion.div>
61+
</motion.div>
62+
);
63+
}
64+
65+
/* small labeled sub-heading inside a column */
66+
function Head({ icon: Icon, children }) {
67+
return (
68+
<h4 className="flex items-center gap-2 text-sm font-bold mt-6 mb-3">
69+
<span className="w-7 h-7 rounded-lg bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-bg"><Icon size={14} /></span>
70+
{children}
71+
</h4>
72+
);
73+
}
74+
75+
function TierColumn({ tier, common, onPreview, i }) {
76+
const materials = tier.materials || common.materials || [];
77+
const cert = tier.certificate || common.certificate;
78+
return (
79+
<motion.div
80+
initial={{ opacity: 0, y: 24 }}
81+
whileInView={{ opacity: 1, y: 0 }}
82+
viewport={{ once: true, margin: "-40px" }}
83+
transition={{ duration: 0.5, delay: i * 0.08 }}
84+
className={`relative glass rounded-2xl p-6 flex flex-col ${
85+
tier.popular ? "border-accent/70 shadow-[0_0_32px_-8px_rgb(var(--accent)/0.5)]" : ""
86+
}`}
87+
>
88+
{tier.popular && (
89+
<span className="absolute -top-3 left-1/2 -translate-x-1/2 text-xs font-semibold px-3 py-1 rounded-full bg-accent text-bg flex items-center gap-1 whitespace-nowrap">
90+
<FiStar size={12} /> Popular
91+
</span>
92+
)}
93+
94+
{/* Header: name + price + features */}
95+
<h3 className="text-lg font-bold">{tier.name}</h3>
96+
<p className="text-xs text-muted mt-1">{tier.ideal}</p>
97+
<div className="mt-3 flex items-baseline gap-1">
98+
<span className="text-3xl font-extrabold text-gradient">{tier.price}</span>
99+
{tier.unit && <span className="text-sm text-muted">{tier.unit}</span>}
100+
</div>
101+
<ul className="mt-4 space-y-2">
102+
{tier.features.map((f) => (
103+
<li key={f} className="flex items-start gap-2 text-sm">
104+
<span className="mt-0.5 w-4 h-4 shrink-0 rounded bg-accent/15 text-accent flex items-center justify-center"><FiCheck size={10} /></span>
105+
<span className="text-muted">{f}</span>
106+
</li>
107+
))}
108+
</ul>
109+
110+
<div className="border-t border-line my-5" />
111+
112+
{/* Modules */}
113+
{tier.modules?.length > 0 && (
114+
<>
115+
<Head icon={FiBookOpen}>Course Modules</Head>
116+
<ul className="space-y-2.5">
117+
{tier.modules.map((m, k) => (
118+
<li key={m.title} className="flex gap-2.5">
119+
<span className="mt-0.5 w-5 h-5 shrink-0 rounded bg-accent/15 text-accent text-[10px] font-bold flex items-center justify-center">{k + 1}</span>
120+
<div>
121+
<p className="text-sm font-medium leading-tight">{m.title}</p>
122+
<p className="text-[11px] text-muted">{m.desc}</p>
123+
</div>
124+
</li>
125+
))}
126+
</ul>
127+
</>
128+
)}
129+
130+
{/* Outcomes */}
131+
{tier.outcomes?.length > 0 && (
132+
<>
133+
<Head icon={FiCheck}>What You&apos;ll Be Able To Do</Head>
134+
<ul className="space-y-2">
135+
{tier.outcomes.map((o) => (
136+
<li key={o} className="flex items-start gap-2 text-xs">
137+
<span className="mt-0.5 w-4 h-4 shrink-0 rounded bg-accent/15 text-accent flex items-center justify-center"><FiCheck size={9} /></span>
138+
<span className="text-muted">{o}</span>
139+
</li>
140+
))}
141+
</ul>
142+
</>
143+
)}
144+
145+
{/* Timing */}
146+
{tier.timing && (
147+
<>
148+
<Head icon={FiClock}>Timing &amp; Schedule</Head>
149+
<div className="rounded-xl border border-line p-3">
150+
<p className="text-sm text-accent flex items-center gap-1.5"><FiClock size={13} /> {tier.timing.duration}</p>
151+
<p className="text-[11px] text-muted mt-1">{tier.timing.when}</p>
152+
</div>
153+
</>
154+
)}
155+
156+
{/* Materials */}
157+
{materials.length > 0 && (
158+
<>
159+
<Head icon={FiFileText}>Training Materials</Head>
160+
<div className="space-y-2">
161+
{materials.map((m) => (
162+
<button key={m.name} type="button" data-hover
163+
onClick={() => onPreview({ ...m, detail: "Sample material" })}
164+
className="w-full text-left flex items-center gap-2.5 rounded-lg border border-line p-2.5 hover:border-accent/60 transition-colors">
165+
<span className="w-7 h-7 shrink-0 rounded bg-accent/15 text-accent flex items-center justify-center"><FiFileText size={13} /></span>
166+
<span className="min-w-0">
167+
<span className="text-xs font-medium block truncate">{m.name}</span>
168+
<span className="text-[10px] text-accent inline-flex items-center gap-1"><FiEye size={9} /> Preview</span>
169+
</span>
170+
</button>
171+
))}
172+
</div>
173+
</>
174+
)}
175+
176+
{/* Certificate */}
177+
{cert && (
178+
<>
179+
<Head icon={FiAward}>{cert.label}</Head>
180+
<button type="button" data-hover
181+
onClick={() => cert.sample && onPreview({ name: cert.label, file: cert.sample, type: "image", detail: "Sample completion certificate" })}
182+
className="w-full text-left rounded-xl border border-line p-3 hover:border-accent/60 transition-colors">
183+
{cert.sample ? (
184+
<>
185+
{/* eslint-disable-next-line @next/next/no-img-element */}
186+
<img src={cert.sample} alt="Certificate sample" className="w-full rounded-lg bg-white object-contain" />
187+
<span className="mt-2 inline-flex items-center gap-1.5 text-[11px] font-medium text-accent"><FiEye size={11} /> Preview certificate</span>
188+
</>
189+
) : (
190+
<div className="flex flex-col items-center py-6 text-center">
191+
<FiAward className="text-accent mb-2" size={32} />
192+
<p className="text-[11px] text-muted">Certificate on completion</p>
193+
</div>
194+
)}
195+
</button>
196+
{cert.note && <p className="text-[11px] text-muted mt-2">{cert.note}</p>}
197+
</>
198+
)}
199+
200+
{/* Book button — pinned to bottom */}
201+
<a href={bookLink(tier.name)} target="_blank" rel="noopener noreferrer" data-hover
202+
className={`mt-6 text-center px-4 py-3 rounded-full text-sm font-semibold transition ${
203+
tier.popular ? "bg-accent text-bg hover:opacity-90" : "border border-line hover:border-accent hover:text-accent"
204+
}`}>
205+
{tier.cta}
206+
</a>
207+
</motion.div>
208+
);
209+
}
210+
211+
export default function TrainingDetailsPage() {
212+
const [active, setActive] = useState(null);
213+
const d = trainingDetails;
214+
const tv = d.trainerVsAttendee;
215+
216+
return (
217+
<>
218+
<CustomCursor />
219+
<ScrollProgress />
220+
<main className="min-h-screen">
221+
{/* Hero */}
222+
<section className="relative overflow-hidden pt-16 pb-12 border-b border-line">
223+
<div className="pointer-events-none absolute inset-0 -z-10">
224+
<div className="absolute top-0 right-1/4 w-80 h-80 rounded-full bg-accent/15 blur-3xl" />
225+
</div>
226+
<div className="container">
227+
<a href="/" data-hover
228+
className="inline-flex items-center gap-2 text-sm font-semibold px-5 py-2.5 rounded-full border border-line hover:border-accent hover:text-accent transition-colors">
229+
<FiArrowLeft size={16} /> Back to home
230+
</a>
231+
<h1 className="text-3xl sm:text-5xl font-extrabold mt-6">{d.heading}</h1>
232+
<p className="text-muted mt-4 max-w-2xl">{d.intro}</p>
233+
</div>
234+
</section>
235+
236+
{/* Trainer vs Attendee */}
237+
{tv && (
238+
<section className="py-12 border-b border-line">
239+
<div className="container">
240+
<div className="max-w-2xl">
241+
<span className="text-sm font-mono text-accent">✦ HOW IT WORKS</span>
242+
<h2 className="text-2xl sm:text-3xl font-bold mt-2">{tv.heading}</h2>
243+
{tv.subtitle && <p className="text-muted mt-2">{tv.subtitle}</p>}
244+
</div>
245+
<div className="mt-8 grid md:grid-cols-2 gap-6">
246+
<div className="glass rounded-2xl p-6">
247+
<div className="flex items-center gap-3 mb-4">
248+
<span className="w-11 h-11 rounded-2xl bg-gradient-to-br from-accent to-accent2 flex items-center justify-center text-bg"><FiUser size={20} /></span>
249+
<h3 className="font-bold">{tv.trainer.label}</h3>
250+
</div>
251+
<ul className="space-y-2.5">
252+
{tv.trainer.points.map((p) => (
253+
<li key={p} className="flex items-start gap-2 text-sm">
254+
<span className="mt-0.5 w-5 h-5 shrink-0 rounded-md bg-accent/15 text-accent flex items-center justify-center"><FiCheck size={12} /></span>
255+
<span className="text-muted">{p}</span>
256+
</li>
257+
))}
258+
</ul>
259+
</div>
260+
<div className="glass rounded-2xl p-6 border-accent/40">
261+
<div className="flex items-center gap-3 mb-4">
262+
<span className="w-11 h-11 rounded-2xl bg-gradient-to-br from-accent2 to-accent flex items-center justify-center text-bg"><FiUsers size={20} /></span>
263+
<h3 className="font-bold">{tv.attendee.label}</h3>
264+
</div>
265+
<ul className="space-y-2.5">
266+
{tv.attendee.points.map((p) => (
267+
<li key={p} className="flex items-start gap-2 text-sm">
268+
<span className="mt-0.5 w-5 h-5 shrink-0 rounded-md bg-accent/15 text-accent flex items-center justify-center"><FiCheck size={12} /></span>
269+
<span className="text-muted">{p}</span>
270+
</li>
271+
))}
272+
</ul>
273+
</div>
274+
</div>
275+
</div>
276+
</section>
277+
)}
278+
279+
{/* COLUMN-PER-TIER GRID */}
280+
<section className="py-16">
281+
<div className="container">
282+
<h2 className="text-2xl sm:text-3xl font-bold mb-2">Training Options &amp; Rates</h2>
283+
<p className="text-muted mb-10 text-sm">Each column has its own price, modules, outcomes, timing, materials & certificate.</p>
284+
285+
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 items-start">
286+
{d.tiers.map((tier, i) => (
287+
<TierColumn key={tier.name} tier={tier} common={d.common} onPreview={setActive} i={i} />
288+
))}
289+
</div>
290+
</div>
291+
</section>
292+
293+
<footer className="py-12 border-t border-line text-center">
294+
<a href="/" data-hover
295+
className="inline-flex items-center gap-2 text-sm font-semibold px-6 py-3 rounded-full bg-accent text-bg hover:opacity-90 transition">
296+
<FiArrowLeft size={16} /> Back to Portfolio
297+
</a>
298+
</footer>
299+
</main>
300+
301+
<AnimatePresence>
302+
{active && <PreviewModal item={active} onClose={() => setActive(null)} />}
303+
</AnimatePresence>
304+
</>
305+
);
306+
}

0 commit comments

Comments
 (0)