diff --git a/frontend/app/(marketing)/landing.css b/frontend/app/(marketing)/landing.css new file mode 100644 index 0000000..4fd1b89 --- /dev/null +++ b/frontend/app/(marketing)/landing.css @@ -0,0 +1,1416 @@ +/* Landing page styles only. Core color decisions come from globals.css tokens. */ + +@keyframes lp-fade-up { + from { + opacity: 0; + filter: blur(5px); + transform: translate3d(0, 24px, 0); + } + to { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 0, 0); + } +} + +@keyframes lp-loader-line { + 0% { transform: scaleX(0); transform-origin: left; } + 48% { transform: scaleX(1); transform-origin: left; } + 52% { transform: scaleX(1); transform-origin: right; } + 100% { transform: scaleX(0); transform-origin: right; } +} + +@keyframes lp-loader-mark { + 0%, 100% { transform: translateY(0) rotate(-2deg); } + 50% { transform: translateY(-3px) rotate(2deg); } +} + +@keyframes lp-settle-lecture { + 0% { opacity: 0; filter: blur(8px); transform: translate3d(80px, -22px, 0) rotate(-12deg) scale(0.94); } + 58% { opacity: 1; filter: blur(0); transform: translate3d(-6px, 4px, 0) rotate(-4.4deg) scale(1.015); } + 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); } +} + +@keyframes lp-settle-study { + 0% { opacity: 0; filter: blur(8px); transform: translate3d(-58px, 34px, 0) rotate(9deg) scale(0.94); } + 60% { opacity: 1; filter: blur(0); transform: translate3d(5px, -4px, 0) rotate(2.4deg) scale(1.015); } + 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotate(3deg) scale(1); } +} + +@keyframes lp-settle-review { + 0% { opacity: 0; filter: blur(8px); transform: translate3d(30px, 54px, 0) rotate(-8deg) scale(0.94); } + 62% { opacity: 1; filter: blur(0); transform: translate3d(-4px, -3px, 0) rotate(-2deg) scale(1.012); } + 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) rotate(-2.5deg) scale(1); } +} + +html:has(.lp-root), +body:has(.lp-root) { + background: #faf7f2; +} + +.lp-fade-in { + opacity: 1 !important; + transform: translateY(0) !important; + filter: blur(0) !important; + transition: opacity 0.74s cubic-bezier(0.22, 1, 0.36, 1), transform 0.74s cubic-bezier(0.22, 1, 0.36, 1), filter 0.74s ease; +} + +.lp-fade-out { + opacity: 0; + filter: blur(5px); + transform: translateY(24px); + transition: opacity 0.74s cubic-bezier(0.22, 1, 0.36, 1), transform 0.74s cubic-bezier(0.22, 1, 0.36, 1), filter 0.74s ease; +} + +.lp-root { + --lp-cream: #faf7f2; + --lp-cream-dark: #f3ede4; + --lp-green: #6dbe8b; + --lp-green-dark: #2f855a; + --lp-apricot: #f9c784; + --lp-burnt: #bf4408; + --lp-text: #2e2e2e; + --lp-muted: #5b6573; + --lp-border: rgba(84, 96, 109, 0.12); + --lp-border-strong: rgba(84, 96, 109, 0.18); + --lp-surface: #ffffff; + --lp-surface-soft: rgba(255, 255, 255, 0.72); + --lp-shadow-soft: 0 10px 30px rgba(33, 43, 54, 0.08); + --lp-shadow-strong: 0 22px 48px rgba(33, 43, 54, 0.16); + --lp-radius: 14px; + + min-height: 100vh; + width: 100%; + max-width: 100vw; + background: var(--lp-cream); + color: var(--lp-text); + font-family: var(--font-plus-jakarta), "Inter", sans-serif; + overflow-x: hidden; + position: relative; +} + +.lp-root, +.lp-root * { + box-sizing: border-box; +} + +.lp-loading { + position: fixed; + inset: 0; + z-index: 80; + display: grid; + place-items: center; + background: + linear-gradient(rgba(47, 133, 90, 0.045) 1px, transparent 1px), + linear-gradient(90deg, rgba(47, 133, 90, 0.045) 1px, transparent 1px), + var(--lp-cream); + background-size: 38px 38px; + opacity: 1; + visibility: visible; + transition: opacity 0.35s ease, visibility 0.35s ease; +} + +.lp-loading.is-hidden { + opacity: 0; + visibility: hidden; + pointer-events: none; +} + +.lp-loading-card { + width: min(280px, calc(100vw - 40px)); + padding: 22px 24px 20px; + border: 1px solid rgba(109, 190, 139, 0.34); + border-radius: 18px; + background: rgba(255, 255, 255, 0.82); + box-shadow: var(--lp-shadow-soft); +} + +.lp-loading-mark { + display: block; + width: 54px; + height: 38px; + margin-bottom: 14px; + border: 2px solid rgba(47, 133, 90, 0.42); + border-top: 7px solid var(--lp-apricot); + border-radius: 7px; + background: + repeating-linear-gradient(to bottom, transparent 0 8px, rgba(86, 151, 191, 0.2) 9px 10px), + #fffdf7; + animation: lp-loader-mark 1.1s ease-in-out infinite; +} + +.lp-loading-text { + display: block; + color: var(--lp-text); + font-size: 14px; + font-weight: 800; + letter-spacing: 0.01em; +} + +.lp-loading-line { + display: block; + height: 3px; + margin-top: 13px; + border-radius: 999px; + background: var(--lp-green); + animation: lp-loader-line 1.05s ease-in-out infinite; +} + +.lp-hero { + position: relative; + min-height: 100vh; + min-height: 100dvh; + width: 100%; + overflow: hidden; + overflow-x: clip; + display: flex; + align-items: center; + padding: 56px max(24px, env(safe-area-inset-right)) 64px max(24px, env(safe-area-inset-left)); + background-color: var(--lp-cream); + background-image: + linear-gradient(rgba(47, 133, 90, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(47, 133, 90, 0.05) 1px, transparent 1px), + radial-gradient(circle at 82% 15%, rgba(109, 190, 139, 0.16), transparent 28%), + radial-gradient(circle at 13% 86%, rgba(249, 199, 132, 0.16), transparent 26%); + background-size: 38px 38px, 38px 38px, auto, auto; +} + +.lp-hero::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: clamp(26px, 5vw, 74px); + width: 1px; + background: rgba(179, 75, 63, 0.24); +} + +.lp-hero::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(90deg, rgba(250, 247, 242, 0.58), transparent 22%, transparent 78%, rgba(250, 247, 242, 0.28)); + pointer-events: none; +} + +.lp-wordmark { + position: absolute; + z-index: 3; + top: 28px; + left: clamp(42px, 6vw, 96px); + display: inline-flex; + align-items: center; + gap: 10px; + color: var(--lp-green-dark); + letter-spacing: 0; +} + +.lp-wordmark span { + width: 34px; + height: 34px; + border: 1px solid rgba(109, 190, 139, 0.3); + border-radius: 11px; + background: rgba(255, 255, 255, 0.62); + display: inline-flex; + align-items: center; + justify-content: center; + box-shadow: 0 10px 22px rgba(33, 43, 54, 0.06); +} + +.lp-wordmark strong { + color: var(--lp-green-dark); + font-size: 15px; + font-weight: 950; +} + +.lp-hero-inner { + position: relative; + z-index: 2; + width: calc(100vw - 48px); + max-width: 1180px; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.82fr); + gap: clamp(36px, 6vw, 78px); + align-items: center; + padding-left: clamp(52px, 6vw, 88px); +} + +.lp-hero-copy, +.lp-hero-visual { + min-width: 0; +} + +.lp-hero-heading { + max-width: 720px; + margin: 0; + color: var(--lp-text); + font-family: var(--font-playfair), Georgia, serif; + font-size: clamp(48px, 5.45vw, 76px); + font-weight: 900; + line-height: 0.98; + letter-spacing: 0; +} + +.lp-hero-heading span { + display: block; +} + +.lp-accent-line { + display: block; + width: fit-content; + margin: 4px 0 6px; + color: var(--lp-green); + font-style: italic; + position: relative; + isolation: isolate; +} + +.lp-accent-line::after { + content: ""; + position: absolute; + left: -4px; + right: -10px; + bottom: -1px; + height: 0.11em; + border-radius: 999px; + background: var(--lp-apricot); + transform: rotate(-0.35deg); + z-index: -1; +} + +.lp-title-mobile { + display: none !important; +} + +.lp-hero-sub { + max-width: 592px; + margin: 24px 0 0; + color: var(--lp-muted); + font-size: clamp(16px, 1.4vw, 18px); + line-height: 1.75; + overflow-wrap: break-word; +} + +.lp-hero-actions { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 12px; + margin: 32px 0 22px; +} + +.lp-action-btn { + position: relative; + isolation: isolate; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + min-width: 150px; + min-height: 54px; + padding: 0 26px; + border-radius: 999px; + border: 1.5px solid transparent; + font-family: inherit; + font-size: 15px; + font-weight: 800; + line-height: 1; + text-decoration: none; + cursor: pointer; + max-width: 100%; + transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; +} + +.lp-action-btn--primary { + color: #241f1a; + background: var(--lp-apricot); + border-color: rgba(191, 68, 8, 0.08); + min-width: 186px; + min-height: 58px; + padding: 0 34px; + font-size: 16px; + box-shadow: 0 12px 24px rgba(191, 68, 8, 0.14); +} + +.lp-action-btn--primary:hover { + transform: translateY(-2px); + background: #f7bd69; + box-shadow: 0 16px 30px rgba(191, 68, 8, 0.18); +} + +.lp-action-btn--secondary { + color: var(--lp-green-dark); + background: rgba(255, 255, 255, 0.48); + border-color: rgba(109, 190, 139, 0.44); + min-width: 148px; + min-height: 48px; + padding: 0 22px; + font-size: 14px; +} + +.lp-action-btn--secondary:hover { + transform: translateY(-2px); + background: rgba(109, 190, 139, 0.12); + border-color: rgba(47, 133, 90, 0.5); +} + +.lp-verify-note { + display: grid; + grid-template-columns: 42px minmax(0, 1fr); + gap: 14px; + align-items: center; + width: min(430px, 100%); + padding-top: 18px; + border-top: 1px solid rgba(84, 96, 109, 0.16); +} + +.lp-verify-icon { + width: 42px; + height: 42px; + border-radius: 12px; + border: 1px solid rgba(47, 133, 90, 0.25); + background: rgba(109, 190, 139, 0.14); + color: var(--lp-green-dark); + display: inline-flex; + align-items: center; + justify-content: center; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); +} + +.lp-verify-icon svg { + display: block; +} + +.lp-verify-note strong, +.lp-verify-note em { + display: block; + font-style: normal; +} + +.lp-verify-note strong { + color: var(--lp-text); + font-size: 15px; + font-weight: 850; +} + +.lp-verify-note em { + margin-top: 3px; + color: var(--lp-muted); + font-size: 14px; +} + +.lp-hero-visual { + display: flex; + justify-content: flex-start; +} + +.lp-note-scene { + position: relative; + width: min(444px, 100%); + height: 456px; + transform: translateZ(0); +} + +.lp-note-scene::after { + content: ""; + position: absolute; + left: 12%; + right: 8%; + bottom: 22px; + height: 72px; + border-radius: 50%; + background: radial-gradient(ellipse, rgba(33, 43, 54, 0.16), transparent 68%); + filter: blur(10px); + opacity: 0.62; + transform: rotate(-5deg); + z-index: 0; +} + +.lp-note-card { + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 150px; + padding: 31px 36px 28px; + border: 1px solid rgba(84, 96, 109, 0.12); + border-radius: 17px; + box-shadow: 0 22px 42px rgba(33, 43, 54, 0.13); + will-change: transform, opacity, filter; + transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease; +} + +.lp-note-card::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + opacity: 0.68; + pointer-events: none; + z-index: 0; +} + +.lp-note-card > * { + position: relative; + z-index: 2; +} + +.lp-note-card--lecture { + top: 34px; + left: 12px; + width: 334px; + padding-left: 62px; + background: #fffdf7; + transform: rotate(-5deg); + animation: lp-settle-lecture 0.86s 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; + z-index: 2; +} + +.lp-note-card--lecture::before, +.lp-note-card--review::before { + background: + linear-gradient(rgba(213, 108, 96, 0.46) 1px, transparent 1px) 0 32px / 100% 42px no-repeat, + repeating-linear-gradient(to bottom, transparent 0 39px, rgba(86, 151, 191, 0.2) 40px 42px); +} + +.lp-note-card--study { + top: 182px; + right: 24px; + width: 330px; + min-height: 144px; + background: #fffefa; + transform: rotate(3deg); + animation: lp-settle-study 0.9s 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; + z-index: 3; +} + +.lp-note-card--study::before { + background-image: radial-gradient(rgba(84, 96, 109, 0.14) 1.2px, transparent 1.2px); + background-size: 14px 14px; +} + +.lp-note-card--review { + left: 76px; + bottom: 14px; + width: 318px; + min-height: 142px; + background: #fff6d9; + transform: rotate(-2.5deg); + animation: lp-settle-review 0.92s 0.58s cubic-bezier(0.22, 1, 0.36, 1) both; + z-index: 1; +} + +.lp-note-scene:hover .lp-note-card--lecture { + transform: translateY(-8px) rotate(-4deg); + box-shadow: 0 28px 48px rgba(33, 43, 54, 0.16); +} + +.lp-note-scene:hover .lp-note-card--study { + transform: translateY(-5px) rotate(2.2deg); + box-shadow: 0 28px 48px rgba(33, 43, 54, 0.16); +} + +.lp-note-scene:hover .lp-note-card--review { + transform: translateY(-3px) rotate(-1.8deg); + box-shadow: 0 24px 42px rgba(33, 43, 54, 0.14); +} + +.lp-note-course { + color: #252525; + font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive; + font-size: 32px; + font-weight: 800; + line-height: 0.95; + letter-spacing: 0; +} + +.lp-note-title { + width: fit-content; + margin-top: 18px; + color: var(--lp-green-dark); + font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive; + font-size: 22px; + line-height: 1; + transform: rotate(-1deg); +} + +.lp-note-rule { + display: block; + width: min(240px, 78%); + height: 4px; + margin-top: 12px; + border-radius: 999px; + background: rgba(47, 133, 90, 0.58); + transform: rotate(-0.5deg); +} + +.lp-note-tape { + position: absolute; + top: -14px; + left: 50%; + width: 104px; + height: 31px; + background: rgba(137, 170, 124, 0.32); + transform: translateX(-50%) rotate(3deg); + z-index: 4; +} + +.lp-note-pin { + position: absolute; + top: -14px; + right: 72px; + width: 31px; + height: 31px; + border-radius: 50%; + background: var(--lp-green); + box-shadow: 0 8px 16px rgba(47, 133, 90, 0.2); + z-index: 4; +} + +.lp-doodle { + position: absolute; + pointer-events: none; + opacity: 0.58; +} + +.lp-doodle--star { + width: 36px; + height: 36px; + right: 14px; + top: 58px; + border: 2px solid rgba(47, 133, 90, 0.35); + clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%); + transform: rotate(14deg); +} + +.lp-doodle--spark { + right: 28px; + bottom: 28px; + width: 72px; + height: 50px; + border-left: 3px solid rgba(47, 133, 90, 0.24); + border-radius: 50%; + transform: rotate(26deg); +} + +.lp-section { + padding: clamp(72px, 10vw, 116px) 24px; +} + +.lp-section--cream { + background: + linear-gradient(rgba(47, 133, 90, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(47, 133, 90, 0.035) 1px, transparent 1px), + var(--lp-cream-dark); + background-size: 38px 38px, 38px 38px, auto; +} + +.lp-section-inner { + width: calc(100vw - 48px); + max-width: 1100px; + margin: 0 auto; +} + +.lp-section-head { + max-width: 690px; + margin-bottom: 42px; +} + +.lp-section-label { + margin: 0 0 13px; + color: var(--lp-green-dark); + font-size: 12px; + font-weight: 850; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.lp-section-heading { + margin: 0; + color: var(--lp-text); + font-family: var(--font-playfair), Georgia, serif; + font-size: clamp(34px, 4vw, 54px); + font-weight: 900; + line-height: 1.08; + letter-spacing: 0; +} + +.lp-section-heading span { + display: block; +} + +.lp-credit-system { + display: grid; + grid-template-columns: minmax(0, 0.86fr) minmax(380px, 0.9fr); + gap: clamp(42px, 7vw, 88px); + align-items: center; +} + +.lp-credit-copy { + min-width: 0; +} + +.lp-credit-intro { + max-width: 560px; + margin: 22px 0 0; + color: var(--lp-muted); + font-size: 16px; + line-height: 1.72; +} + +.lp-credit-principles { + display: grid; + gap: 18px; + margin-top: 32px; +} + +.lp-credit-principle { + display: grid; + grid-template-columns: 46px minmax(0, 1fr); + gap: 15px; + align-items: start; + padding-bottom: 18px; + border-bottom: 1px solid rgba(84, 96, 109, 0.13); +} + +.lp-credit-principle:last-child { + padding-bottom: 0; + border-bottom: 0; +} + +.lp-credit-principle-icon, +.lp-credit-step-icon, +.lp-feature-icon { + color: var(--lp-green-dark); +} + +.lp-credit-principle-icon { + width: 46px; + height: 46px; + border-radius: 15px; + border: 1px solid rgba(109, 190, 139, 0.28); + background: rgba(109, 190, 139, 0.12); + display: inline-flex; + align-items: center; + justify-content: center; +} + +.lp-credit-principle strong, +.lp-credit-principle em { + display: block; + font-style: normal; +} + +.lp-credit-principle-text { + display: block; + min-width: 0; + max-width: 100%; +} + +.lp-credit-principle strong { + color: var(--lp-text); + font-size: 17px; + font-weight: 850; + line-height: 1.25; +} + +.lp-credit-principle em { + margin-top: 5px; + color: var(--lp-muted); + font-size: 14px; + line-height: 1.55; + overflow-wrap: break-word; +} + +.lp-credit-visual { + min-width: 0; +} + +.lp-credit-board { + position: relative; + min-height: 394px; + padding: 24px 26px 26px; + overflow: hidden; + border: 1px solid rgba(109, 190, 139, 0.24); + border-radius: 22px; + background: #ffffff; + box-shadow: 0 18px 44px rgba(33, 43, 54, 0.09); +} + +.lp-credit-board::before { + content: ""; + position: absolute; + inset: 0; + background: + radial-gradient(circle at 72% 28%, rgba(109, 190, 139, 0.08), transparent 32%), + radial-gradient(circle at 18% 88%, rgba(249, 199, 132, 0.08), transparent 28%); + pointer-events: none; +} + +.lp-credit-board-head, +.lp-pool-stage { + position: relative; + z-index: 1; +} + +.lp-credit-board-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding-bottom: 16px; + border-bottom: 1px solid rgba(84, 96, 109, 0.12); +} + +.lp-credit-board-head span { + color: var(--lp-green-dark); + font-size: 12px; + font-weight: 900; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.lp-credit-board-head strong { + color: var(--lp-text); + font-size: 15px; +} + +.lp-pool-stage { + display: grid; + grid-template-columns: minmax(134px, 1fr) 152px minmax(134px, 1fr); + gap: 24px; + align-items: center; + height: 278px; + margin-top: 18px; + padding: 24px 30px; + overflow: hidden; + border-radius: 18px; + background: + radial-gradient(circle at 50% 50%, rgba(109, 190, 139, 0.13), transparent 32%), + radial-gradient(circle at 18% 70%, rgba(249, 199, 132, 0.11), transparent 30%), + linear-gradient(180deg, rgba(255, 253, 247, 0.95), rgba(255, 255, 255, 0.82)); + border: 1px solid rgba(109, 190, 139, 0.18); +} + +.lp-pool-stage::before { + content: ""; + position: absolute; + left: 54px; + right: 54px; + top: 50%; + height: 2px; + border-radius: 999px; + background: linear-gradient(90deg, rgba(109, 190, 139, 0.02), rgba(109, 190, 139, 0.26), rgba(109, 190, 139, 0.02)); +} + +.lp-pool-stage::after { + content: ""; + position: absolute; + left: 50%; + top: 50%; + width: 216px; + height: 216px; + border-radius: 50%; + border: 1px solid rgba(109, 190, 139, 0.13); + transform: translate(-50%, -50%); + pointer-events: none; +} + +.lp-pool-column { + position: relative; + z-index: 1; + display: grid; + gap: 18px; +} + +.lp-pool-column--uploads { + justify-items: end; +} + +.lp-pool-column--materials { + justify-items: start; +} + +.lp-pool-slip { + display: inline-flex; + width: min(154px, 100%); + justify-content: center; + padding: 13px 15px; + border: 1px solid rgba(84, 96, 109, 0.12); + border-radius: 14px; + background: #fffdf7; + color: #252525; + font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive; + font-size: 16px; + font-weight: 800; + box-shadow: 0 14px 26px rgba(33, 43, 54, 0.1); + white-space: nowrap; +} + +.lp-pool-slip--one { + justify-self: start; + transform: translateX(12px) rotate(-3.5deg); +} + +.lp-pool-slip--two { + justify-self: end; + background: #fff6d9; + transform: rotate(3deg); +} + +.lp-pool-slip--three { + justify-self: center; + transform: translateX(-10px) rotate(1.8deg); +} + +.lp-pool-slip--study { + background: #fffefa; + transform: translateX(-8px) rotate(2.8deg); +} + +.lp-pool-slip--review { + justify-self: end; + background: #fff6d9; + transform: translateX(-20px) rotate(-3deg); +} + +.lp-credit-pool-orb { + position: relative; + z-index: 2; + width: 152px; + height: 152px; + border: 1px solid rgba(109, 190, 139, 0.3); + border-radius: 50%; + background: rgba(255, 255, 255, 0.94); + display: grid; + place-items: center; + text-align: center; + box-shadow: 0 18px 38px rgba(33, 43, 54, 0.09); +} + +.lp-credit-pool-orb span, +.lp-credit-pool-orb strong { + display: block; + font-style: normal; +} + +.lp-credit-pool-orb span { + color: var(--lp-text); + font-family: var(--font-playfair), Georgia, serif; + font-size: 36px; + font-weight: 900; + line-height: 0.88; +} + +.lp-credit-pool-orb strong { + margin-top: 8px; + color: var(--lp-muted); + font-size: 12px; + font-weight: 900; + letter-spacing: 0.08em; + text-transform: uppercase; +} + +.lp-feature-icon svg { + display: block; + transition: transform 0.24s ease; +} + +.lp-feature-card:hover .lp-feature-icon svg { + transform: translateY(-1px) scale(1.04); +} + +.lp-section--features { + background: + radial-gradient(circle at 18% 12%, rgba(249, 199, 132, 0.18), transparent 26%), + radial-gradient(circle at 84% 10%, rgba(109, 190, 139, 0.13), transparent 28%), + linear-gradient(rgba(47, 133, 90, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(47, 133, 90, 0.035) 1px, transparent 1px), + var(--lp-cream); + background-size: auto, auto, 38px 38px, 38px 38px, auto; +} + +.lp-feature-header { + max-width: 760px; + margin-bottom: 34px; +} + +.lp-feature-card-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 18px; +} + +@media (max-width: 1180px) { + .lp-feature-card-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lp-credit-system { + grid-template-columns: 1fr; + gap: 42px; + } + + .lp-credit-copy { + width: 100%; + max-width: 760px; + margin: 0 auto; + } + + .lp-credit-visual { + width: 100%; + max-width: 760px; + margin: 0 auto; + } +} + +.lp-feature-card { + min-height: 238px; + padding: 26px; + border: 1px solid var(--lp-border); + border-radius: var(--lp-radius); + background: rgba(255, 255, 255, 0.76); + box-shadow: 0 8px 24px rgba(33, 43, 54, 0.06); + transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease; +} + +.lp-feature-card:hover { + transform: translateY(-6px); + border-color: rgba(109, 190, 139, 0.38); + background: rgba(255, 255, 255, 0.93); + box-shadow: var(--lp-shadow-soft); +} + +.lp-feature-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 46px; + height: 46px; + margin-bottom: 25px; + border-radius: 14px; + border: 1px solid rgba(109, 190, 139, 0.28); + background: rgba(109, 190, 139, 0.12); + color: var(--lp-green-dark); +} + +.lp-feature-card h3 { + margin: 0 0 10px; + color: var(--lp-text); + font-size: 20px; + line-height: 1.22; +} + +.lp-feature-card p { + margin: 0; + color: var(--lp-muted); + font-size: 15px; + line-height: 1.66; +} + +.lp-final-strip { + display: flex; + align-items: center; + justify-content: space-between; + gap: 22px; + margin-top: 20px; + padding: 24px 26px; + border: 1px solid rgba(109, 190, 139, 0.3); + border-radius: 18px; + background: rgba(255, 255, 255, 0.78); + box-shadow: 0 8px 24px rgba(33, 43, 54, 0.06); +} + +.lp-final-strip strong, +.lp-final-strip span { + display: block; +} + +.lp-final-strip strong { + color: var(--lp-text); + font-size: 18px; + line-height: 1.3; +} + +.lp-final-strip span { + margin-top: 3px; + color: var(--lp-muted); + font-size: 15px; +} + +.lp-final-cta { + width: fit-content; + flex: 0 0 auto; +} + +.lp-footer { + border-top: 1px solid var(--lp-border); + background: var(--lp-cream); + padding: 34px 24px; +} + +.lp-footer-inner { + width: min(1100px, 100%); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; +} + +.lp-footer-brand { + margin: 0 0 5px; + color: var(--lp-green-dark); + font-size: 19px; + font-weight: 900; +} + +.lp-footer-sub { + margin: 0; + color: var(--lp-muted); + font-size: 13px; +} + +.lp-footer-link { + color: var(--lp-green-dark); + font-size: 14px; + font-weight: 850; + text-decoration: none; +} + +.lp-footer-link:hover { + text-decoration: underline; + text-underline-offset: 4px; +} + +@media (max-width: 1120px) { + .lp-hero-inner { + grid-template-columns: minmax(0, 1fr) minmax(320px, 0.88fr); + gap: 34px; + padding-left: clamp(36px, 4vw, 58px); + } + + .lp-hero-visual { + justify-content: flex-start; + } + + .lp-note-scene { + width: 360px; + height: 398px; + } + + .lp-note-card { + min-height: 124px; + padding: 24px 27px 22px; + } + + .lp-note-card--lecture { + width: 286px; + padding-left: 56px; + } + + .lp-note-card--study { + top: 150px; + right: 18px; + width: 284px; + } + + .lp-note-card--review { + left: 38px; + width: 282px; + } + + .lp-note-course { font-size: 30px; } + .lp-note-title { font-size: 20px; } +} + +@media (max-width: 940px) { + .lp-hero { + align-items: start; + padding-top: 58px; + padding-bottom: 76px; + } + + .lp-hero-inner { + grid-template-columns: 1fr; + gap: 34px; + padding-left: clamp(26px, 7vw, 52px); + } + + .lp-hero-heading { + max-width: 680px; + font-size: clamp(45px, 10vw, 66px); + } + + .lp-hero-sub { + max-width: 650px; + } + + .lp-hero-visual { + justify-content: flex-start; + } + + .lp-note-scene { + width: min(520px, 100%); + height: 372px; + } + + .lp-note-card--lecture { + top: 8px; + left: 0; + } + + .lp-note-card--study { + top: 130px; + } + + .lp-note-card--review { + bottom: 0; + } + + .lp-feature-card-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 620px) { + .lp-hero { + min-height: 100vh; + min-height: 100dvh; + align-items: start; + padding: 108px 16px 34px; + } + + .lp-hero::before { + left: 16px; + } + + .lp-wordmark { + top: 26px; + left: 38px; + } + + .lp-wordmark span { + width: 31px; + height: 31px; + border-radius: 10px; + } + + .lp-wordmark strong { + font-size: 14px; + } + + .lp-hero-inner { + width: calc(100% - 24px); + max-width: 360px; + gap: 0; + margin-left: 0; + margin-right: auto; + padding-left: clamp(16px, 6vw, 22px); + } + + .lp-hero-heading { + max-width: 100%; + font-size: clamp(37px, 11vw, 44px); + line-height: 1; + } + + .lp-title-desktop { + display: none !important; + } + + .lp-title-mobile { + display: block !important; + } + + .lp-accent-line { + margin: 3px 0 5px; + } + + .lp-accent-line::after { + bottom: -2px; + height: 0.1em; + } + + .lp-hero-sub { + max-width: 100%; + margin-top: 21px; + font-size: 15px; + line-height: 1.62; + } + + .lp-hero-actions { + display: grid; + grid-template-columns: 1fr; + gap: 11px; + margin: 56px 0 18px; + } + + .lp-action-btn { + width: 100%; + } + + .lp-action-btn--primary { + min-height: 54px; + } + + .lp-action-btn--secondary { + min-height: 44px; + background: rgba(255, 255, 255, 0.56); + } + + .lp-verify-note { + grid-template-columns: 34px minmax(0, 1fr); + gap: 11px; + padding-top: 17px; + } + + .lp-verify-icon { + width: 34px; + height: 34px; + border-radius: 10px; + } + + .lp-verify-icon svg { + width: 20px; + height: 20px; + } + + .lp-verify-note strong { + font-size: 14px; + } + + .lp-verify-note em { + font-size: 13px; + overflow-wrap: anywhere; + } + + .lp-hero-visual { + display: none; + } + + .lp-note-scene { + width: min(300px, 100%); + height: 214px; + margin-top: 2px; + } + + .lp-note-card { + min-height: 72px; + padding: 14px 16px 13px; + border-radius: 12px; + } + + .lp-note-card--lecture { + width: 226px; + top: 4px; + left: 0; + padding-left: 42px; + } + + .lp-note-card--study { + width: 218px; + top: 76px; + right: 0; + } + + .lp-note-card--review { + width: 218px; + left: 24px; + bottom: 0; + } + + .lp-note-course { + font-size: 20px; + } + + .lp-note-title { + margin-top: 7px; + font-size: 14px; + } + + .lp-note-rule { + width: min(150px, 76%); + height: 2px; + margin-top: 5px; + } + + .lp-note-tape { + width: 78px; + height: 23px; + } + + .lp-note-pin { + right: 48px; + width: 20px; + height: 20px; + } + + .lp-doodle { + display: none; + } + + .lp-section, + .lp-footer { + padding-left: 18px; + padding-right: 18px; + } + + .lp-hero-inner, + .lp-section-inner { + max-width: 100%; + } + + .lp-section-inner { + width: 100%; + } + + .lp-section-heading { + font-size: 34px; + } + + .lp-credit-principle-text { + width: 100%; + max-width: 276px; + } + + .lp-credit-visual { + display: none; + } + + .lp-feature-card-grid { + grid-template-columns: 1fr; + } + + .lp-feature-card { + min-height: auto; + padding: 24px; + } + + .lp-final-strip { + align-items: stretch; + flex-direction: column; + padding: 22px; + } + + .lp-final-cta { + width: 100%; + } + + .lp-footer-inner { + align-items: flex-start; + flex-direction: column; + } +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + } +} diff --git a/frontend/app/(marketing)/page.tsx b/frontend/app/(marketing)/page.tsx new file mode 100644 index 0000000..398f045 --- /dev/null +++ b/frontend/app/(marketing)/page.tsx @@ -0,0 +1,270 @@ +"use client"; + +import React, { useEffect, useRef, useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; +import { + BadgeCheck, + BookOpen, + Bookmark, + CalendarDays, + ClipboardList, + Trophy, + Upload, + WalletCards, +} from "lucide-react"; +import { getSessionWithRecovery, supabase } from "@/lib/supabaseClient"; +import "./landing.css"; + +function useInView(threshold = 0.15) { + const ref = useRef(null); + const [visible, setVisible] = useState(false); + + useEffect(() => { + const el = ref.current; + if (!el) return; + + const obs = new IntersectionObserver( + ([e]) => { + if (e.isIntersecting) setVisible(true); + }, + { threshold }, + ); + obs.observe(el); + return () => obs.unobserve(el); + }, [threshold]); + + return { ref, visible }; +} + +export default function Home() { + const router = useRouter(); + const [heroVisible, setHeroVisible] = useState(false); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const loadTimer = setTimeout(() => setLoading(false), 520); + const heroTimer = setTimeout(() => setHeroVisible(true), 720); + return () => { + clearTimeout(loadTimer); + clearTimeout(heroTimer); + }; + }, []); + + useEffect(() => { + getSessionWithRecovery(supabase).then(({ session }) => { + if (session) router.replace("/dashboard"); + }); + }, [router]); + + const scrollToSection = (id: string) => { + document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); + }; + + return ( +
+
+
+ + Organizing notes + +
+
+ +
+
+ + + + Poly Pages +
+
+
+

+ Upload notes. + Earn credits. + Unlock class materials. + Unlock + materials. +

+

+ Trade class materials with verified Cal Poly students. Upload approved notes to earn credits, then spend those credits on lecture notes, study guides, and exam reviews. +

+ +
+ + Join now + + +
+ +
+ + + + + Verified Cal Poly students only + requires an @calpoly.edu email + +
+
+ +
+
+ + +
+ CSC 357 + Lecture Notes + +
+
+ + MATH 241 + Study Guide + +
+
+ + BIO 161 + Exam Review + +
+
+
+
+
+ + + + +
+
+
+

Poly Pages

+

Independent student project - not affiliated with Cal Poly administration.

+
+ Join now +
+
+
+ ); +} + +function CreditSystemSection() { + const { ref, visible } = useInView(0.15); + const principles = [ + { Icon: BadgeCheck, title: "Verified students", desc: "@calpoly.edu only" }, + { Icon: Upload, title: "Approved uploads", desc: "Credits after review" }, + { Icon: WalletCards, title: "Balanced access", desc: "Earn when you add. Spend when you unlock." }, + ]; + + return ( +
+
+
+
+

Credit system

+

+ Earn credits by sharing. + Spend them on materials. +

+

+ Upload approved materials to earn credits. Spend credits to unlock files for your courses. +

+ +
+ {principles.map(({ Icon, title, desc }, i) => ( +
+ + + + + {title} + {desc} + +
+ ))} +
+
+ +
+
+
+ Credit pool + Fair access +
+
+
+ CSC 357 + BIO 161 + MATH 241 +
+
+ +12 + credits +
+
+ Study guide + Exam review +
+
+
+
+
+
+
+ ); +} + +function FeaturesSection() { + const { ref, visible } = useInView(0.18); + const features = [ + { Icon: ClipboardList, title: "Track your classes", desc: "Pin current courses and jump straight to matching notes and materials." }, + { Icon: BookOpen, title: "Find course materials", desc: "Browse lecture notes, study guides, exam reviews, and PDFs by course." }, + { Icon: CalendarDays, title: "Preview future courses", desc: "Look through materials from classes you are considering before registration." }, + { Icon: Trophy, title: "Earn from uploads", desc: "See which contributions are getting used and building credits." }, + { Icon: WalletCards, title: "Manage credits", desc: "Track your balance, unlocks, and upload history in one place." }, + { Icon: Bookmark, title: "Save useful materials", desc: "Bookmark the files you want ready when you study." }, + ]; + + return ( +
+
+
+
+

+ Find notes by course. + Unlock with credits. +

+
+
+
+ {features.map(({ Icon, title, desc }, i) => ( +
+ + + +

{title}

+

{desc}

+
+ ))} +
+
+
+ Upload what you have. Unlock what you need. + Credits keep the exchange balanced for every student. +
+ + Join now + +
+
+
+ ); +} diff --git a/frontend/app/globals.css b/frontend/app/globals.css index b017993..ca13792 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -252,10 +252,6 @@ body { /* Broad theme transition so nav, cards, sections, text animate when toggling light/dark */ .page-bg, .design-nav-header, -.landing-header, -.landing-page section, -.landing-footer, -.landing-mobile-menu, header, header .logo-box, [class*="browse-"], @@ -697,28 +693,14 @@ select { overflow: hidden; border-radius: 10px; } -/* Landing logo: transparent SVG, no background box needed */ -.landing-header .logo-box { - background: transparent; -} -.landing-header .logo-box img { - filter: none; -} [data-theme="dark"] .design-nav-header .logo-box, -[data-theme="dark"] header:not(.landing-header) .logo-box { +[data-theme="dark"] header .logo-box { background: #262626; } [data-theme="dark"] .design-nav-header .logo-box img, -[data-theme="dark"] header:not(.landing-header) .logo-box img { +[data-theme="dark"] header .logo-box img { filter: brightness(0) invert(1) opacity(0.92); } -/* Landing logo in dark mode: transparent SVG needs no special treatment */ -[data-theme="dark"] .landing-header .logo-box { - background: transparent; -} -[data-theme="dark"] .landing-header .logo-box img { - filter: none !important; -} /* Course detail: no pure white – use dark gray cards/tabs/filters with contrast */ [data-theme="dark"] .course-detail-note-card { @@ -839,14 +821,6 @@ select { border-color: rgba(255, 255, 255, 0.12) !important; } -/* Landing page dark mode */ -[data-theme="dark"] .landing-header { - background: #262626 !important; - border-color: rgba(255, 255, 255, 0.1) !important; -} -[data-theme="dark"] .landing-header button[aria-label="Toggle menu"] span { - background-color: #e5e5e5 !important; -} [data-theme="dark"] .not-found-secondary-btn { background: #2d2d2d !important; @@ -887,73 +861,9 @@ select { background: rgba(109, 190, 139, 0.2) !important; border-color: #6dbe8b !important; } -[data-theme="dark"] .landing-page nav button { - color: #d4d4d4 !important; -} -[data-theme="dark"] .landing-page nav button:hover { - color: #6dbe8b !important; -} -[data-theme="dark"] .landing-mobile-menu { - background: #262626 !important; - border-color: rgba(255, 255, 255, 0.1) !important; -} -[data-theme="dark"] .landing-mobile-menu button { - color: #d4d4d4 !important; -} -[data-theme="dark"] .landing-mobile-menu button:hover { - color: #6dbe8b !important; -} -[data-theme="dark"] .landing-page section { - color: inherit; -} -[data-theme="dark"] .landing-page h1, -[data-theme="dark"] .landing-page h2, -[data-theme="dark"] .landing-page h3, -[data-theme="dark"] .landing-page h4 { - color: #e5e5e5 !important; -} -[data-theme="dark"] .landing-page section p { - color: #a3a3a3 !important; -} -[data-theme="dark"] .landing-page .font-bold.text-3xl { - color: #e5e5e5 !important; -} -/* Landing: no white section boxes in dark mode */ -[data-theme="dark"] .landing-page #how-it-works, -[data-theme="dark"] .landing-page #features { - background: #2d2d2d !important; -} -[data-theme="dark"] .landing-page #why-poly-pages article { - background: #2d2d2d !important; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; -} -/* Landing tagline: lighter gray for better contrast, still grayish */ -.landing-tagline-gray { - color: #525252; -} -[data-theme="dark"] .landing-tagline-gray { - color: #c4c4c4 !important; -} -/* Landing footer: dark mode */ -[data-theme="dark"] .landing-footer { - background: #1a1a1a !important; - border-color: rgba(255, 255, 255, 0.12) !important; -} -[data-theme="dark"] .landing-footer h2 { - color: #6dbe8b !important; -} -[data-theme="dark"] .landing-footer p { - color: #a3a3a3 !important; -} -[data-theme="dark"] .landing-footer a { - color: #b8b8b8 !important; -} -[data-theme="dark"] .landing-footer a:hover { - color: #6dbe8b !important; -} /* Apricot/accent buttons and badges: dark text for contrast (no white on orange) */ [data-theme="dark"] .browse-upload-btn, @@ -1868,2067 +1778,3 @@ body { border-color: rgba(255, 255, 255, 0.15); } } - -/* ═══════════════════════════════════════════════ - LANDING PAGE REDESIGN — Poly Pages 2.0 - ═══════════════════════════════════════════════ */ - -/* Google Font import via next/font is handled in layout; - we use Plus Jakarta Sans as the display font */ -:root { - --lp-cream: #1a1a1a; - --lp-cream-dark: #222222; - --lp-green: #6dbe8b; - --lp-green-light: #6dbe8b; - --lp-gold: #f9c784; - --lp-dark: #1a1a1a; - --lp-text: #e5e5e5; - --lp-muted: #a3a3a3; - --lp-border: rgba(255,255,255,0.08); - --lp-card-bg: #2a2a2a; - --lp-radius: 20px; -} - -/* ── Animations ── */ -@keyframes lp-float { - 0%, 100% { transform: translateY(0px) rotate(-6deg); } - 50% { transform: translateY(-12px) rotate(-6deg); } -} -@keyframes lp-float2 { - 0%, 100% { transform: translateY(0px) rotate(4deg); } - 50% { transform: translateY(-8px) rotate(4deg); } -} -@keyframes lp-blob-drift { - 0%, 100% { transform: translate(0, 0) scale(1); } - 33% { transform: translate(30px, -20px) scale(1.05); } - 66% { transform: translate(-20px, 15px) scale(0.97); } -} -@keyframes lp-phone-bob { - 0%, 100% { transform: translateY(0) rotate(3deg); } - 50% { transform: translateY(-10px) rotate(3deg); } -} - -.lp-fade-in { - opacity: 1 !important; - transform: translateY(0) !important; - transition: opacity 0.7s ease, transform 0.7s ease; -} -.lp-fade-out { - opacity: 0; - transform: translateY(28px); - transition: opacity 0.7s ease, transform 0.7s ease; -} - -/* ── Root ── */ -.lp-root { - min-height: 100vh; - background: var(--lp-cream); - color: var(--lp-text); - font-family: var(--font-plus-jakarta), 'Inter', sans-serif; - overflow-x: hidden; -} - -/* ── Nav ── */ -.lp-nav { - position: sticky; - top: 0; - z-index: 50; - background: rgba(26, 26, 26, 0.92); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border-bottom: 1px solid var(--lp-border); -} -.lp-nav-inner { - max-width: 1200px; - margin: 0 auto; - padding: 0 24px; - height: 68px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; -} -.lp-nav-brand { - display: flex; - align-items: center; - gap: 10px; - flex-shrink: 0; -} -.lp-logo-wrap { - width: 36px; - height: 36px; - display: flex; - align-items: center; - justify-content: center; -} -.lp-logo-img { - width: 36px; - height: 36px; - object-fit: contain; -} -.lp-brand-name { - font-size: 18px; - font-weight: 800; - color: var(--lp-text); - letter-spacing: -0.3px; -} -.lp-badge { - background: rgba(45, 106, 79, 0.1); - color: var(--lp-green); - font-size: 11px; - font-weight: 700; - padding: 3px 10px; - border-radius: 100px; - letter-spacing: 0.05em; - text-transform: uppercase; -} -.lp-nav-links { - display: flex; - align-items: center; - gap: 4px; -} -@media (max-width: 768px) { .lp-nav-links { display: none; } } -.lp-nav-link { - background: none; - border: none; - font-size: 14px; - font-weight: 600; - color: var(--lp-muted); - padding: 8px 14px; - border-radius: 10px; - cursor: pointer; - transition: color 0.2s, background 0.2s; - font-family: inherit; -} -.lp-nav-link:hover { - color: var(--lp-green); - background: rgba(45, 106, 79, 0.06); -} -.lp-nav-right { - display: flex; - align-items: center; - gap: 12px; - flex-shrink: 0; -} -@media (max-width: 768px) { .lp-nav-right { display: none; } } - -/* ── CTA Buttons ── */ -.lp-cta-btn { - display: inline-flex; - align-items: center; - justify-content: center; - background: var(--lp-green); - color: #fff; - font-weight: 700; - border-radius: 100px; - border: none; - cursor: pointer; - text-decoration: none; - transition: transform 0.2s, box-shadow 0.2s, background 0.2s; - font-family: inherit; - letter-spacing: -0.2px; -} -.lp-cta-btn:hover { - background: #235c42; - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(45, 106, 79, 0.3); -} -.lp-cta-btn:active { transform: translateY(0); } -.lp-cta-btn--sm { font-size: 13px; padding: 9px 20px; } -.lp-cta-btn--lg { font-size: 16px; padding: 14px 32px; } -.lp-cta-btn--full { width: 100%; font-size: 15px; padding: 13px 20px; } -.lp-cta-btn--white { - background: #fff; - color: var(--lp-green); -} -.lp-cta-btn--white:hover { - background: #f0faf4; - box-shadow: 0 8px 24px rgba(255,255,255,0.2); -} -.lp-ghost-btn { - background: none; - border: 1.5px solid rgba(45, 106, 79, 0.3); - color: var(--lp-green); - font-size: 15px; - font-weight: 600; - padding: 13px 28px; - border-radius: 100px; - cursor: pointer; - transition: border-color 0.2s, background 0.2s; - font-family: inherit; -} -.lp-ghost-btn:hover { - border-color: var(--lp-green); - background: rgba(45, 106, 79, 0.05); -} - -/* ── Hamburger ── */ -.lp-hamburger { - display: none; - flex-direction: column; - gap: 5px; - background: none; - border: none; - cursor: pointer; - padding: 8px; -} -@media (max-width: 768px) { .lp-hamburger { display: flex; } } -.lp-ham-line { - width: 24px; - height: 2px; - background: var(--lp-text); - border-radius: 2px; - transition: all 0.3s; - display: block; -} -.lp-ham-line--1.open { transform: rotate(45deg) translate(5px, 5px); } -.lp-ham-line--2.open { opacity: 0; } -.lp-ham-line--3.open { transform: rotate(-45deg) translate(5px, -5px); } - -/* ── Mobile Menu ── */ -.lp-mobile-menu { - display: flex; - flex-direction: column; - gap: 8px; - padding: 16px 24px 24px; - border-top: 1px solid var(--lp-border); - background: rgba(245, 240, 232, 0.97); -} -.lp-mobile-link { - background: none; - border: none; - font-size: 16px; - font-weight: 600; - color: var(--lp-muted); - padding: 10px 0; - text-align: left; - cursor: pointer; - font-family: inherit; - border-bottom: 1px solid var(--lp-border); -} - -/* ── Hero ── */ -.lp-hero { - position: relative; - overflow: visible; - padding: 80px 24px 100px; - min-height: 90vh; - display: flex; - align-items: center; -} -.lp-hero-inner { - max-width: 1200px; - margin: 0 auto; - width: 100%; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 64px; - align-items: center; -} -@media (max-width: 900px) { - .lp-hero-inner { grid-template-columns: 1fr; gap: 48px; } - .lp-hero { min-height: auto; padding: 60px 24px 80px; } -} -.lp-eyebrow { - font-size: 12px; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--lp-green); - margin-bottom: 20px; -} -.lp-hero-heading { - font-family: 'Plus Jakarta Sans', serif; - font-size: clamp(42px, 5vw, 68px); - font-weight: 800; - line-height: 1.1; - letter-spacing: -1.5px; - color: var(--lp-text); - margin: 0 0 24px; -} -.lp-hero-em { - font-style: italic; - color: var(--lp-green); - position: relative; -} -.lp-hero-em::after { - content: ''; - position: absolute; - bottom: 2px; - left: 0; - right: 0; - height: 3px; - background: var(--lp-gold); - border-radius: 2px; -} -.lp-hero-sub { - font-size: 17px; - line-height: 1.7; - color: var(--lp-muted); - margin: 0 0 36px; - max-width: 480px; -} -.lp-hero-actions { - display: flex; - align-items: center; - gap: 16px; - flex-wrap: wrap; - margin-bottom: 40px; -} -.lp-trust-row { - display: flex; - align-items: center; - gap: 12px; -} -.lp-trust-avatars { - display: flex; -} -.lp-trust-avatar { - width: 32px; - height: 32px; - border-radius: 50%; - border: 2px solid var(--lp-cream); - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; - font-weight: 700; - color: #fff; - margin-left: -8px; -} -.lp-trust-avatar:first-child { margin-left: 0; } -.lp-trust-text { - font-size: 13px; - color: var(--lp-muted); -} -.lp-trust-text strong { color: var(--lp-text); } - -/* ── Mockup Stack ── */ -.lp-hero-visual { - position: relative; - display: flex; - justify-content: center; - align-items: center; -} -.lp-mockup-stack { - position: relative; - width: 380px; - height: 500px; - overflow: visible; -} -.lp-card { - position: absolute; - background: #1e1e1e; - border: 1px solid rgba(255,255,255,0.1); - border-radius: 16px; - padding: 20px; - box-shadow: 0 24px 64px rgba(0,0,0,0.5); - width: 240px; -} -.lp-card--back { - top: 160px; - left: -20px; - transform: rotate(-6deg); - background: #2a2218; - border-color: rgba(249,199,132,0.2); - animation: lp-float 4s ease-in-out infinite; - z-index: 4; -} -.lp-card--front { - top: 240px; - right: -10px; - transform: rotate(4deg); - background: #1a2420; - border-color: rgba(109,190,139,0.2); - animation: lp-float2 5s ease-in-out infinite; - z-index: 5; -} -.lp-card-tag { - font-size: 10px; - font-weight: 700; - letter-spacing: 0.12em; - text-transform: uppercase; - color: rgba(255,255,255,0.4); - background: rgba(255,255,255,0.06); - display: inline-block; - padding: 3px 8px; - border-radius: 4px; - margin-bottom: 12px; -} -.lp-card-tag--green { - background: rgba(109,190,139,0.12); - color: #6dbe8b; -} -.lp-card-title { - font-size: 14px; - font-weight: 700; - color: #e5e5e5; - margin-bottom: 8px; - line-height: 1.4; - letter-spacing: -0.2px; -} -.lp-card-meta { - font-size: 11px; - color: rgba(255,255,255,0.35); - letter-spacing: 0.02em; -} -.lp-card-badge { - position: absolute; - top: -10px; - right: 16px; - background: #6dbe8b; - color: #0d1a12; - font-size: 9px; - font-weight: 800; - padding: 4px 10px; - border-radius: 100px; - letter-spacing: 0.08em; - text-transform: uppercase; -} -.lp-phone-img { - position: absolute; - top: 0; - right: 20px; - width: 150px; - height: 280px; - border-radius: 20px; - box-shadow: 0 24px 60px rgba(0,0,0,0.6); - animation: lp-phone-bob 6s ease-in-out infinite; - z-index: 3; - object-fit: cover; - object-position: top; -} - -/* ── Blobs ── */ -.lp-blob { - position: absolute; - border-radius: 50%; - filter: blur(80px); - opacity: 0.35; - pointer-events: none; - animation: lp-blob-drift 12s ease-in-out infinite; -} -.lp-blob--1 { - width: 500px; - height: 500px; - background: radial-gradient(circle, #6dbe8b, transparent); - top: -100px; - right: -100px; -} -.lp-blob--2 { - width: 400px; - height: 400px; - background: radial-gradient(circle, #f9c784, transparent); - bottom: -80px; - left: -80px; - animation-delay: -6s; -} - -/* ── Sections ── */ -.lp-section { - padding: 100px 24px; -} -.lp-section--cream { - background: var(--lp-cream-dark); -} -.lp-section--dark { - background: var(--lp-dark); -} -.lp-section-inner { - max-width: 1100px; - margin: 0 auto; -} -.lp-section-label { - font-size: 12px; - font-weight: 700; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--lp-green); - margin-bottom: 16px; -} -.lp-section-label--light { color: var(--lp-green-light); } -.lp-section-heading { - font-family: var(--font-playfair), Georgia, serif; - font-size: clamp(32px, 4vw, 52px); - font-weight: 800; - letter-spacing: -1px; - color: var(--lp-text); - margin: 0 0 56px; - max-width: 600px; - line-height: 1.15; -} -.lp-section-heading--light { color: #fff; } - -/* ── Steps ── */ -.lp-steps-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 32px; -} -@media (max-width: 768px) { .lp-steps-grid { grid-template-columns: 1fr; } } -.lp-step-card { - background: var(--lp-card-bg); - border-radius: var(--lp-radius); - padding: 36px 32px; - border: 1px solid var(--lp-border); - transition: transform 0.3s, box-shadow 0.3s; -} -.lp-step-card:hover { - transform: translateY(-6px); - box-shadow: 0 20px 50px rgba(0,0,0,0.08); -} -.lp-step-num { - font-size: 13px; - font-weight: 800; - color: var(--lp-green); - letter-spacing: 0.05em; - display: block; - margin-bottom: 16px; -} -.lp-step-title { - font-size: 20px; - font-weight: 700; - color: var(--lp-text); - margin: 0 0 12px; - letter-spacing: -0.3px; -} -.lp-step-desc { - font-size: 15px; - color: var(--lp-muted); - line-height: 1.65; - margin: 0; -} - -/* ── Why Grid ── */ -.lp-why-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 24px; -} -@media (max-width: 640px) { .lp-why-grid { grid-template-columns: 1fr; } } -.lp-why-card { - background: var(--lp-card-bg); - border-radius: var(--lp-radius); - padding: 36px 32px; - border: 1px solid var(--lp-border); - transition: transform 0.3s, box-shadow 0.3s; -} -.lp-why-card:hover { - transform: translateY(-4px); - box-shadow: 0 16px 40px rgba(0,0,0,0.08); -} -.lp-why-emoji { - font-size: 32px; - display: block; - margin-bottom: 16px; -} -.lp-why-title { - font-size: 18px; - font-weight: 700; - color: var(--lp-text); - margin: 0 0 10px; - letter-spacing: -0.2px; -} -.lp-why-desc { - font-size: 15px; - color: var(--lp-muted); - line-height: 1.65; - margin: 0; -} - -/* ── Features ── */ -.lp-features-inner { - text-align: center; - display: flex; - flex-direction: column; - align-items: center; -} -.lp-features-sub { - font-size: 18px; - color: rgba(255,255,255,0.65); - max-width: 560px; - line-height: 1.7; - margin: -32px 0 48px; -} -.lp-features-pills { - display: flex; - flex-wrap: wrap; - gap: 12px; - justify-content: center; - margin-bottom: 56px; -} -.lp-pill { - background: rgba(255,255,255,0.08); - border: 1px solid rgba(255,255,255,0.15); - color: rgba(255,255,255,0.85); - font-size: 14px; - font-weight: 600; - padding: 8px 20px; - border-radius: 100px; - transition: background 0.2s, border-color 0.2s; -} -.lp-pill:hover { - background: rgba(109, 190, 139, 0.2); - border-color: var(--lp-green-light); - color: var(--lp-green-light); -} -.lp-features-cta { margin-top: 8px; } - -/* ── Footer ── */ -.lp-footer { - background: var(--lp-cream-dark); - border-top: 1px solid var(--lp-border); - padding: 40px 24px; -} -.lp-footer-inner { - max-width: 1100px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - flex-wrap: wrap; -} -.lp-footer-brand { - font-size: 20px; - font-weight: 800; - color: var(--lp-green); - margin: 0 0 4px; - letter-spacing: -0.3px; -} -.lp-footer-sub { - font-size: 13px; - color: var(--lp-muted); - margin: 0; -} -.lp-footer-link { - font-size: 14px; - font-weight: 600; - color: var(--lp-muted); - text-decoration: none; - transition: color 0.2s; -} -.lp-footer-link:hover { color: var(--lp-green); } - -/* ── Dark mode overrides — removed, dark is now the only mode ── */ - -/* ═══════════════════════════════════════════════ - POLY PAGES V2 — Editorial Dark Academic - ═══════════════════════════════════════════════ */ - -/* ── Tokens ── */ -:root { - --v2-bg: #0d0d0d; - --v2-surface: #141414; - --v2-surface2: #1c1c1c; - --v2-border: rgba(255,255,255,0.08); - --v2-text: #f0ede8; - --v2-muted: #888; - --v2-accent: #c8f060; - --v2-accent2: #e8c87a; - --v2-serif: var(--font-playfair), 'Georgia', serif; - --v2-sans: var(--font-plus-jakarta), 'Inter', sans-serif; - --v2-mono: 'JetBrains Mono', 'Courier New', monospace; -} - -/* ── Animations ── */ -@keyframes v2-marquee { - from { transform: translateX(0); } - to { transform: translateX(-50%); } -} -@keyframes v2-float-card { - 0%, 100% { transform: translateY(0) rotate(2deg); } - 50% { transform: translateY(-14px) rotate(2deg); } -} -@keyframes v2-pulse-dot { - 0%, 100% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.5; transform: scale(0.8); } -} - -.v2-in { - opacity: 1 !important; - transform: translateY(0) !important; - transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1) !important; -} -[class*="v2-"]:not(.v2-in):not(.v2-root):not(.v2-nav):not(.v2-nav-inner):not(.v2-nav-brand):not(.v2-nav-links):not(.v2-nav-right):not(.v2-hero):not(.v2-hero-bg):not(.v2-hero-bg-img):not(.v2-hero-bg-overlay):not(.v2-hero-content):not(.v2-marquee-wrap):not(.v2-marquee-track):not(.v2-marquee-item):not(.v2-marquee-dot):not(.v2-footer):not(.v2-footer-inner):not(.v2-footer-brand):not(.v2-footer-right):not(.v2-split):not(.v2-split-img-wrap):not(.v2-split-img):not(.v2-split-img-caption):not(.v2-split-text):not(.v2-mobile-menu):not(.v2-hamburger):not(.v2-nav-cta):not(.v2-nav-link):not(.v2-nav-wordmark):not(.v2-nav-logo):not(.v2-hero-scroll-hint):not(.v2-scroll-line):not(.v2-hero-bg-overlay) { - opacity: 0; - transform: translateY(32px); -} - -/* ── Root ── */ -.v2-root { - min-height: 100vh; - background: var(--v2-bg); - color: var(--v2-text); - font-family: var(--v2-sans); - overflow-x: hidden; -} - -/* ── Nav ── */ -.v2-nav { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 100; - transition: background 0.4s, border-color 0.4s; - border-bottom: 1px solid transparent; -} -.v2-nav--scrolled { - background: rgba(13,13,13,0.92); - backdrop-filter: blur(20px); - border-color: var(--v2-border); -} -.v2-nav-inner { - max-width: 1280px; - margin: 0 auto; - padding: 0 32px; - height: 72px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; -} -.v2-nav-brand { - display: flex; - align-items: center; - gap: 10px; -} -.v2-nav-logo { - width: 32px; - height: 32px; - filter: brightness(0) invert(1); -} -.v2-nav-wordmark { - font-family: var(--v2-serif); - font-size: 20px; - font-weight: 700; - color: var(--v2-text); - letter-spacing: -0.3px; -} -.v2-nav-wordmark em { - font-style: italic; - color: var(--v2-accent); -} -.v2-nav-links { - display: flex; - gap: 4px; -} -@media (max-width: 768px) { .v2-nav-links { display: none; } } -.v2-nav-link { - background: none; - border: none; - font-size: 13px; - font-weight: 500; - color: var(--v2-muted); - padding: 8px 16px; - border-radius: 6px; - cursor: pointer; - font-family: var(--v2-sans); - letter-spacing: 0.03em; - text-transform: uppercase; - transition: color 0.2s; -} -.v2-nav-link:hover { color: var(--v2-text); } -.v2-nav-cta { - display: flex; - align-items: center; - gap: 8px; - font-size: 13px; - font-weight: 600; - color: var(--v2-bg); - background: var(--v2-accent); - padding: 9px 20px; - border-radius: 4px; - text-decoration: none; - letter-spacing: 0.02em; - text-transform: uppercase; - transition: background 0.2s, transform 0.2s; -} -.v2-nav-cta:hover { background: #d4f570; transform: translateY(-1px); } -@media (max-width: 768px) { .v2-nav-cta { display: none; } } - -/* ── Hamburger ── */ -.v2-hamburger { - display: none; - flex-direction: column; - gap: 6px; - background: none; - border: none; - cursor: pointer; - padding: 8px; -} -@media (max-width: 768px) { .v2-hamburger { display: flex; } } -.v2-hamburger span { - display: block; - width: 22px; - height: 1.5px; - background: var(--v2-text); - transition: all 0.3s; -} -.v2-hamburger span.open:first-child { transform: rotate(45deg) translate(5px, 5px); } -.v2-hamburger span.open:last-child { transform: rotate(-45deg) translate(5px, -5px); } - -/* ── Mobile menu ── */ -.v2-mobile-menu { - background: var(--v2-surface); - border-top: 1px solid var(--v2-border); - padding: 24px 32px; - display: flex; - flex-direction: column; - gap: 4px; -} -.v2-mobile-link { - background: none; - border: none; - font-size: 15px; - font-weight: 500; - color: var(--v2-muted); - padding: 12px 0; - text-align: left; - cursor: pointer; - font-family: var(--v2-sans); - border-bottom: 1px solid var(--v2-border); - text-transform: uppercase; - letter-spacing: 0.05em; - font-size: 12px; -} -.v2-mobile-cta { - margin-top: 16px; - display: inline-block; - font-size: 14px; - font-weight: 700; - color: var(--v2-accent); - text-decoration: none; - letter-spacing: 0.05em; -} - -/* ── Hero ── */ -.v2-hero { - position: relative; - min-height: 100vh; - display: flex; - align-items: center; - overflow: hidden; - padding: 120px 32px 80px; -} -.v2-hero-bg { - position: absolute; - inset: -20%; - will-change: transform; -} -.v2-hero-bg-img { - width: 100%; - height: 100%; - object-fit: cover; - object-position: center 30%; - filter: grayscale(30%) brightness(0.35); -} -.v2-hero-bg-overlay { - position: absolute; - inset: 0; - background: linear-gradient(135deg, rgba(13,13,13,0.95) 40%, rgba(13,13,13,0.6) 100%); -} -.v2-hero-content { - position: relative; - z-index: 2; - max-width: 720px; -} -.v2-hero-kicker { - display: flex; - align-items: center; - gap: 12px; - font-size: 11px; - font-weight: 600; - letter-spacing: 0.15em; - text-transform: uppercase; - color: var(--v2-accent); - margin-bottom: 32px; -} -.v2-kicker-line { - display: block; - width: 40px; - height: 1px; - background: var(--v2-accent); -} -.v2-hero-title { - display: flex; - flex-direction: column; - gap: 0; - margin: 0 0 32px; - line-height: 1.0; -} -.v2-title-serif { - font-family: var(--v2-serif); - font-size: clamp(64px, 8vw, 110px); - font-weight: 900; - color: var(--v2-text); - letter-spacing: -2px; -} -.v2-title-outline { - font-family: var(--v2-serif); - font-size: clamp(64px, 8vw, 110px); - font-weight: 900; - color: transparent; - -webkit-text-stroke: 1.5px rgba(240,237,232,0.4); - letter-spacing: -2px; -} -.v2-title-accent { - color: var(--v2-accent); - font-style: italic; -} -.v2-title-sans { - font-family: var(--v2-sans); - font-size: clamp(48px, 6vw, 80px); - font-weight: 800; - color: var(--v2-text); - letter-spacing: -2px; -} -.v2-hero-desc { - font-size: 17px; - line-height: 1.75; - color: rgba(240,237,232,0.6); - max-width: 480px; - margin: 0 0 40px; -} -.v2-hero-actions { - display: flex; - align-items: center; - gap: 16px; - flex-wrap: wrap; - margin-bottom: 56px; -} -.v2-hero-stats { - display: flex; - align-items: center; - gap: 32px; - flex-wrap: wrap; -} -.v2-stat { display: flex; flex-direction: column; gap: 2px; } -.v2-stat-num { - font-family: var(--v2-serif); - font-size: 22px; - font-weight: 700; - color: var(--v2-text); - letter-spacing: -0.5px; -} -.v2-stat-label { - font-size: 11px; - color: var(--v2-muted); - text-transform: uppercase; - letter-spacing: 0.08em; -} -.v2-stat-divider { - width: 1px; - height: 32px; - background: var(--v2-border); -} - -/* ── Hero floating card ── */ -.v2-hero-card { - position: absolute; - right: 8%; - top: 50%; - transform: translateY(-50%) rotate(2deg); - z-index: 3; - animation: v2-float-card 5s ease-in-out infinite; - border-radius: 16px; - overflow: hidden; - box-shadow: 0 40px 80px rgba(0,0,0,0.6); - width: 220px; -} -@media (max-width: 900px) { .v2-hero-card { display: none; } } -.v2-hero-card-img { - width: 100%; - height: 380px; - object-fit: cover; - display: block; -} -.v2-hero-card-label { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); - padding: 24px 16px 16px; - font-size: 12px; - font-weight: 600; - color: var(--v2-text); - display: flex; - align-items: center; - gap: 8px; - letter-spacing: 0.05em; - text-transform: uppercase; -} -.v2-card-dot { - width: 6px; - height: 6px; - border-radius: 50%; - background: var(--v2-accent); - animation: v2-pulse-dot 2s ease-in-out infinite; - flex-shrink: 0; -} - -/* ── Scroll hint ── */ -.v2-hero-scroll-hint { - position: absolute; - bottom: 40px; - left: 32px; - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - font-size: 10px; - letter-spacing: 0.15em; - text-transform: uppercase; - color: var(--v2-muted); - z-index: 2; -} -.v2-scroll-line { - width: 1px; - height: 48px; - background: linear-gradient(to bottom, var(--v2-muted), transparent); -} - -/* ── Buttons ── */ -.v2-btn-primary { - display: inline-flex; - align-items: center; - gap: 10px; - background: var(--v2-accent); - color: var(--v2-bg); - font-size: 13px; - font-weight: 700; - padding: 14px 28px; - border-radius: 4px; - text-decoration: none; - letter-spacing: 0.05em; - text-transform: uppercase; - border: none; - cursor: pointer; - font-family: var(--v2-sans); - transition: background 0.2s, transform 0.2s, box-shadow 0.2s; -} -.v2-btn-primary:hover { - background: #d4f570; - transform: translateY(-2px); - box-shadow: 0 8px 24px rgba(200,240,96,0.25); -} -.v2-btn-primary--sm { padding: 10px 20px; font-size: 12px; } -.v2-btn-ghost { - background: none; - border: 1px solid rgba(240,237,232,0.2); - color: var(--v2-text); - font-size: 13px; - font-weight: 600; - padding: 13px 28px; - border-radius: 4px; - cursor: pointer; - font-family: var(--v2-sans); - letter-spacing: 0.05em; - text-transform: uppercase; - transition: border-color 0.2s, background 0.2s; -} -.v2-btn-ghost:hover { - border-color: rgba(240,237,232,0.5); - background: rgba(240,237,232,0.05); -} - -/* ── Marquee ── */ -.v2-marquee-wrap { - overflow: hidden; - border-top: 1px solid var(--v2-border); - border-bottom: 1px solid var(--v2-border); - background: var(--v2-surface); - padding: 16px 0; -} -.v2-marquee-track { - display: flex; - width: max-content; - animation: v2-marquee 30s linear infinite; -} -.v2-marquee-item { - font-size: 12px; - font-weight: 600; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--v2-muted); - padding: 0 32px; - white-space: nowrap; - display: flex; - align-items: center; - gap: 32px; -} -.v2-marquee-dot { color: var(--v2-accent); font-size: 10px; } - -/* ── Sections ── */ -.v2-section { padding: 120px 32px; } -.v2-section--dark { background: var(--v2-surface); } -.v2-section--features { background: var(--v2-bg); } -.v2-section--process { background: var(--v2-bg); } -.v2-section-inner { max-width: 1280px; margin: 0 auto; } -.v2-section-header { margin-bottom: 72px; } -.v2-eyebrow { - display: block; - font-size: 11px; - font-weight: 600; - letter-spacing: 0.15em; - text-transform: uppercase; - color: var(--v2-accent); - margin-bottom: 20px; -} -.v2-eyebrow--light { color: var(--v2-accent); } -.v2-section-title { - font-family: var(--v2-serif); - font-size: clamp(36px, 4vw, 60px); - font-weight: 900; - color: var(--v2-text); - line-height: 1.1; - letter-spacing: -1px; - margin: 0; -} -.v2-section-title em { font-style: italic; color: var(--v2-accent2); } -.v2-section-title--light { color: var(--v2-text); } - -/* ── Process ── */ -.v2-process-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2px; - background: var(--v2-border); - border: 1px solid var(--v2-border); -} -@media (max-width: 768px) { .v2-process-grid { grid-template-columns: 1fr; } } -.v2-process-card { - background: var(--v2-bg); - padding: 48px 40px; - position: relative; - transition: background 0.3s; -} -.v2-process-card:hover { background: var(--v2-surface); } -.v2-process-img-wrap { - position: relative; - margin-bottom: 32px; - overflow: hidden; - border-radius: 8px; - height: 200px; -} -.v2-process-img { - width: 100%; - height: 100%; - object-fit: cover; - filter: grayscale(40%) brightness(0.7); - transition: filter 0.4s, transform 0.4s; -} -.v2-process-card:hover .v2-process-img { - filter: grayscale(0%) brightness(0.85); - transform: scale(1.03); -} -.v2-process-num { - position: absolute; - top: 12px; - left: 12px; - font-family: var(--v2-serif); - font-size: 13px; - font-weight: 700; - color: var(--v2-accent); - background: rgba(13,13,13,0.8); - padding: 4px 10px; - border-radius: 3px; - letter-spacing: 0.05em; -} -.v2-process-title { - font-family: var(--v2-serif); - font-size: 28px; - font-weight: 700; - color: var(--v2-text); - margin: 0 0 16px; - letter-spacing: -0.5px; -} -.v2-process-desc { - font-size: 15px; - color: var(--v2-muted); - line-height: 1.7; - margin: 0; -} - -/* ── Split ── */ -.v2-split { - display: grid; - grid-template-columns: 1fr 1fr; - min-height: 600px; -} -@media (max-width: 768px) { .v2-split { grid-template-columns: 1fr; } } -.v2-split-img-wrap { - position: relative; - overflow: hidden; -} -.v2-split-img { - width: 100%; - height: 100%; - object-fit: cover; - filter: grayscale(20%) brightness(0.75); - transition: transform 0.6s ease; - min-height: 500px; -} -.v2-split-img-wrap:hover .v2-split-img { transform: scale(1.03); } -.v2-split-img-caption { - position: absolute; - bottom: 24px; - left: 24px; - font-size: 11px; - font-weight: 600; - letter-spacing: 0.12em; - text-transform: uppercase; - color: var(--v2-text); - display: flex; - align-items: center; - gap: 8px; - background: rgba(13,13,13,0.7); - padding: 8px 14px; - border-radius: 4px; -} -.v2-split-text { - background: var(--v2-surface); - padding: 80px 64px; - display: flex; - flex-direction: column; - justify-content: center; -} -@media (max-width: 768px) { .v2-split-text { padding: 48px 32px; } } -.v2-split-title { - font-family: var(--v2-serif); - font-size: clamp(32px, 3.5vw, 52px); - font-weight: 900; - color: var(--v2-text); - line-height: 1.1; - letter-spacing: -1px; - margin: 0 0 24px; -} -.v2-split-title em { font-style: italic; color: var(--v2-accent2); } -.v2-split-desc { - font-size: 16px; - color: var(--v2-muted); - line-height: 1.8; - margin: 0 0 32px; - max-width: 440px; -} -.v2-split-pills { - display: flex; - flex-wrap: wrap; - gap: 8px; -} -.v2-pill-dark { - font-size: 11px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--v2-muted); - border: 1px solid var(--v2-border); - padding: 6px 14px; - border-radius: 3px; - transition: border-color 0.2s, color 0.2s; -} -.v2-pill-dark:hover { border-color: var(--v2-accent); color: var(--v2-accent); } - -/* ── Why ── */ -.v2-why-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1px; - background: var(--v2-border); - border: 1px solid var(--v2-border); -} -@media (max-width: 640px) { .v2-why-grid { grid-template-columns: 1fr; } } -.v2-why-item { - background: var(--v2-surface); - padding: 48px 40px; - transition: background 0.3s; -} -.v2-why-item:hover { background: #1f1f1f; } -.v2-why-num { - display: block; - font-family: var(--v2-mono); - font-size: 11px; - color: var(--v2-accent); - letter-spacing: 0.1em; - margin-bottom: 20px; -} -.v2-why-title { - font-family: var(--v2-serif); - font-size: 22px; - font-weight: 700; - color: var(--v2-text); - margin: 0 0 12px; - letter-spacing: -0.3px; -} -.v2-why-desc { - font-size: 15px; - color: var(--v2-muted); - line-height: 1.7; - margin: 0; -} - -/* ── Features ── */ -.v2-features-top { - display: flex; - align-items: flex-end; - justify-content: space-between; - gap: 32px; - margin-bottom: 64px; - flex-wrap: wrap; -} -.v2-features-grid { - display: flex; - flex-wrap: wrap; - gap: 8px; - margin-bottom: 64px; -} -.v2-feature-chip { - display: flex; - align-items: center; - gap: 10px; - border: 1px solid var(--v2-border); - padding: 12px 20px; - border-radius: 4px; - font-size: 13px; - font-weight: 500; - color: var(--v2-muted); - transition: border-color 0.2s, color 0.2s, background 0.2s; - cursor: default; -} -.v2-feature-chip:hover { - border-color: var(--v2-accent); - color: var(--v2-text); - background: rgba(200,240,96,0.04); -} -.v2-feature-icon { font-size: 16px; } -.v2-feature-label { letter-spacing: 0.02em; } -.v2-features-img-row { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 2px; - height: 280px; - overflow: hidden; - border-radius: 8px; -} -@media (max-width: 640px) { - .v2-features-img-row { grid-template-columns: 1fr; height: auto; } -} -.v2-features-img { - width: 100%; - height: 100%; - object-fit: cover; - filter: grayscale(30%) brightness(0.65); - transition: filter 0.4s, transform 0.4s; -} -.v2-features-img:hover { - filter: grayscale(0%) brightness(0.85); - transform: scale(1.03); -} - -/* ── Footer ── */ -.v2-footer { - background: var(--v2-surface); - border-top: 1px solid var(--v2-border); - padding: 48px 32px; -} -.v2-footer-inner { - max-width: 1280px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - gap: 32px; - flex-wrap: wrap; -} -.v2-footer-wordmark { - font-family: var(--v2-serif); - font-size: 24px; - font-weight: 700; - color: var(--v2-text); - display: block; - margin-bottom: 8px; -} -.v2-footer-wordmark em { font-style: italic; color: var(--v2-accent); } -.v2-footer-sub { - font-size: 12px; - color: var(--v2-muted); - margin: 0; - letter-spacing: 0.02em; -} -.v2-footer-right { - display: flex; - align-items: center; - gap: 24px; -} -.v2-footer-link { - font-size: 12px; - font-weight: 600; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--v2-muted); - text-decoration: none; - transition: color 0.2s; -} -.v2-footer-link:hover { color: var(--v2-text); } - -/* ═══════════════════════════════════════════════ - POLY PAGES — Lovart-inspired redesign - ═══════════════════════════════════════════════ */ - -/* ── Tokens ── */ -.pp-root { - --pp-bg: #0e0e0e; - --pp-surface: #161616; - --pp-surface2: #1e1e1e; - --pp-border: rgba(255,255,255,0.09); - --pp-text: #f2f0ec; - --pp-muted: #777; - --pp-accent: #f2f0ec; - --pp-green: #6dbe8b; - min-height: 100vh; - background: var(--pp-bg); - color: var(--pp-text); - font-family: var(--font-plus-jakarta), 'Inter', sans-serif; - overflow-x: hidden; -} - -/* ── Animations ── */ -@keyframes pp-marquee { - from { transform: translateX(0); } - to { transform: translateX(-33.333%); } -} - -.pp-in { - opacity: 1 !important; - transform: translateY(0) !important; - transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), - transform 0.75s cubic-bezier(0.16,1,0.3,1) !important; -} - -/* ── Nav ── */ -.pp-nav { - position: fixed; - top: 0; left: 0; right: 0; - z-index: 100; - transition: background 0.3s, border-color 0.3s; - border-bottom: 1px solid transparent; -} -.pp-nav--solid { - background: rgba(14,14,14,0.94); - backdrop-filter: blur(16px); - border-color: var(--pp-border); -} -.pp-nav-inner { - max-width: 1200px; - margin: 0 auto; - padding: 0 32px; - height: 64px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; -} -.pp-nav-brand { - display: flex; - align-items: center; - gap: 10px; -} -.pp-nav-logo { - width: 28px; - height: 28px; - filter: brightness(0) invert(1); - opacity: 0.9; -} -.pp-nav-name { - font-size: 16px; - font-weight: 700; - color: var(--pp-text); - letter-spacing: -0.2px; -} -.pp-nav-links { - display: flex; - gap: 2px; -} -@media (max-width: 768px) { .pp-nav-links { display: none; } } -.pp-nav-link { - background: none; - border: none; - font-size: 14px; - font-weight: 500; - color: var(--pp-muted); - padding: 8px 16px; - border-radius: 8px; - cursor: pointer; - font-family: inherit; - transition: color 0.2s, background 0.2s; -} -.pp-nav-link:hover { color: var(--pp-text); background: rgba(255,255,255,0.05); } -.pp-nav-cta { - font-size: 14px; - font-weight: 600; - color: var(--pp-bg); - background: var(--pp-text); - padding: 9px 22px; - border-radius: 100px; - text-decoration: none; - transition: opacity 0.2s, transform 0.2s; - letter-spacing: -0.1px; -} -.pp-nav-cta:hover { opacity: 0.88; transform: translateY(-1px); } -@media (max-width: 768px) { .pp-nav-cta { display: none; } } - -/* ── Hamburger ── */ -.pp-hamburger { - display: none; - flex-direction: column; - gap: 5px; - background: none; - border: none; - cursor: pointer; - padding: 8px; -} -@media (max-width: 768px) { .pp-hamburger { display: flex; } } -.pp-hamburger span { - display: block; - width: 20px; - height: 1.5px; - background: var(--pp-text); - border-radius: 2px; -} - -/* ── Mobile menu ── */ -.pp-mobile-menu { - background: var(--pp-surface); - border-top: 1px solid var(--pp-border); - padding: 20px 32px 28px; - display: flex; - flex-direction: column; - gap: 2px; -} -.pp-mobile-link { - background: none; - border: none; - font-size: 15px; - font-weight: 500; - color: var(--pp-muted); - padding: 12px 0; - text-align: left; - cursor: pointer; - font-family: inherit; - border-bottom: 1px solid var(--pp-border); -} -.pp-mobile-cta { - margin-top: 16px; - font-size: 15px; - font-weight: 700; - color: var(--pp-text); - text-decoration: none; -} - -/* ── Hero ── */ -.pp-hero { - padding: 140px 32px 80px; - max-width: 1200px; - margin: 0 auto; -} -.pp-hero-inner { - text-align: center; - margin-bottom: 64px; -} -.pp-hero-kicker { - font-size: 11px; - font-weight: 600; - letter-spacing: 0.14em; - color: var(--pp-muted); - margin: 0 0 28px; - opacity: 0; - transform: translateY(20px); -} -.pp-hero-title { - font-family: var(--font-playfair), Georgia, serif; - font-size: clamp(48px, 7vw, 88px); - font-weight: 900; - line-height: 1.05; - letter-spacing: -2px; - color: var(--pp-text); - margin: 0 0 40px; - opacity: 0; - transform: translateY(24px); -} -.pp-hero-title-em { - font-style: italic; - color: var(--pp-green); -} -.pp-hero-actions { - opacity: 0; - transform: translateY(20px); -} - -/* ── App frame mockup ── */ -.pp-hero-frame { - border: 1px solid var(--pp-border); - border-radius: 12px; - overflow: hidden; - background: var(--pp-surface); - opacity: 0; - transform: translateY(32px); -} -.pp-frame-bar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 16px; - border-bottom: 1px solid var(--pp-border); - background: var(--pp-surface2); -} -.pp-frame-title { - font-size: 12px; - font-weight: 600; - color: var(--pp-muted); - letter-spacing: 0.02em; -} -.pp-frame-dims { - font-size: 11px; - color: rgba(255,255,255,0.25); - font-family: 'JetBrains Mono', monospace; -} -.pp-frame-body { - display: flex; - height: 340px; -} -@media (max-width: 640px) { .pp-frame-body { height: 260px; } } -.pp-frame-sidebar { - width: 80px; - border-right: 1px solid var(--pp-border); - padding: 16px 8px; - display: flex; - flex-direction: column; - gap: 4px; - flex-shrink: 0; -} -@media (max-width: 480px) { .pp-frame-sidebar { display: none; } } -.pp-frame-sidebar-item { - font-size: 11px; - font-weight: 600; - color: var(--pp-muted); - padding: 8px 10px; - border-radius: 6px; - cursor: default; - letter-spacing: 0.04em; - transition: background 0.2s, color 0.2s; -} -.pp-frame-sidebar-item--active { - background: rgba(109,190,139,0.12); - color: var(--pp-green); -} -.pp-frame-main { - flex: 1; - padding: 16px; - overflow: hidden; - display: flex; - flex-direction: column; - gap: 12px; -} -.pp-frame-search { - font-size: 12px; - color: rgba(255,255,255,0.25); - background: var(--pp-surface2); - border: 1px solid var(--pp-border); - border-radius: 8px; - padding: 10px 14px; -} -.pp-frame-cards { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 8px; - flex: 1; - overflow: hidden; -} -@media (max-width: 480px) { .pp-frame-cards { grid-template-columns: 1fr; } } -.pp-frame-card { - background: var(--pp-surface2); - border: 1px solid var(--pp-border); - border-radius: 8px; - padding: 14px; - transition: border-color 0.2s; -} -.pp-frame-card:hover { border-color: rgba(109,190,139,0.3); } -.pp-frame-card-code { - font-size: 12px; - font-weight: 700; - color: var(--pp-green); - margin-bottom: 4px; - letter-spacing: 0.02em; -} -.pp-frame-card-name { - font-size: 13px; - font-weight: 600; - color: var(--pp-text); - margin-bottom: 6px; - line-height: 1.3; -} -.pp-frame-card-meta { - font-size: 11px; - color: var(--pp-muted); -} - -/* ── Buttons ── */ -.pp-btn-pill { - display: inline-flex; - align-items: center; - gap: 8px; - background: var(--pp-text); - color: var(--pp-bg); - font-size: 14px; - font-weight: 700; - padding: 13px 32px; - border-radius: 100px; - text-decoration: none; - border: none; - cursor: pointer; - font-family: inherit; - letter-spacing: -0.1px; - transition: opacity 0.2s, transform 0.2s; -} -.pp-btn-pill:hover { opacity: 0.88; transform: translateY(-2px); } -.pp-btn-pill--dark { - background: var(--pp-text); - color: var(--pp-bg); -} -.pp-btn-outline { - display: inline-flex; - align-items: center; - font-size: 13px; - font-weight: 600; - color: var(--pp-text); - border: 1px solid var(--pp-border); - padding: 10px 22px; - border-radius: 100px; - text-decoration: none; - transition: border-color 0.2s, background 0.2s; - letter-spacing: 0.01em; -} -.pp-btn-outline:hover { - border-color: rgba(255,255,255,0.3); - background: rgba(255,255,255,0.04); -} - -/* ── Marquee ── */ -.pp-marquee { - overflow: hidden; - border-top: 1px solid var(--pp-border); - border-bottom: 1px solid var(--pp-border); - padding: 14px 0; - background: var(--pp-surface); -} -.pp-marquee-track { - display: flex; - width: max-content; - animation: pp-marquee 28s linear infinite; -} -.pp-marquee-item { - font-size: 11px; - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--pp-muted); - padding: 0 24px; - white-space: nowrap; - display: flex; - align-items: center; - gap: 24px; -} -.pp-marquee-sep { color: var(--pp-green); } - -/* ── Sections ── */ -.pp-section { - padding: 100px 32px; -} -.pp-section--alt { - background: var(--pp-surface); -} -.pp-section-inner { - max-width: 1200px; - margin: 0 auto; -} -.pp-label { - font-size: 11px; - font-weight: 600; - letter-spacing: 0.14em; - text-transform: uppercase; - color: var(--pp-muted); - margin: 0 0 20px; - opacity: 0; - transform: translateY(16px); -} -.pp-label--light { color: var(--pp-text); } -.pp-section-title { - font-family: var(--font-playfair), Georgia, serif; - font-size: clamp(36px, 4vw, 58px); - font-weight: 900; - line-height: 1.1; - letter-spacing: -1.5px; - color: var(--pp-text); - margin: 0 0 20px; - opacity: 0; - transform: translateY(20px); -} -.pp-section-sub { - font-size: 16px; - color: var(--pp-muted); - line-height: 1.7; - max-width: 480px; - margin: 0 0 64px; - opacity: 0; - transform: translateY(16px); -} - -/* ── Steps ── */ -.pp-steps { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1px; - background: var(--pp-border); - border: 1px solid var(--pp-border); - border-radius: 12px; - overflow: hidden; -} -@media (max-width: 768px) { .pp-steps { grid-template-columns: 1fr; } } -.pp-step { - background: var(--pp-bg); - padding: 48px 40px; - opacity: 0; - transform: translateY(24px); - transition: background 0.3s; -} -.pp-step:hover { background: var(--pp-surface); } -.pp-step-n { - display: block; - font-size: 11px; - font-weight: 700; - letter-spacing: 0.1em; - color: var(--pp-green); - margin-bottom: 20px; -} -.pp-step-divider { - width: 24px; - height: 1px; - background: var(--pp-border); - margin-bottom: 20px; -} -.pp-step-title { - font-size: 18px; - font-weight: 700; - color: var(--pp-text); - margin: 0 0 12px; - letter-spacing: -0.3px; -} -.pp-step-desc { - font-size: 14px; - color: var(--pp-muted); - line-height: 1.7; - margin: 0; -} - -/* ── Feature rows ── */ -.pp-features-list { - max-width: 1200px; - margin: 0 auto; - padding: 0 32px; -} -.pp-feature-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 80px; - align-items: center; - padding: 80px 0; - border-bottom: 1px solid var(--pp-border); -} -.pp-feature-row:last-child { border-bottom: none; } -.pp-feature-row--flip .pp-feature-text { order: 2; } -.pp-feature-row--flip .pp-feature-img { order: 1; } -@media (max-width: 768px) { - .pp-feature-row { grid-template-columns: 1fr; gap: 40px; } - .pp-feature-row--flip .pp-feature-text { order: 1; } - .pp-feature-row--flip .pp-feature-img { order: 2; } -} -.pp-feature-text { - opacity: 0; - transform: translateY(24px); -} -.pp-feature-img { - opacity: 0; - transform: translateY(24px); -} -.pp-feature-title { - font-family: var(--font-playfair), Georgia, serif; - font-size: clamp(28px, 3vw, 42px); - font-weight: 900; - color: var(--pp-text); - line-height: 1.15; - letter-spacing: -1px; - margin: 0 0 20px; -} -.pp-feature-desc { - font-size: 15px; - color: var(--pp-muted); - line-height: 1.75; - margin: 0 0 32px; - max-width: 400px; -} - -/* ── Image placeholder ── */ -.pp-img-placeholder { - border: 1px solid var(--pp-border); - border-radius: 10px; - overflow: hidden; - background: var(--pp-surface2); -} -.pp-img-placeholder-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 14px; - border-bottom: 1px solid var(--pp-border); - background: var(--pp-surface); -} -.pp-img-placeholder-icon { - font-size: 11px; - color: var(--pp-muted); - font-weight: 500; -} -.pp-img-placeholder-dims { - font-size: 11px; - color: rgba(255,255,255,0.2); - font-family: 'JetBrains Mono', monospace; -} -.pp-img-placeholder-body { - height: 280px; - display: flex; - align-items: center; - justify-content: center; - background: repeating-linear-gradient( - 45deg, - transparent, - transparent 20px, - rgba(255,255,255,0.015) 20px, - rgba(255,255,255,0.015) 40px - ); -} -.pp-img-placeholder-label { - font-size: 13px; - color: rgba(255,255,255,0.2); - font-weight: 500; - letter-spacing: 0.02em; -} - -/* ── Why grid ── */ -.pp-why-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 1px; - background: var(--pp-border); - border: 1px solid var(--pp-border); - border-radius: 12px; - overflow: hidden; -} -@media (max-width: 640px) { .pp-why-grid { grid-template-columns: 1fr; } } -.pp-why-card { - background: var(--pp-bg); - padding: 44px 40px; - opacity: 0; - transform: translateY(20px); - transition: background 0.3s; -} -.pp-why-card:hover { background: var(--pp-surface); } -.pp-why-n { - display: block; - font-size: 11px; - font-weight: 700; - letter-spacing: 0.1em; - color: var(--pp-green); - margin-bottom: 16px; -} -.pp-why-title { - font-size: 17px; - font-weight: 700; - color: var(--pp-text); - margin: 0 0 10px; - letter-spacing: -0.2px; -} -.pp-why-desc { - font-size: 14px; - color: var(--pp-muted); - line-height: 1.7; - margin: 0; -} - -/* ── CTA section ── */ -.pp-cta-section { - padding: 120px 32px; - background: var(--pp-surface); - border-top: 1px solid var(--pp-border); - text-align: center; -} -.pp-cta-inner { - max-width: 640px; - margin: 0 auto; - opacity: 0; - transform: translateY(24px); -} -.pp-cta-title { - font-family: var(--font-playfair), Georgia, serif; - font-size: clamp(40px, 5vw, 72px); - font-weight: 900; - line-height: 1.1; - letter-spacing: -2px; - color: var(--pp-text); - margin: 0 0 20px; -} -.pp-cta-title em { font-style: italic; color: var(--pp-green); } -.pp-cta-sub { - font-size: 16px; - color: var(--pp-muted); - line-height: 1.7; - margin: 0 0 40px; -} - -/* ── Footer ── */ -.pp-footer { - background: var(--pp-bg); - border-top: 1px solid var(--pp-border); - padding: 40px 32px; -} -.pp-footer-inner { - max-width: 1200px; - margin: 0 auto; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - flex-wrap: wrap; -} -.pp-footer-brand { - font-size: 16px; - font-weight: 700; - color: var(--pp-text); - display: block; - margin-bottom: 6px; -} -.pp-footer-sub { - font-size: 12px; - color: var(--pp-muted); - margin: 0; -} -.pp-footer-link { - font-size: 12px; - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--pp-muted); - text-decoration: none; - transition: color 0.2s; -} -.pp-footer-link:hover { color: var(--pp-text); } diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx deleted file mode 100644 index fe61619..0000000 --- a/frontend/app/page.tsx +++ /dev/null @@ -1,248 +0,0 @@ -"use client"; -/* eslint-disable @next/next/no-img-element */ - -import React, { useEffect, useRef, useState } from "react"; -import Link from "next/link"; -import { useRouter } from "next/navigation"; -import { getSessionWithRecovery, supabase } from "@/lib/supabaseClient"; - -function useInView(threshold = 0.15) { - const ref = useRef(null); - const [visible, setVisible] = useState(false); - useEffect(() => { - const el = ref.current; - if (!el) return; - const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold }); - obs.observe(el); - return () => obs.unobserve(el); - }, [threshold]); - return { ref, visible }; -} - -export default function Home() { - const router = useRouter(); - const [mobileMenuOpen, setMobileMenuOpen] = useState(false); - const [heroVisible, setHeroVisible] = useState(false); - useEffect(() => { const t = setTimeout(() => setHeroVisible(true), 100); return () => clearTimeout(t); }, []); - useEffect(() => { - getSessionWithRecovery(supabase).then(({ session }) => { - if (session) router.replace("/dashboard"); - }); - }, [router]); - - const scrollToSection = (id: string) => { - document.getElementById(id)?.scrollIntoView({ behavior: "smooth" }); - setMobileMenuOpen(false); - }; - - return ( -
- - {/* NAV */} -
-
-
- - Poly Pages - - Poly Pages - Cal Poly SLO -
- - - -
- Sign In / Register -
- - -
- - {mobileMenuOpen && ( -
- {["How It Works", "Why Us", "Features"].map((label) => ( - - ))} - Sign In / Register -
- )} -
- - {/* HERO */} -
-
-
-
- ✦ Cal Poly · Note Sharing Platform -
-

- Share notes.
- Earn credits.
- Learn together. -

-

- A note-sharing platform built for Cal Poly SLO students. Upload your notes, earn credits, and unlock help from students across campus. -

-
- Get Started → - -
-
-
- {["J", "M", "A", "K"].map((l, i) => ( - {l} - ))} -
- Cal Poly students only — verified by @calpoly.edu email -
-
- -
-
- {/* Floating note cards */} -
-
LECTURE NOTES
-
CSC 357 — Systems Programming
-
Score: +12 · 3 credits
-
-
-
STUDY GUIDE
-
MATH 241 — Calculus IV
-
Score: +8 · 3 credits
-
JUST UPLOADED
-
- {/* Phone mockup — always dark */} - App on mobile -
-
-
- -
-
-
- - {/* HOW IT WORKS */} - - - {/* WHY US */} - - - {/* FEATURES */} - - - {/* FOOTER */} -
-
-
-

Poly Pages

-

Independent student project · Not affiliated with Cal Poly administration

-

CodeBox TM

-
- Community Guidelines -
-
-
- ); -} - -function HowItWorksSection() { - const { ref, visible } = useInView(0.15); - const steps = [ - { num: "01", title: "Upload Your Notes", desc: "Share your study materials and lecture notes as PDFs. Every upload goes through a quick review." }, - { num: "02", title: "Earn Credits", desc: "Get credits automatically when your notes are approved. Quality notes earn bonus credits from upvotes." }, - { num: "03", title: "Unlock Materials", desc: "Spend credits to access notes from other students across every department on campus." }, - ]; - return ( -
-
-
✦ How It Works
-

- Three steps to better studying -

-
- {steps.map((s, i) => ( -
- {s.num} -

{s.title}

-

{s.desc}

-
- ))} -
-
-
- ); -} - -function WhySection() { - const { ref, visible } = useInView(0.1); - const items = [ - { emoji: "🔍", title: "Organized & searchable", desc: "Find exactly what you need with smart categorization and search across all subjects and courses." }, - { emoji: "⚖️", title: "Fair credit system", desc: "Contribute to earn, use credits to access. A balanced ecosystem that rewards quality and participation." }, - { emoji: "🎓", title: "Built for students", desc: "Designed with real student needs in mind. Community-driven and focused on collaborative learning." }, - { emoji: "✨", title: "Distraction free", desc: "No clutter, no ads. Just a simple, intuitive platform designed to help you study better." }, - ]; - return ( -
-
-
✦ Why Poly Pages
-

- A calmer way to study with your campus -

-
- {items.map((item, i) => ( -
- {item.emoji} -

{item.title}

-

{item.desc}

-
- ))} -
-
-
- ); -} - -function FeaturesSection() { - const { ref, visible } = useInView(0.2); - return ( -
-
-
✦ Features
-

- Built for campus collaboration -

-

- Join a growing community of students helping each other succeed. Share knowledge, support peers, and achieve more together. -

-
- {["PDF uploads", "Credit system", "Course search", "Professor tags", "Bookmarks", "Leaderboard", "Dark mode", "Mobile friendly"].map((f) => ( - {f} - ))} -
-
- Start sharing notes → -
-
-
- ); -} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4f6722b..a51e480 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@supabase/supabase-js": "^2.83.0", "fuse.js": "^7.0.0", + "lucide-react": "^1.12.0", "next": "16.0.10", "pdf2pic": "^3.2.0", "pdfjs-dist": "4.8.69", @@ -7655,6 +7656,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.12.0.tgz", + "integrity": "sha512-rTKR3RN6HIAxdNZALoPvqxd64vjL9nTThU0JF9q1Qg8yUnmo1r+d8baN72YNVK3RGxUmzBzbd77IWJq/fkm+Xw==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/magic-string": { "version": "0.30.21", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", diff --git a/frontend/package.json b/frontend/package.json index a912bfc..557c270 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "dependencies": { "@supabase/supabase-js": "^2.83.0", "fuse.js": "^7.0.0", + "lucide-react": "^1.12.0", "next": "16.0.10", "pdf2pic": "^3.2.0", "pdfjs-dist": "4.8.69",