Skip to content

Add contact section #39

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
nitinmohan18 merged 5 commits into from
Jun 30, 2026
Merged

Add contact section #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
86b010c
feat(ui): add premium contact section and refine support experience
nitinmohan18 Jun 30, 2026
e328097
fixed int format
nitinmohan18 Jun 30, 2026
422953b
fixed check error
nitinmohan18 Jun 30, 2026
1e38aa2
improved mobile visual heirerchy
nitinmohan18 Jun 30, 2026
5ca56a7
Resolve merge conflicts with main
nitinmohan18 Jun 30, 2026
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
2 changes: 2 additions & 0 deletions app/(public)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Hero from "@/features/landing/hero";
import Universities from "@/features/landing/universities";
import ContactSection from "@/components/contact/ContactSection";
import { Suspense } from "react";

export default function HomePage() {
Expand All @@ -9,6 +10,7 @@ export default function HomePage() {
<Suspense fallback={<div className="h-96" />}>
<Universities />
</Suspense>
<ContactSection />
</>
);
}
47 changes: 38 additions & 9 deletions components/contact/ContactSection.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,24 +545,53 @@

@media (max-width: 768px) {
.heading {
font-size: 4rem;
font-size: 3.2rem;
}
.contactSection {
padding: 100px 24px;
padding: 64px 20px;
}
.description {
font-size: 0.95rem;
margin-bottom: 32px;
}
.horizontalDivider {
display: none;
}
.featuresHorizontal {
flex-direction: column;
align-items: center;
gap: 24px;
align-items: flex-start;
width: max-content;
margin: 0 auto;
gap: 20px;
}
.contactCard {
padding: 48px 32px;
padding: 28px 20px;
border-radius: 16px;
}
.cardHeading {
font-size: 1.6rem;
}
.cardSubtitle {
margin-bottom: 24px;
font-size: 0.85rem;
}
.form {
gap: 20px;
}
.input {
padding: 6px 28px 6px 0;
font-size: 0.85rem;
}
.textarea {
min-height: 36px;
}
.submitRow {
position: relative;
bottom: 0;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: flex-end;
margin-top: 32px;
justify-content: center;
margin-top: 0;
}
}
2 changes: 1 addition & 1 deletion components/contact/ContactSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default function ContactSection() {
};

return (
<section className={styles.contactSection}>
<section id="Contact" className={styles.contactSection}>
{/* Background Effects */}
<div className={styles.bgEffects}>
<div className={styles.radialGradient}></div>
Expand Down
12 changes: 6 additions & 6 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export default function Footer() {
</div>

{/* Navigation Container */}
<div className="flex flex-col gap-10 sm:flex-row sm:gap-8 xl:gap-10 shrink-0">
<div className="grid grid-cols-2 gap-x-6 gap-y-10 sm:flex sm:flex-row sm:gap-8 xl:gap-10 shrink-0 w-full xl:w-auto">
{/* Platform */}
<div className="flex flex-col sm:w-[130px] xl:border-l border-slate-200 dark:border-white/[0.03] xl:pl-8">
<h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
Expand Down Expand Up @@ -311,12 +311,12 @@ export default function Footer() {
</div>

{/* Company */}
<div className="flex flex-col sm:w-[130px] sm:border-l border-slate-200 dark:border-white/[0.03] sm:pl-8">
<div className="flex flex-col sm:w-[130px] sm:border-l border-slate-200 dark:border-white/[0.03] sm:pl-8 col-span-2 sm:col-span-1">
<h3 className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.2em] text-black dark:text-white/90">
Company
</h3>
<div className="mb-5 h-[1.5px] w-[23px] rounded-full bg-slate-200 dark:bg-transparent dark:bg-gradient-to-r dark:from-blue-500 dark:to-indigo-500/50" />
<ul className="space-y-3.5">
<ul className="grid grid-cols-2 gap-x-4 gap-y-3.5 sm:flex sm:flex-col sm:gap-y-0 sm:space-y-3.5">
{[
{ name: "About Us", href: "/about" },
{ name: "Contact", href: "/contact" },
Expand All @@ -340,8 +340,8 @@ export default function Footer() {
</div>

{/* Feature Cards */}
<div className="w-full xl:border-l xl:border-slate-200 dark:xl:border-white/[0.03] xl:pl-10">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 h-full">
<div className="w-full mt-4 xl:mt-0 xl:border-l xl:border-slate-200 dark:xl:border-white/[0.03] xl:pl-10">
<div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4 h-full">
{[
{
title: "AI-Powered",
Expand Down Expand Up @@ -393,7 +393,7 @@ export default function Footer() {
</div>

{/* Bottom Section */}
<div className="mt-10 flex h-auto flex-col items-center justify-between gap-5 rounded-[20px] border border-[#C2D4EA] dark:border-white/[0.05] bg-[#EDF2F8] dark:bg-white/[0.01] backdrop-blur-lg px-6 py-4 shadow-sm dark:shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.04)] lg:h-[48px] lg:flex-row lg:rounded-full lg:px-8 lg:py-0 transition-all hover:border-slate-300 dark:hover:border-white/[0.08]">
<div className="mt-10 flex h-auto flex-col items-center justify-between gap-5 rounded-[20px] border border-[#C2D4EA] dark:border-white/[0.05] bg-[#EDF2F8] dark:bg-white/[0.01] backdrop-blur-lg px-4 py-4 md:px-6 shadow-sm dark:shadow-[0_8px_32px_rgba(0,0,0,0.12),inset_0_1px_0_rgba(255,255,255,0.04)] lg:h-[48px] lg:flex-row lg:rounded-full lg:px-8 lg:py-0 transition-all hover:border-slate-300 dark:hover:border-white/[0.08]">
{/* Left: Copyright */}
<p className="text-[11.5px] font-medium text-slate-500 dark:text-slate-400/80 shrink-0">
© {new Date().getFullYear()} Hyper Learning. All rights reserved.
Expand Down
8 changes: 4 additions & 4 deletions components/navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ const navLinks = [
href: "/#Universities",
},
{
label: "About",
href: "/about",
label: "Contact",
href: "/#Contact",
},
{
label: "Contact",
href: "/contact",
label: "About",
href: "/about",
},
];

Expand Down
24 changes: 12 additions & 12 deletions features/landing/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default function Hero() {
<div className="absolute right-[-5%] top-[15%] h-[500px] w-[500px] rounded-full bg-purple-500/[0.02] blur-[160px] dark:bg-indigo-500/10" />
</div>

<div className="mx-auto max-w-7xl px-6 pb-24 pt-16 lg:px-8 lg:pb-32 lg:pt-20">
<div className="mx-auto max-w-7xl px-6 pb-16 pt-12 md:pb-24 md:pt-16 lg:px-8 lg:pb-32 lg:pt-20">
<div className="grid items-center gap-16 lg:grid-cols-[1.3fr_0.7fr] lg:gap-8">
{/* Left Content */}
<motion.div
Expand All @@ -119,7 +119,7 @@ export default function Hero() {
{/* Headline */}
<motion.h1
variants={itemVariants}
className="text-[54px] font-[800] leading-[1.1] tracking-[-0.03em] lg:text-[64px]"
className="text-[42px] md:text-[54px] font-[800] leading-[1.1] tracking-[-0.03em] lg:text-[64px]"
>
<span className="text-slate-900 dark:text-[#f1f5f9]">Master</span>
<br />
Expand Down Expand Up @@ -269,9 +269,9 @@ export default function Hero() {
>
{/* Glowing aura for Light Mode behind AI card */}
<div className="absolute inset-0 -z-10 rounded-[24px] bg-indigo-500/20 blur-[60px] dark:bg-transparent" />
<div className="relative w-full max-w-[440px] origin-top scale-[1.05] overflow-hidden rounded-[24px] border border-indigo-100 dark:border-white/[0.06] bg-gradient-to-br from-indigo-100 via-white/80 to-purple-100 dark:bg-none dark:bg-white/5 p-6 shadow-[0_15px_40px_-10px_rgba(0,0,0,0.1)] dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl font-sans lg:origin-left lg:scale-[1.08]">
<div className="relative w-full max-w-[440px] origin-top scale-100 md:scale-[1.05] overflow-hidden rounded-[20px] md:rounded-[24px] border border-indigo-100 dark:border-white/[0.06] bg-gradient-to-br from-indigo-100 via-white/80 to-purple-100 dark:bg-none dark:bg-white/5 p-4 md:p-6 shadow-[0_15px_40px_-10px_rgba(0,0,0,0.1)] dark:shadow-[0_8px_32px_0_rgba(0,0,0,0.5)] backdrop-blur-2xl font-sans lg:origin-left lg:scale-[1.08]">
{/* Chat Header */}
<div className="-mt-6 -mx-6 mb-5 flex items-center gap-3 border-b border-indigo-100 dark:border-white/[0.06] bg-[#F4F7FF] dark:bg-white/[0.02] px-6 pt-6 pb-4 backdrop-blur-md">
<div className="-mt-4 -mx-4 md:-mt-6 md:-mx-6 mb-4 md:mb-5 flex items-center gap-3 border-b border-indigo-100 dark:border-white/[0.06] bg-[#F4F7FF] dark:bg-white/[0.02] px-4 pt-4 pb-3 md:px-6 md:pt-6 md:pb-4 backdrop-blur-md">
<div className="flex h-[38px] w-[38px] shrink-0 items-center justify-center rounded-[10px] bg-gradient-to-r from-[#5964F4] to-[#7D52F5] shadow-[0_0_12px_rgba(99,102,241,0.4)]">
<BrainCircuit
className="h-[18px] w-[18px] text-white"
Expand All @@ -292,10 +292,10 @@ export default function Hero() {
</div>
</div>

<div className="space-y-4">
<div className="space-y-3 md:space-y-4">
{/* User Message */}
<div className="flex justify-end">
<div className="max-w-[85%] rounded-[20px_20px_6px_20px] bg-gradient-to-r from-[#5B6EFF] to-[#8B5CF6] px-4 py-2.5 text-[13px] font-medium text-white shadow-[0_3px_10px_rgba(91,110,255,0.3)]">
<div className="max-w-[85%] rounded-[20px_20px_6px_20px] bg-gradient-to-r from-[#5B6EFF] to-[#8B5CF6] px-3 py-2 md:px-4 md:py-2.5 text-[12px] md:text-[13px] font-medium text-white shadow-[0_3px_10px_rgba(91,110,255,0.3)]">
Explain Big O notation with an example.
</div>
</div>
Expand All @@ -314,7 +314,7 @@ export default function Hero() {
</span>
</div>

<div className="w-full rounded-[16px] border border-indigo-50 dark:border-white/5 bg-white/80 dark:bg-white/[0.09] px-5 py-4">
<div className="w-full rounded-[16px] border border-indigo-50 dark:border-white/5 bg-white/80 dark:bg-white/[0.09] px-4 py-3 md:px-5 md:py-4">
<div className="space-y-2">
<p className="text-[13px] leading-[1.7] text-slate-600 dark:text-[#c8ccd8]">
Big O notation represents the maximum growth rate of an
Expand All @@ -335,15 +335,15 @@ export default function Hero() {

{/* Related Questions */}
<div className="flex flex-col overflow-hidden rounded-[16px] border border-indigo-50 dark:border-white/5 bg-white dark:bg-white/[0.05]">
<div className="flex items-center gap-2 px-5 pb-1.5 pt-3">
<div className="flex items-center gap-2 px-4 pb-1 pt-2.5 md:px-5 md:pb-1.5 md:pt-3">
<div className="h-1.5 w-1.5 rounded-full bg-indigo-400 shadow-[0_0_4px_rgba(129,140,248,0.5)]" />
<p className="text-[10px] font-bold uppercase tracking-widest text-[#818cf8]">
Related Previous Year Questions
</p>
</div>

<div className="flex flex-col divide-y divide-indigo-50 dark:divide-white/[0.02]">
<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="group flex cursor-pointer items-center justify-between px-4 py-2 md:px-5 md:py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="flex items-center gap-3">
<CheckCircle2
className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
Expand All @@ -356,7 +356,7 @@ export default function Hero() {
<ArrowRight className="h-4 w-4 text-slate-400 dark:text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
</div>

<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="group flex cursor-pointer items-center justify-between px-4 py-2 md:px-5 md:py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="flex items-center gap-3">
<CheckCircle2
className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
Expand All @@ -369,7 +369,7 @@ export default function Hero() {
<ArrowRight className="h-4 w-4 text-slate-400 dark:text-gray-500 transition-all duration-200 group-hover:translate-x-1 group-hover:text-[#818cf8]" />
</div>

<div className="group flex cursor-pointer items-center justify-between px-5 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="group flex cursor-pointer items-center justify-between px-4 py-2 md:px-5 md:py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-white/[0.02]">
<div className="flex items-center gap-3">
<CheckCircle2
className="h-4 w-4 text-[#34d399] drop-shadow-[0_0_3px_rgba(52,211,153,0.4)]"
Expand All @@ -384,7 +384,7 @@ export default function Hero() {
</div>
</div>

<div className="group mt-3 flex items-center justify-between rounded-[16px] border border-indigo-100 dark:border-transparent bg-white/90 dark:bg-white/[0.04] px-4 py-3.5 shadow-sm dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)] transition-all duration-300 hover:border-indigo-300/50 dark:hover:border-indigo-500/50 hover:shadow-[0_4px_20px_-10px_rgba(99,102,241,0.2)] dark:hover:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_0_15px_rgba(99,102,241,0.2)]">
<div className="group mt-2 md:mt-3 flex items-center justify-between rounded-[16px] border border-indigo-100 dark:border-transparent bg-white/90 dark:bg-white/[0.04] px-3.5 py-2.5 md:px-4 md:py-3.5 shadow-sm dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2)] transition-all duration-300 hover:border-indigo-300/50 dark:hover:border-indigo-500/50 hover:shadow-[0_4px_20px_-10px_rgba(99,102,241,0.2)] dark:hover:shadow-[inset_0_1px_2px_rgba(0,0,0,0.2),0_0_15px_rgba(99,102,241,0.2)]">
<span className="text-[13px] font-medium text-slate-400 dark:text-[#6b7280]">
Ask Hyper AI anything...
</span>
Expand Down
14 changes: 7 additions & 7 deletions features/landing/universities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function Universities() {
});

return (
<section className="relative flex min-h-[115vh] flex-col justify-center overflow-hidden border-none bg-background pt-16 pb-32">
<section className="relative flex min-h-screen flex-col justify-center overflow-hidden border-none bg-background pt-12 pb-24 md:pt-16 md:pb-32">
{/* Background Layers */}
<div className="absolute inset-0 -z-10 overflow-hidden">
{/* Light Mode Wavy Refraction Background (Inverted) */}
Expand Down Expand Up @@ -150,7 +150,7 @@ export default function Universities() {
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.9 }}
transition={{ duration: 0.3 }}
className={`group relative flex flex-col overflow-hidden rounded-3xl border border-border/50 dark:border-white/10 bg-card dark:bg-gradient-to-b dark:from-white/5 dark:to-transparent p-5 shadow-lg dark:shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-[5.5px] hover:border-blue-400/30 hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] dark:hover:border-blue-400/30 dark:hover:shadow-[0_0_15px_rgba(59,130,246,0.2)] ${
className={`group relative flex flex-col overflow-hidden rounded-[20px] md:rounded-3xl border border-border/50 dark:border-white/10 bg-card dark:bg-gradient-to-b dark:from-white/5 dark:to-transparent p-4 md:p-5 shadow-lg dark:shadow-2xl backdrop-blur-xl transition-all duration-500 hover:-translate-y-[5.5px] hover:border-blue-400/30 hover:shadow-[0_0_15px_rgba(59,130,246,0.15)] dark:hover:border-blue-400/30 dark:hover:shadow-[0_0_15px_rgba(59,130,246,0.2)] ${
university.status === "Available" ? "cursor-pointer" : ""
}`}
>
Expand All @@ -162,8 +162,8 @@ export default function Universities() {

{/* Badge */}
<div className="relative z-10 mb-4 flex items-center justify-between">
<div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-indigo-500/10 to-purple-500/10 text-blue-600 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] dark:border-blue-400/20 dark:from-blue-400/10 dark:via-indigo-400/10 dark:to-purple-400/10 dark:text-blue-400 dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]">
<GraduationCap className="relative z-10 h-7 w-7 drop-shadow-sm" />
<div className="relative flex h-12 w-12 md:h-14 md:w-14 items-center justify-center rounded-[14px] md:rounded-2xl border border-blue-500/20 bg-gradient-to-br from-blue-500/10 via-indigo-500/10 to-purple-500/10 text-blue-600 shadow-[inset_0_1px_1px_rgba(255,255,255,0.4)] dark:border-blue-400/20 dark:from-blue-400/10 dark:via-indigo-400/10 dark:to-purple-400/10 dark:text-blue-400 dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]">
<GraduationCap className="relative z-10 h-6 w-6 md:h-7 md:w-7 drop-shadow-sm" />
</div>

<span
Expand All @@ -179,15 +179,15 @@ export default function Universities() {

{/* Content */}
<div className="relative z-10 flex flex-1 flex-col">
<h3 className="text-2xl font-black tracking-tight text-foreground">
<h3 className="text-xl md:text-2xl font-black tracking-tight text-foreground">
{university.name}
</h3>

<p className="mt-1 text-xs font-bold uppercase tracking-wider text-[#1D4ED8] dark:text-blue-400">
{university.fullName}
</p>

<p className="mt-3 text-[15px] leading-relaxed text-muted-foreground">
<p className="mt-2.5 md:mt-3 text-[14px] md:text-[15px] leading-relaxed text-muted-foreground">
{university.description}
</p>

Expand All @@ -208,7 +208,7 @@ export default function Universities() {

<div className="mt-auto pt-6">
{university.status === "Available" ? (
<div className="group/btn relative flex w-full items-center justify-center gap-2 rounded-xl border border-blue-400/30 bg-gradient-to-r from-blue-600 via-indigo-600 to-blue-700 px-4 py-3.5 text-sm font-bold text-white shadow-[0_0_15px_rgba(37,99,235,0.15)] transition-all duration-500 hover:-translate-y-1 hover:border-blue-400/50 hover:from-blue-500 hover:via-indigo-500 hover:to-blue-600 hover:shadow-[0_0_20px_rgba(37,99,235,0.25)] active:translate-y-0 active:shadow-[0_0_15px_rgba(37,99,235,0.2)] overflow-hidden">
<div className="group/btn relative flex w-full items-center justify-center gap-2 rounded-xl border border-blue-400/30 bg-gradient-to-r from-blue-600 via-indigo-600 to-blue-700 px-4 py-3 md:py-3.5 text-[13px] md:text-sm font-bold text-white shadow-[0_0_15px_rgba(37,99,235,0.15)] transition-all duration-500 hover:-translate-y-1 hover:border-blue-400/50 hover:from-blue-500 hover:via-indigo-500 hover:to-blue-600 hover:shadow-[0_0_20px_rgba(37,99,235,0.25)] active:translate-y-0 active:shadow-[0_0_15px_rgba(37,99,235,0.2)] overflow-hidden">
<div className="absolute inset-0 rounded-xl shadow-[inset_0_1px_1px_rgba(255,255,255,0.3)] pointer-events-none" />
<span className="relative z-10 flex items-center gap-2">
Explore University
Expand Down
Loading