-
{card.title}
-
{card.desc}
+
+
+ {card.icon}
+
+
+
{card.title}
+
{card.desc}
+
))}
diff --git a/client/src/pages/HomeNew.css b/client/src/pages/HomeNew.css
new file mode 100644
index 0000000..c1f3d10
--- /dev/null
+++ b/client/src/pages/HomeNew.css
@@ -0,0 +1,1063 @@
+/* ============================================================
+ HomeNew.css — StudyMatePlus | Isolated Premium Redesign
+ ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
+
+*, *::before, *::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --grid-dot: rgba(15, 23, 42, 0.07);
+ --hero-blob-color-1: rgba(99, 102, 241, 0.15);
+ --hero-blob-color-2: rgba(168, 85, 247, 0.12);
+ --hero-blob-color-3: rgba(251, 191, 36, 0.06);
+ --hero-text-primary: #0f172a;
+ --hero-text-secondary: #334155;
+ --hero-badge-bg: rgba(15, 23, 42, 0.05);
+ --hero-badge-border: rgba(15, 23, 42, 0.1);
+ --hero-badge-text: #0f172a;
+ --glass-bg: rgba(255, 255, 255, 0.65);
+ --glass-border: rgba(15, 23, 42, 0.13);
+ --glass-shadow: rgba(31, 38, 135, 0.06);
+ --glass-shadow-hover: rgba(31, 38, 135, 0.12);
+}
+
+html[data-theme="dark"] {
+ --grid-dot: rgba(255, 255, 255, 0.07);
+ --hero-blob-color-1: rgba(99, 102, 241, 0.22);
+ --hero-blob-color-2: rgba(168, 85, 247, 0.18);
+ --hero-blob-color-3: rgba(59, 130, 246, 0.12);
+ --hero-text-primary: #ffffff;
+ --hero-text-secondary: #cbd5e1;
+ --hero-badge-bg: rgba(255, 255, 255, 0.1);
+ --hero-badge-border: rgba(255, 255, 255, 0.2);
+ --hero-badge-text: #ffffff;
+ --glass-bg: rgba(16, 24, 38, 0.65);
+ --glass-border: rgba(255, 255, 255, 0.1);
+ --glass-shadow: rgba(0, 0, 0, 0.35);
+ --glass-shadow-hover: rgba(99, 102, 241, 0.25);
+}
+
+.home-new {
+ min-height: 100vh;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--text);
+ background: var(--bg);
+ overflow-x: hidden;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+
+/* ============================================================
+ HERO SECTION (SEAMLESS AND PREMIUM REDESIGN)
+ ============================================================ */
+.hero {
+ background: var(--bg);
+ min-height: 92vh;
+ display: flex;
+ align-items: center;
+ position: relative;
+ overflow: hidden;
+ transition: background-color 0.4s ease;
+}
+
+/* Subtle dot grid overlay with a soft radial center fade */
+.hero::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: radial-gradient(circle, var(--grid-dot) 1.2px, transparent 1.2px);
+ background-size: 32px 32px;
+ mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);
+ -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);
+ pointer-events: none;
+ z-index: 1;
+ opacity: 0.85;
+}
+
+/* Ambient Shifting Glowing Backdrop Orbs */
+.hero-blob {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(90px);
+ pointer-events: none;
+ z-index: 0;
+ transition: background 0.4s ease;
+}
+
+.hero-blob-1 {
+ width: 550px;
+ height: 550px;
+ background: radial-gradient(circle, var(--hero-blob-color-1) 0%, transparent 75%);
+ top: -100px;
+ left: -50px;
+ animation: blob-drift-1 25s infinite alternate ease-in-out;
+}
+
+.hero-blob-2 {
+ width: 650px;
+ height: 650px;
+ background: radial-gradient(circle, var(--hero-blob-color-2) 0%, transparent 75%);
+ bottom: -150px;
+ right: -50px;
+ animation: blob-drift-2 30s infinite alternate-reverse ease-in-out;
+}
+
+.hero-blob-3 {
+ width: 400px;
+ height: 400px;
+ background: radial-gradient(circle, var(--hero-blob-color-3) 0%, transparent 75%);
+ top: 50%;
+ left: 45%;
+ transform: translate(-50%, -50%);
+ animation: blob-drift-3 20s infinite alternate ease-in-out;
+}
+
+@keyframes blob-drift-1 {
+ 0% { transform: translate(0, 0) scale(1); }
+ 50% { transform: translate(80px, 40px) scale(1.1); }
+ 100% { transform: translate(-40px, 80px) scale(0.95); }
+}
+
+@keyframes blob-drift-2 {
+ 0% { transform: translate(0, 0) scale(1); }
+ 50% { transform: translate(-100px, -60px) scale(0.9); }
+ 100% { transform: translate(50px, 50px) scale(1.15); }
+}
+
+@keyframes blob-drift-3 {
+ 0% { transform: translate(-50%, -50%) scale(1); }
+ 50% { transform: translate(-40%, -60%) scale(1.1); }
+ 100% { transform: translate(-60%, -40%) scale(0.9); }
+}
+
+.hero-container {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4rem;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 5rem 2rem;
+ position: relative;
+ z-index: 2;
+}
+
+/* Hero text — left aligned on desktop */
+.hero-content {
+ color: var(--hero-text-primary);
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0;
+}
+
+/* Badge pill */
+.hero-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ background: var(--hero-badge-bg);
+ border: 1px solid var(--hero-badge-border);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ color: var(--hero-badge-text);
+ font-size: 0.85rem;
+ font-weight: 600;
+ padding: 0.45rem 1.15rem;
+ border-radius: 50px;
+ margin-bottom: 1.5rem;
+ letter-spacing: 0.02em;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+}
+
+.hero-title {
+ font-size: clamp(2.4rem, 4.5vw, 4rem);
+ font-weight: 900;
+ margin-bottom: 1.5rem;
+ line-height: 1.12;
+ color: var(--hero-text-primary);
+ letter-spacing: -0.025em;
+}
+
+.brand-highlight {
+ background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
+ background-size: 200% auto;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ animation: shimmer 3s linear infinite;
+ text-shadow: 0 0 40px rgba(245, 158, 11, 0.1);
+}
+
+@keyframes shimmer {
+ to { background-position: 200% center; }
+}
+
+.hero-subtitle {
+ font-size: 1.2rem;
+ margin-bottom: 2.75rem;
+ color: var(--hero-text-secondary);
+ max-width: 490px;
+ line-height: 1.75;
+}
+
+.hero-buttons {
+ display: flex;
+ gap: 1.25rem;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+/* ============================================================
+ PREMIUM BUTTONS REDESIGN
+ ============================================================ */
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0.9rem 2.2rem;
+ text-decoration: none;
+ border-radius: 50px;
+ font-weight: 700;
+ font-size: 1.05rem;
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+ border: 1px solid transparent;
+ white-space: nowrap;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
+ z-index: 1;
+}
+
+/* Syllabus Button: Golden Sunburst Pill */
+.btn-premium-syllabus {
+ background: #fbbf24 !important; /* Golden Yellow */
+ color: #000000 !important;
+ box-shadow: 0 4px 15px rgba(251, 191, 36, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.25) !important;
+ border: none !important;
+ font-weight: 800 !important;
+}
+
+.btn-premium-syllabus span {
+ color: #000000 !important;
+ font-weight: 800 !important;
+}
+
+.btn-premium-syllabus:hover {
+ transform: translateY(-3px) scale(1.02) !important;
+ background: #f59e0b !important; /* Shifting golden color on hover */
+ box-shadow: 0 8px 25px rgba(245, 158, 11, 0.55), inset 0 1.5px 0 rgba(255, 255, 255, 0.35) !important;
+ color: #000000 !important;
+}
+
+.btn-premium-syllabus:active {
+ transform: translateY(-1px) scale(0.99) !important;
+}
+
+/* Previous Papers Button: Premium Theme-adaptive Pill */
+.btn-premium-pyqs {
+ background: #0f172a !important; /* Default black in light theme */
+ border: 1.5px solid transparent !important;
+ box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15) !important;
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
+}
+
+.btn-premium-pyqs span {
+ color: #ffffff !important; /* White text in black button */
+ font-weight: 700 !important;
+ transition: color 0.3s ease !important;
+}
+
+.btn-premium-pyqs:hover {
+ transform: translateY(-3px) scale(1.02) !important;
+ background: #ffffff !important; /* Transitions to white background */
+ border: 1.5px solid #ef4444 !important; /* Red/pink border */
+ box-shadow: 0 8px 25px rgba(239, 68, 68, 0.35) !important; /* Soft red outline glow */
+}
+
+.btn-premium-pyqs:hover span {
+ color: #ef4444 !important; /* Red text */
+}
+
+.btn-premium-pyqs:active {
+ transform: translateY(-1px) scale(0.99) !important;
+}
+
+/* Dark Theme Adaptations for Previous Papers Button */
+html[data-theme="dark"] .btn-premium-pyqs {
+ background: #ffffff !important; /* Default white in dark theme */
+ border: 1.5px solid transparent !important;
+ box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1) !important;
+}
+
+html[data-theme="dark"] .btn-premium-pyqs span {
+ color: #0f172a !important; /* Dark text in white button */
+}
+
+html[data-theme="dark"] .btn-premium-pyqs:hover {
+ background: #0f172a !important; /* Transitions to black background */
+ border: 1.5px solid #ef4444 !important; /* Red/pink border */
+ box-shadow: 0 8px 30px rgba(239, 68, 68, 0.45) !important; /* Red outline glow */
+}
+
+html[data-theme="dark"] .btn-premium-pyqs:hover span {
+ color: #ffffff !important; /* White text */
+}
+
+/* ============================================================
+ STAGGERED FLOATING VISUAL CARDS GRID
+ ============================================================ */
+.hero-visual {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2.2rem 1.6rem;
+ align-content: center;
+ position: relative;
+ padding: 1.5rem;
+}
+
+.hero-card-wrapper {
+ transition: filter 0.3s ease;
+ will-change: transform;
+}
+
+/* Highly Polished Glass Cards */
+.hero-card {
+ background: var(--glass-bg);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1.5px solid var(--glass-border);
+ border-radius: 24px;
+ padding: 1.5rem 1.3rem;
+ display: flex;
+ align-items: center;
+ gap: 1.1rem;
+ cursor: pointer;
+ box-shadow: 0 10px 35px 0 var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
+ transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
+ will-change: transform;
+}
+
+.hero-card:hover {
+ border-color: rgba(99, 102, 241, 0.45);
+ background: rgba(255, 255, 255, 0.08);
+ box-shadow: 0 15px 45px var(--glass-shadow-hover), 0 0 20px rgba(99, 102, 241, 0.15);
+}
+
+html[data-theme="dark"] .hero-card:hover {
+ background: rgba(99, 102, 241, 0.05);
+}
+
+.hero-card-icon-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 52px;
+ height: 52px;
+ border-radius: 16px;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
+ border: 1px solid var(--glass-border);
+ box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.1);
+ flex-shrink: 0;
+}
+
+.hero-card-icon {
+ font-size: 1.75rem;
+ line-height: 1;
+}
+
+.hero-card-title {
+ font-size: 1.02rem;
+ font-weight: 800;
+ color: var(--hero-text-primary);
+ margin: 0 0 0.25rem;
+ letter-spacing: -0.01em;
+}
+
+.hero-card-desc {
+ font-size: 0.8rem;
+ color: var(--hero-text-secondary);
+ margin: 0;
+ line-height: 1.4;
+}
+
+/* --- Staggered floating positions and animations --- */
+.float-anim-0 {
+ transform: translateY(-25px);
+ animation: float-card-0 3s ease-in-out infinite alternate;
+}
+
+.float-anim-1 {
+ transform: translateY(25px);
+ animation: float-card-1 3.5s ease-in-out infinite alternate;
+}
+
+.float-anim-2 {
+ transform: translateY(-5px);
+ animation: float-card-2 3.2s ease-in-out infinite alternate;
+}
+
+.float-anim-3 {
+ transform: translateY(45px);
+ animation: float-card-3 3.8s ease-in-out infinite alternate;
+}
+
+@keyframes float-card-0 {
+ 0% { transform: translateY(-25px) rotate(0deg); }
+ 100% { transform: translateY(-38px) rotate(1.2deg); }
+}
+
+@keyframes float-card-1 {
+ 0% { transform: translateY(25px) rotate(0deg); }
+ 100% { transform: translateY(10px) rotate(-1.5deg); }
+}
+
+@keyframes float-card-2 {
+ 0% { transform: translateY(-5px) rotate(0deg); }
+ 100% { transform: translateY(-18px) rotate(-1.2deg); }
+}
+
+@keyframes float-card-3 {
+ 0% { transform: translateY(45px) rotate(0deg); }
+ 100% { transform: translateY(28px) rotate(1.5deg); }
+}
+
+/* Tablet floating updates to maintain grid integrity */
+@media (max-width: 1024px) {
+ .hero-container {
+ grid-template-columns: 1fr;
+ gap: 3rem;
+ text-align: center;
+ padding: 3rem 2rem;
+ }
+
+ .hero-content {
+ align-items: center;
+ }
+
+ .hero-subtitle {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .hero-buttons {
+ justify-content: center;
+ }
+
+ .float-anim-0 {
+ transform: translateY(-10px);
+ animation: float-card-0-tablet 3s ease-in-out infinite alternate;
+ }
+
+ .float-anim-1 {
+ transform: translateY(10px);
+ animation: float-card-1-tablet 3.5s ease-in-out infinite alternate;
+ }
+
+ .float-anim-2 {
+ transform: translateY(-2px);
+ animation: float-card-2-tablet 3.2s ease-in-out infinite alternate;
+ }
+
+ .float-anim-3 {
+ transform: translateY(12px);
+ animation: float-card-3-tablet 3.8s ease-in-out infinite alternate;
+ }
+
+ @keyframes float-card-0-tablet {
+ 0% { transform: translateY(-10px); }
+ 100% { transform: translateY(-18px); }
+ }
+
+ @keyframes float-card-1-tablet {
+ 0% { transform: translateY(10px); }
+ 100% { transform: translateY(2px); }
+ }
+
+ @keyframes float-card-2-tablet {
+ 0% { transform: translateY(-2px); }
+ 100% { transform: translateY(-10px); }
+ }
+
+ @keyframes float-card-3-tablet {
+ 0% { transform: translateY(12px); }
+ 100% { transform: translateY(4px); }
+ }
+}
+
+@media (max-width: 640px) {
+ .hero-visual {
+ grid-template-columns: 1fr;
+ gap: 1.5rem;
+ }
+
+ .float-anim-0, .float-anim-1, .float-anim-2, .float-anim-3 {
+ transform: translateY(0) !important;
+ animation: none !important;
+ }
+}
+
+/* ============================================================
+ SECTION SHARED
+ ============================================================ */
+.section-title {
+ text-align: center;
+ font-size: clamp(1.8rem, 3vw, 2.6rem);
+ font-weight: 800;
+ margin-bottom: 0.75rem;
+ color: var(--heading);
+ letter-spacing: -0.02em;
+}
+
+.section-subtitle {
+ text-align: center;
+ color: var(--muted);
+ font-size: 1.1rem;
+ max-width: 560px;
+ margin: 0 auto 3rem;
+ line-height: 1.7;
+}
+
+html[data-theme="dark"] .section-title { color: #ffffff; }
+
+/* ============================================================
+ FEATURES SECTION
+ ============================================================ */
+.features {
+ padding: 5.5rem 0;
+ background: var(--bg);
+}
+
+.features-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+ gap: 2rem;
+}
+
+.feature-card {
+ background: var(--card);
+ padding: 2.5rem 2rem;
+ border-radius: 20px;
+ text-align: center;
+ border: 1px solid var(--border);
+ box-shadow: 0 2px 12px rgba(0,0,0,0.03);
+ transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.feature-card::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(124,58,237,0.04));
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ border-radius: 20px;
+}
+
+.feature-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 48px rgba(99,102,241,0.1);
+ border-color: rgba(99,102,241,0.3);
+}
+
+.feature-card:hover::before { opacity: 1; }
+
+.feature-icon {
+ font-size: 2.8rem;
+ margin-bottom: 1.25rem;
+ display: block;
+ line-height: 1;
+}
+
+.feature-card h3 {
+ font-size: 1.35rem;
+ font-weight: 700;
+ margin-bottom: 0.75rem;
+ color: var(--heading);
+}
+
+.feature-card p {
+ color: var(--muted);
+ margin-bottom: 1.5rem;
+ font-size: 0.97rem;
+ line-height: 1.7;
+}
+
+.feature-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.3rem;
+ color: #6366f1;
+ text-decoration: none;
+ font-weight: 600;
+ font-size: 0.95rem;
+ transition: gap 0.2s ease, color 0.2s ease;
+}
+
+.feature-link:hover {
+ color: #4f46e5;
+ gap: 0.6rem;
+}
+
+/* ============================================================
+ STATS SECTION
+ ============================================================ */
+.stats {
+ padding: 5.5rem 0;
+ background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+ position: relative;
+ overflow: hidden;
+}
+
+.stats::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
+ background-size: 28px 28px;
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 0;
+ text-align: center;
+ position: relative;
+ z-index: 1;
+}
+
+.stat-item {
+ padding: 1.5rem 1rem;
+ position: relative;
+}
+
+.stat-item:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 15%;
+ bottom: 15%;
+ width: 1px;
+ background: rgba(255,255,255,0.2);
+}
+
+.stat-number {
+ font-size: clamp(2.2rem, 3.5vw, 3rem);
+ font-weight: 900;
+ background: linear-gradient(135deg, #fbbf24, #fde68a);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 0.4rem;
+ letter-spacing: -0.02em;
+}
+
+.stat-label {
+ font-size: 1rem;
+ color: rgba(255,255,255,0.85);
+ font-weight: 500;
+}
+
+@media (max-width: 768px) {
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ gap: 2rem 0;
+ }
+ .stat-item:nth-child(2)::after {
+ display: none;
+ }
+}
+
+/* ============================================================
+ HOW IT WORKS
+ ============================================================ */
+.how-it-works {
+ padding: 5.5rem 0;
+ background: var(--card);
+}
+
+.steps-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
+ gap: 2rem;
+ margin-top: 1rem;
+ position: relative;
+}
+
+/* Connector line between steps on desktop */
+.steps-grid::before {
+ content: '';
+ position: absolute;
+ top: 3.5rem;
+ left: calc(16.6% + 1rem);
+ right: calc(16.6% + 1rem);
+ height: 2px;
+ background: linear-gradient(90deg, #4f46e5, #a855f7);
+ opacity: 0.25;
+ z-index: 0;
+}
+
+.step {
+ background: var(--bg);
+ padding: 2.5rem 2rem;
+ border-radius: 20px;
+ text-align: center;
+ border: 1px solid var(--border);
+ box-shadow: 0 2px 12px rgba(0,0,0,0.03);
+ transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+ position: relative;
+ z-index: 1;
+}
+
+.step:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 20px 48px rgba(99,102,241,0.1);
+ border-color: rgba(99,102,241,0.3);
+}
+
+.step-icon {
+ font-size: 2.8rem;
+ margin-bottom: 1.25rem;
+ display: block;
+ line-height: 1;
+}
+
+.step h3 {
+ font-size: 1.35rem;
+ font-weight: 700;
+ margin-bottom: 0.75rem;
+ color: var(--heading);
+}
+
+.step p {
+ color: var(--muted);
+ line-height: 1.7;
+ font-size: 0.97rem;
+ margin-bottom: 1.5rem;
+}
+
+@media (max-width: 1024px) {
+ .steps-grid::before {
+ display: none;
+ }
+}
+
+/* ============================================================
+ TESTIMONIALS
+ ============================================================ */
+.testimonials {
+ padding: 5.5rem 0;
+ background: var(--bg);
+ text-align: center;
+}
+
+.testimonial-wrapper {
+ overflow: hidden;
+ padding: 1rem 0;
+ mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
+ -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
+}
+
+.testimonial-scroller {
+ display: flex;
+ gap: 1.5rem;
+ will-change: transform;
+}
+
+.testimonial-card {
+ background: var(--card);
+ padding: 2rem;
+ min-width: 320px;
+ max-width: 340px;
+ border-radius: 18px;
+ border: 1px solid var(--border);
+ box-shadow: 0 4px 20px rgba(0,0,0,0.04);
+ text-align: left;
+ flex-shrink: 0;
+ position: relative;
+}
+
+.testimonial-card::before {
+ content: '"';
+ position: absolute;
+ top: 1rem;
+ left: 1.5rem;
+ font-size: 4rem;
+ line-height: 1;
+ color: #6366f1;
+ opacity: 0.2;
+ font-family: Georgia, serif;
+ pointer-events: none;
+}
+
+.testimonial-card p {
+ font-style: italic;
+ color: var(--muted);
+ line-height: 1.7;
+ font-size: 0.97rem;
+ padding-top: 1.5rem;
+}
+
+.testimonial-card h4 {
+ margin-top: 1.25rem;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 0.9rem;
+ color: #6366f1;
+}
+
+/* ============================================================
+ CTA SECTION
+ ============================================================ */
+.cta {
+ padding: 5.5rem 0;
+ background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #4f46e5 100%);
+ color: #ffffff;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.cta::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
+ background-size: 28px 28px;
+}
+
+.cta-content {
+ position: relative;
+ z-index: 1;
+}
+
+.cta-content h2 {
+ font-size: clamp(2rem, 3.5vw, 2.8rem);
+ font-weight: 900;
+ margin-bottom: 1rem;
+ color: #ffffff;
+ letter-spacing: -0.02em;
+}
+
+.cta-content p {
+ font-size: 1.15rem;
+ margin-bottom: 2.5rem;
+ color: rgba(255,255,255,0.88);
+ max-width: 520px;
+ margin-left: auto;
+ margin-right: auto;
+ line-height: 1.7;
+}
+
+.cta-buttons {
+ display: flex;
+ gap: 1.25rem;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.cta .cta-buttons a.btn-premium-cta-1 {
+ background: #ffffff !important;
+ color: #4f46e5 !important;
+ box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
+}
+
+.cta .cta-buttons a.btn-premium-cta-1:hover {
+ background: #f1f5f9 !important;
+ transform: translateY(-2px);
+ box-shadow: 0 8px 28px rgba(0,0,0,0.2) !important;
+}
+
+.cta .cta-buttons a.btn-premium-cta-2 {
+ background: rgba(255,255,255,0.12) !important;
+ color: #ffffff !important;
+ border: 1.5px solid rgba(255,255,255,0.6) !important;
+}
+
+.cta .cta-buttons a.btn-premium-cta-2:hover {
+ background: rgba(255,255,255,0.22) !important;
+ border-color: #ffffff !important;
+ transform: translateY(-2px);
+}
+
+/* ============================================================
+ CONTRIBUTORS
+ ============================================================ */
+.contributors {
+ padding: 5.5rem 0;
+ background: var(--card);
+ text-align: center;
+}
+
+.contributors-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.25rem;
+ justify-content: center;
+ margin-top: 2.5rem;
+}
+
+.contributor-card {
+ text-decoration: none;
+ color: var(--text);
+ width: 90px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 0.5rem;
+ border-radius: 14px;
+ border: 1px solid transparent;
+ transition: all 0.25s ease;
+}
+
+.contributor-card:hover {
+ border-color: rgba(99,102,241,0.4);
+ background: var(--bg);
+ transform: translateY(-4px);
+ box-shadow: 0 8px 24px rgba(99,102,241,0.1);
+}
+
+.contributor-card img {
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ border: 2px solid var(--border);
+ transition: border-color 0.25s ease;
+ object-fit: cover;
+}
+
+.contributor-card:hover img {
+ border-color: #6366f1;
+}
+
+.contributor-card p {
+ font-size: 0.8rem;
+ font-weight: 500;
+ color: var(--muted);
+ text-align: center;
+ word-break: break-all;
+}
+
+/* ============================================================
+ FOOTER
+ ============================================================ */
+.footer {
+ background: var(--bg);
+ padding: 5rem 0 3rem;
+ border-top: 1px solid var(--border);
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr;
+ gap: 4rem;
+ margin-bottom: 3rem;
+}
+
+.footer-section h4 {
+ font-size: 1.1rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ color: var(--heading);
+}
+
+.footer-section p {
+ color: var(--muted);
+ margin-bottom: 1.5rem;
+ max-width: 320px;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section ul li {
+ margin-bottom: 0.75rem;
+}
+
+.footer-section ul li a {
+ color: var(--muted);
+ text-decoration: none;
+ transition: color 0.2s ease;
+}
+
+.footer-section ul li a:hover {
+ color: #6366f1;
+}
+
+/* Social links */
+.social-links {
+ display: flex;
+ gap: 1rem;
+}
+
+.social-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: var(--card);
+ border: 1px solid var(--border);
+ color: var(--muted);
+ font-size: 1.1rem;
+ transition: all 0.3s ease;
+ text-decoration: none;
+}
+
+.social-icon:hover {
+ transform: translateY(-3px);
+}
+
+.social-icon.github:hover {
+ background: #24292e;
+ color: #ffffff;
+ border-color: #24292e;
+}
+
+.social-icon.linkedin:hover {
+ background: #0077b5;
+ color: #ffffff;
+ border-color: #0077b5;
+}
+
+.social-icon.twitter:hover {
+ background: #000000;
+ color: #ffffff;
+ border-color: #000000;
+}
+
+.social-icon.discord:hover {
+ background: #5865f2;
+ color: #ffffff;
+ border-color: #5865f2;
+}
+
+.footer-bottom {
+ text-align: center;
+ padding-top: 2rem;
+ border-top: 1px solid var(--border);
+ color: var(--muted);
+ font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 2.5rem;
+ }
+}
diff --git a/client/src/pages/HomeNew.js b/client/src/pages/HomeNew.js
new file mode 100644
index 0000000..f559c5c
--- /dev/null
+++ b/client/src/pages/HomeNew.js
@@ -0,0 +1,702 @@
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { Link } from "react-router-dom";
+import { motion, AnimatePresence } from 'framer-motion';
+import { FaGithub, FaLinkedin, FaDiscord, FaArrowUp } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+import logo from "./logo.png";
+import "./HomeNew.css";
+import './ScrollToTop.css';
+
+const HomeNew = () => {
+ const [contributors, setContributors] = useState([]);
+ const [showScroll, setShowScroll] = useState(false);
+
+ useEffect(() => {
+ axios
+ .get("https://api.github.com/repos/lovelymahor/StudyMatePlus/contributors")
+ .then((response) => setContributors(response.data))
+ .catch((error) => console.error("Error fetching contributors", error));
+ }, []);
+
+ useEffect(() => {
+ const checkScrollTop = () => {
+ if (!showScroll && window.scrollY > 300) {
+ setShowScroll(true);
+ } else if (showScroll && window.scrollY <= 300) {
+ setShowScroll(false);
+ }
+ };
+
+ window.addEventListener("scroll", checkScrollTop);
+ return () => {
+ window.removeEventListener("scroll", checkScrollTop);
+ };
+ }, [showScroll]);
+
+ const scrollToTop = () => {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth"
+ });
+ };
+
+ // Animation variants
+ const fadeInUp = {
+ hidden: { opacity: 0, y: 60 },
+ visible: {
+ opacity: 1,
+ y: 0,
+ transition: { duration: 0.6, ease: "easeOut" }
+ }
+ };
+
+ const fadeInDown = {
+ hidden: { opacity: 0, y: -30 },
+ visible: {
+ opacity: 1,
+ y: 0,
+ transition: { duration: 0.6, ease: "easeOut" }
+ }
+ };
+
+ const staggerChildren = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.2,
+ delayChildren: 0.1
+ }
+ }
+ };
+
+ const staggerChildrenFast = {
+ hidden: { opacity: 0 },
+ visible: {
+ opacity: 1,
+ transition: {
+ staggerChildren: 0.1,
+ delayChildren: 0.1
+ }
+ }
+ };
+
+ const scaleIn = {
+ hidden: { opacity: 0, scale: 0.8 },
+ visible: {
+ opacity: 1,
+ scale: 1,
+ transition: { duration: 0.5, ease: "easeOut" }
+ }
+ };
+
+ const slideInLeft = {
+ hidden: { opacity: 0, x: -50 },
+ visible: {
+ opacity: 1,
+ x: 0,
+ transition: { duration: 0.6, ease: "easeOut" }
+ }
+ };
+
+ const slideInRight = {
+ hidden: { opacity: 0, x: 50 },
+ visible: {
+ opacity: 1,
+ x: 0,
+ transition: { duration: 0.6, ease: "easeOut" }
+ }
+ };
+
+ const bounceIn = {
+ hidden: { opacity: 0, scale: 0.3 },
+ visible: {
+ opacity: 1,
+ scale: 1,
+ transition: {
+ duration: 0.6,
+ ease: "easeOut",
+ type: "spring",
+ bounce: 0.4
+ }
+ }
+ };
+
+ const floatingAnimation = {
+ animate: {
+ y: [0, -10, 0],
+ transition: {
+ duration: 3,
+ repeat: Infinity,
+ ease: "easeInOut"
+ }
+ }
+ };
+
+ const pulseAnimation = {
+ animate: {
+ scale: [1, 1.05, 1],
+ transition: {
+ duration: 2,
+ repeat: Infinity,
+ ease: "easeInOut"
+ }
+ }
+ };
+
+ const testimonials = [
+ {
+ quote: "StudyMatePlus helped me organize my entire semester. I wish I had found this earlier!",
+ author: "— Priya Sharma, B.Tech CSE"
+ },
+ {
+ quote: "Thanks to the previous papers section, I was able to focus on the most important topics.",
+ author: "— Rahul Meena, BBA"
+ },
+ {
+ quote: "The senior guidance feature is a game-changer. Got great tips and motivation.",
+ author: "— Ayesha Khan, B.Sc Physics"
+ }
+ ];
+
+ return (
+
+ {/* Hero Section */}
+
+ {/* Ambient Shifting Glowing Backdrop Orbs */}
+
+
+
+
+
+ {/* LEFT — text */}
+
+
+ 🎓 Open-source · Free · Student-first
+
+
+ Welcome to StudyMatePlus
+
+
+ Your one-stop destination for academic resources, previous year
+ questions, and connecting with seniors for exam preparation success.
+
+
+
+
+ Browse Syllabus
+
+
+
+
+ Previous Papers
+
+
+
+
+
+ {/* RIGHT — 2×2 staggered floating card grid */}
+
+ {[
+ { icon: "📚", title: "Study Materials", desc: "Curated notes & resources", delay: 0 },
+ { icon: "📝", title: "Previous Papers", desc: "Year-wise PYQs by dept", delay: 0.1 },
+ { icon: "🎓", title: "Senior Guidance", desc: "Connect with seniors", delay: 0.2 },
+ { icon: "💬", title: "Exam Feedback", desc: "Real student insights", delay: 0.3 },
+ ].map((card, i) => (
+
+
+
+ {card.icon}
+
+
+
{card.title}
+
{card.desc}
+
+
+
+
+ {/* Features Section */}
+
+
+
+ Why Choose StudyMatePlus?
+
+
+ {[
+ {
+ icon: "📋",
+ title: "Organized Syllabus",
+ description: "Department-wise syllabus collection with easy navigation and search functionality.",
+ link: "/syllabus",
+ linkText: "Explore Syllabus →"
+ },
+ {
+ icon: "📄",
+ title: "Previous Year Papers",
+ description: "Comprehensive collection of PYQs from multiple universities and departments.",
+ link: "/pyqs",
+ linkText: "Browse PYQs →"
+ },
+ {
+ icon: "💬",
+ title: "Exam Feedback",
+ description: "Real student feedback on difficulty levels, important topics, and exam patterns.",
+ link: "/feedback",
+ linkText: "Read Feedback →"
+ }
+ ].map((feature, index) => (
+
+
+ {feature.icon}
+
+ {feature.title}
+ {feature.description}
+
+
+ {feature.linkText}
+
+
+
+ ))}
+
+
+
+ {/* Stats Section */}
+
+
+
+ {[
+ { number: "500+", label: "Study Materials" },
+ { number: "50+", label: "Universities" },
+ { number: "1000+", label: "Previous Papers" },
+ { number: "200+", label: "Active Mentors" }
+ ].map((stat, index) => (
+
+
+ {stat.number}
+
+
+ {stat.label}
+
+
+ ))}
+
+
+
+
+ {/* How It Works Section */}
+
+
+
+ How StudyMatePlus Works
+
+
+ {[
+ {
+ icon: "🏫",
+ title: "Choose Your Department",
+ description: "Select your university and department to access relevant study materials.",
+ link: "/syllabus",
+ linkText: "Select Department →"
+ },
+ {
+ icon: "📚",
+ title: "Browse Resources",
+ description: "Explore syllabus, previous papers, and feedback from fellow students.",
+ link: "/pyqs",
+ linkText: "Browse Resources →"
+ },
+ {
+ icon: "🤝",
+ title: "Connect & Learn",
+ description: "Get guidance from seniors and share your own exam experiences.",
+ link: "/mentorship",
+ linkText: "Connect Now →"
+ }
+ ].map((step, index) => (
+
+
+ {step.icon}
+
+ {step.title}
+ {step.description}
+
+
+ {step.linkText}
+
+
+
+ ))}
+
+
+
+ {/* Testimonials Section */}
+
+
+
+ What Students Say
+
+
+
+ {testimonials.map((testimonial, index) => (
+
+
+ "{testimonial.quote}"
+
+
+ {testimonial.author}
+
+
+ ))}
+ {testimonials.map((testimonial, index) => (
+
+
+ "{testimonial.quote}"
+
+
+ {testimonial.author}
+
+
+ ))}
+
+
+
+
+ {/* CTA Section */}
+
+
+
+ Ready to Ace Your Exams?
+
+ Join thousands of students who are already using StudyMatePlus for
+ their exam preparation.
+
+
+
+
+
+ Get Started
+
+
+
+
+
+
+ Learn More
+
+
+
+
+
+
+
+
+ {/* Contributors Section */}
+
+
+
+ Our Contributors
+
+
+
+ {contributors.map((contributor, index) => (
+
+
+
+ {contributor.login}
+
+
+ ))}
+
+
+
+
+ {/* Footer */}
+
+
+
+ {/* Left Section */}
+
+ 
+ Empowering students with comprehensive academic resources and peer-to-peer learning.
+ {/* Social Links with Icons */}
+
+
+
+ {/* Quick Links */}
+
+ Quick Links
+
+ {[
+ { to: "/syllabus", text: "Syllabus" },
+ { to: "/pyqs", text: "Previous Papers" },
+ { to: "/feedback", text: "Feedback" },
+ { to: "/mentorship", text: "Mentorship" }
+ ].map((link, index) => (
+
+ {link.text}
+
+ ))}
+
+
+
+ {/* Support Links */}
+
+ Support
+
+ {[
+ { to: "/help", text: "Help Center" },
+ { to: "/contact", text: "Contact Us" },
+ { to: "/contribute", text: "Contribute" },
+ { to: "/privacy", text: "Privacy Policy" }
+ ].map((link, index) => (
+
+ {link.text}
+
+ ))}
+
+
+
+
+ {/* Footer Bottom */}
+
+ © {new Date().getFullYear()} StudyMatePlus. Open-source educational platform for students.
+
+
+
+ {/* Scroll to Top Button */}
+
+ {showScroll && (
+
+
+
+ )}
+
+
+ );
+};
+
+export default HomeNew;