Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
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
300 changes: 211 additions & 89 deletions app/(public)/cgpa-calculator/page.tsx

Large diffs are not rendered by default.

94 changes: 51 additions & 43 deletions app/(public)/creators/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@
import Link from "next/link";
import Image from "next/image";
import { motion, Variants } from "framer-motion";
import {
Globe,
Mail,
Users,
Code2,
Palette,
GraduationCap,
} from "lucide-react";
import { Globe, Mail, Code2, Palette, GraduationCap } from "lucide-react";
import { FaGithub, FaLinkedin, FaTwitter, FaInstagram } from "react-icons/fa";

const teamMembers = [
Expand Down Expand Up @@ -91,33 +84,37 @@ export default function TeamPage() {
return (
<main className="min-h-screen bg-background">
{/* Hero */}
<section className="relative overflow-hidden border-b border-border">
<section className="relative overflow-hidden pt-10 pb-4 lg:pt-14 lg:pb-6">
{/* Subtle Ambient Glows */}
<div className="absolute inset-0 -z-10">
<div className="absolute left-[-10%] top-[-10%] h-[400px] w-[400px] rounded-full bg-blue-500/10 blur-[120px]" />
<div className="absolute right-[-10%] bottom-[-10%] h-[400px] w-[400px] rounded-full bg-indigo-500/10 blur-[120px]" />
<div className="absolute left-[-5%] top-[-10%] h-[300px] w-[300px] rounded-full bg-blue-500/10 dark:bg-blue-500/20 blur-[100px]" />
<div className="absolute right-[20%] top-[-10%] h-[300px] w-[300px] rounded-full bg-cyan-500/10 dark:bg-cyan-500/10 blur-[100px]" />
</div>

<div className="mx-auto max-w-7xl px-6 py-12 lg:px-8 lg:py-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 24 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="max-w-4xl"
className="max-w-3xl"
>
<span className="inline-flex items-center gap-2 rounded-full border border-blue-500/20 bg-blue-500/10 px-3 py-1.5 text-xs font-medium text-blue-600 dark:text-blue-400">
<Users className="h-4 w-4" />
<span className="inline-flex items-center gap-2.5 rounded-full border border-blue-500/30 bg-blue-50/80 dark:bg-blue-500/10 px-4 py-1.5 text-[13px] font-semibold text-blue-700 dark:text-blue-300 shadow-sm backdrop-blur-md">
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400"></span>
</span>
Meet the Team
</span>

<h1 className="mt-4 text-4xl font-extrabold tracking-tight text-foreground md:text-5xl lg:text-6xl">
<h1 className="mt-6 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white md:text-5xl lg:text-[3.5rem] lg:leading-[1.1]">
The People Behind
<br />
<span className="bg-gradient-to-r from-[#1D4ED8] to-indigo-600 bg-clip-text text-transparent">
<span className="bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-500 dark:to-cyan-400 bg-clip-text text-transparent">
Hyper Learning
</span>
</h1>

<p className="mt-4 max-w-2xl text-base leading-relaxed text-muted-foreground lg:text-lg">
<p className="mt-5 max-w-2xl text-[15px] font-medium leading-relaxed text-slate-600 dark:text-slate-400 sm:text-base">
A small team of dedicated individuals working together to make
engineering education more accessible and effective through
AI-powered learning.
Expand All @@ -141,20 +138,20 @@ export default function TeamPage() {
<motion.div
key={member.id}
variants={itemVariants}
className="group relative flex flex-col overflow-hidden rounded-3xl border border-white/10 bg-[#060b19]/80 p-5 backdrop-blur-xl transition-all duration-500 hover:-translate-y-1.5 hover:border-blue-500/40 hover:shadow-[0_0_30px_-5px_rgba(37,99,235,0.15)] lg:p-6"
className="group relative flex flex-col overflow-hidden rounded-3xl border border-slate-200 dark:border-white/10 bg-slate-50/90 dark:bg-slate-900/40 p-5 backdrop-blur-2xl transition-all duration-500 hover:-translate-y-1.5 hover:border-blue-500/40 dark:hover:border-blue-400/40 shadow-[0_8px_30px_rgb(0,0,0,0.08)] dark:shadow-none hover:shadow-[0_8px_30px_rgba(37,99,235,0.15)] dark:hover:shadow-[0_0_30px_-5px_rgba(37,99,235,0.2)] lg:p-6"
>
{/* Subtle top edge highlight */}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-slate-200 dark:via-white/20 to-transparent" />

{/* Top-Right Surface Glow Orb */}
<div className="absolute -right-12 -top-12 z-0 h-48 w-48 rounded-full bg-blue-500/10 blur-3xl opacity-0 transition-opacity duration-700 group-hover:opacity-100" />
<div className="absolute -right-12 -top-12 z-0 h-48 w-48 rounded-full bg-blue-400/20 dark:bg-blue-500/20 blur-3xl opacity-40 transition-opacity duration-700 group-hover:opacity-100" />

{/* Top-Right animated gradient background glow */}
<div className="absolute inset-0 z-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-600/10 via-transparent to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100" />
<div className="absolute inset-0 z-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-100/40 dark:from-blue-600/10 via-transparent to-transparent opacity-50 transition-opacity duration-700 group-hover:opacity-100" />

{/* Premium Badge */}
{member.badge && (
<div className="absolute right-4 top-4 z-20 flex items-center gap-1.5 rounded-full border border-blue-500/30 bg-blue-500/10 px-2.5 py-1 text-[11px] font-semibold text-blue-300 shadow-[0_0_15px_rgba(59,130,246,0.15)] backdrop-blur-md">
<div className="absolute right-4 top-4 z-20 flex items-center gap-1.5 rounded-full border border-blue-500/20 dark:border-blue-500/30 bg-blue-500/10 px-2.5 py-1 text-[11px] font-semibold text-blue-600 dark:text-blue-300 shadow-[0_0_15px_rgba(59,130,246,0.15)] backdrop-blur-md">
<span className="relative flex h-1 w-1">
<span className="relative inline-flex h-1 w-1 rounded-full bg-blue-400 shadow-[0_0_5px_rgba(96,165,250,0.8)]"></span>
</span>
Expand All @@ -163,8 +160,8 @@ export default function TeamPage() {
)}

{/* Avatar */}
<div className="relative z-10 mb-5 flex h-14 w-14 items-center justify-center rounded-2xl lg:h-16 lg:w-16">
<div className="absolute inset-0 rounded-2xl border-2 border-white/10" />
<div className="relative z-10 mb-5 flex h-14 w-14 items-center justify-center rounded-2xl lg:h-16 lg:w-16 shadow-sm">
<div className="absolute inset-0 rounded-2xl border-2 border-slate-200/80 dark:border-white/10 transition-colors duration-500 group-hover:border-blue-400/40 dark:group-hover:border-blue-500/50" />
<Image
src={member.image}
alt={member.name}
Expand All @@ -176,13 +173,13 @@ export default function TeamPage() {

{/* Content */}
<div className="relative z-10">
<h3 className="text-[22px] font-bold tracking-tight text-white transition-colors">
<h3 className="text-[22px] font-bold tracking-tight text-slate-900 dark:text-white transition-colors">
{member.name}
</h3>
<p className="mt-1.5 text-[13px] font-medium text-blue-400">
<p className="mt-1.5 text-[13px] font-medium text-blue-600 dark:text-blue-400">
{member.role}
</p>
<p className="mt-3 text-[13px] leading-relaxed text-gray-400 transition-colors group-hover:text-gray-300">
<p className="mt-3 text-[13px] leading-relaxed text-slate-600 dark:text-gray-400 transition-colors group-hover:text-slate-900 dark:group-hover:text-gray-300">
{member.bio}
</p>

Expand All @@ -193,7 +190,7 @@ export default function TeamPage() {
href={member.socials.github}
target="_blank"
rel="noopener noreferrer"
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-white/10 hover:text-white hover:shadow-md hover:shadow-white/5"
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-slate-100 dark:hover:bg-white/10 hover:text-slate-900 dark:hover:text-white hover:shadow-md hover:shadow-slate-200 dark:hover:shadow-white/5"
aria-label="GitHub"
>
<FaGithub size={20} />
Expand All @@ -217,7 +214,7 @@ export default function TeamPage() {
href={member.socials.twitter}
target="_blank"
rel="noopener noreferrer"
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-white/10 hover:text-white hover:shadow-md hover:shadow-white/5"
className="rounded-lg p-2 text-muted-foreground transition-all duration-300 ease-out hover:-translate-y-[3px] hover:bg-slate-100 dark:hover:bg-white/10 hover:text-slate-900 dark:hover:text-white hover:shadow-md hover:shadow-slate-200 dark:hover:shadow-white/5"
aria-label="X (Twitter)"
>
<FaTwitter size={20} />
Expand Down Expand Up @@ -270,31 +267,42 @@ export default function TeamPage() {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.1 }}
viewport={{ once: true }}
className="mx-auto mt-16 max-w-3xl rounded-[24px] border border-border bg-card/40 p-8 text-center backdrop-blur-sm md:p-12"
className="relative mx-auto mt-20 lg:mt-24 max-w-4xl text-center"
>
<h2 className="text-2xl font-bold tracking-tight text-foreground md:text-3xl">
Want to Join the Team?
{/* Elegant glowing orb behind text */}
<div className="absolute left-1/2 top-1/2 -z-10 h-[150px] w-[70%] -translate-x-1/2 -translate-y-1/2 rounded-[100%] bg-blue-500/10 dark:bg-blue-500/20 blur-[80px]" />

<h2 className="text-4xl font-extrabold tracking-tight md:text-5xl lg:text-[3.5rem] leading-tight">
<span className="bg-gradient-to-b from-slate-900 to-slate-500 dark:from-white dark:to-slate-400 bg-clip-text text-transparent">
Want to Join the Team?
</span>
</h2>
<p className="mx-auto mt-3 max-w-xl text-sm leading-relaxed text-muted-foreground">
Hyper Learning is open-source and community-driven. Contributions
are always welcome!
<p className="mx-auto mt-4 max-w-xl text-base font-medium leading-relaxed text-slate-600 dark:text-slate-300">
Hyper Learning is open-source and community-driven.
<br className="hidden sm:block" />
Contributions are always welcome!
</p>
<div className="mt-8 flex flex-wrap items-center justify-center gap-4 sm:gap-6">
<div className="mt-8 flex flex-wrap items-center justify-center gap-4 sm:gap-5">
<a
href="https://github.com/imuniqueshiv/HyperLearningTech"
target="_blank"
rel="noopener noreferrer"
className="group/btn relative inline-flex items-center gap-2.5 overflow-hidden rounded-xl bg-blue-600 px-7 py-3 text-sm font-semibold text-white shadow-sm transition-all duration-300 hover:-translate-y-0.5 hover:bg-blue-500 hover:shadow-[0_0_15px_rgba(37,99,235,0.3)]"
className="group relative inline-flex items-center gap-2 overflow-hidden rounded-full bg-slate-900 dark:bg-white px-7 py-3 text-sm font-semibold text-white dark:text-slate-900 shadow-md transition-all duration-300 hover:scale-105 hover:shadow-[0_0_30px_rgba(37,99,235,0.2)] dark:hover:shadow-[0_0_30px_rgba(37,99,235,0.4)]"
>
<div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-700 group-hover/btn:translate-x-full" />
<FaGithub size={18} className="relative z-10" />
<span className="relative z-10">View on GitHub</span>
<div className="absolute inset-0 bg-gradient-to-r from-blue-600 to-cyan-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
<FaGithub
size={18}
className="relative z-10 transition-transform duration-300 group-hover:text-white group-hover:rotate-12"
/>
<span className="relative z-10 transition-colors duration-300 group-hover:text-white">
View on GitHub
</span>
</a>
<Link
href="/contact"
className="group/link inline-flex items-center gap-2.5 rounded-xl border border-white/10 bg-white/5 px-7 py-3 text-sm font-semibold text-foreground backdrop-blur-md transition-all duration-300 hover:-translate-y-0.5 hover:border-blue-400/50 hover:bg-white/10 hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]"
className="group inline-flex items-center gap-2 rounded-full border border-slate-200 dark:border-white/10 bg-transparent px-7 py-3 text-sm font-semibold text-slate-900 dark:text-white transition-all duration-300 hover:scale-105 hover:bg-slate-50 dark:hover:bg-white/5"
>
<Mail className="h-4 w-4 text-blue-400 transition-colors group-hover/link:text-blue-300" />
<Mail className="h-4 w-4 text-slate-400 transition-colors group-hover:text-blue-500 dark:group-hover:text-cyan-400" />
Contact Us
</Link>
</div>
Expand Down
Loading