diff --git a/apps/web/src/app/courses/page.tsx b/apps/web/src/app/courses/page.tsx index 936e580..29b9c01 100644 --- a/apps/web/src/app/courses/page.tsx +++ b/apps/web/src/app/courses/page.tsx @@ -1,4 +1,4 @@ -import { Footer, Header } from '@/components/layout/site'; +import { Footer, Header, PublicPageHero } from '@/components/layout/site'; import { publicApi } from '@/shared/services/api'; import type { Course } from '@/lib/marketplace-data'; import { BookOpen } from 'lucide-react'; @@ -37,13 +37,19 @@ export default async function CoursesPage({ <>
-

{english ? 'Structured learning' : 'یادگیری ساختاریافته'}

-

{english ? 'Language courses' : 'دوره‌های زبان'}

-

- {english - ? 'Follow a clear learning route, informed by ratings from learners who enrolled in each course.' - : 'مسیرهای آموزشی منظم، با امتیازهای واقعی زبان‌آموزانی که در دوره شرکت کرده‌اند.'} -

+ {courses.length ? ( ) : ( diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index 85552a1..e87089f 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -389,6 +389,114 @@ a { border-radius: var(--radius-card); box-shadow: var(--shadow-card); } +.public-page-hero { + position: relative; + display: grid; + min-height: 300px; + align-items: end; + overflow: hidden; + border: 1px solid #e6e6ef; + border-radius: 28px; + background: + radial-gradient(circle at 12% 24%, rgba(109, 79, 240, 0.13), transparent 16rem), + radial-gradient(circle at 88% 80%, rgba(49, 94, 251, 0.09), transparent 18rem), + linear-gradient(145deg, #fff, #f7f7fc); + padding: clamp(1.75rem, 5vw, 4rem); + box-shadow: 0 16px 50px rgba(27, 30, 67, 0.06); + isolation: isolate; +} +.public-page-hero::after { + position: absolute; + z-index: -1; + width: 310px; + height: 310px; + border: 58px solid rgba(109, 79, 240, 0.045); + border-radius: 50%; + content: ''; + inset-inline-end: -80px; + top: -100px; +} +.public-page-hero-copy { + max-width: 820px; +} +.public-page-eyebrow { + display: inline-flex; + align-items: center; + gap: 0.45rem; + border-radius: 999px; + background: var(--primary-soft); + padding: 0.42rem 0.72rem; + color: var(--primary-hover); + font-size: 0.75rem; + font-weight: 800; +} +.public-page-eyebrow::before { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--primary); + content: ''; +} +.public-page-hero h1 { + max-width: 800px; + margin-top: 1.25rem; + font-size: clamp(2.25rem, 5vw, 4.5rem); + font-weight: 850; + letter-spacing: -0.045em; + line-height: 1.28; +} +.public-page-hero p { + max-width: 670px; + margin-top: 1rem; + color: var(--muted); + font-size: clamp(0.95rem, 1.4vw, 1.08rem); + line-height: 2; +} +.public-footer { + position: relative; + overflow: hidden; + border-top: 1px solid var(--line); + background: linear-gradient(180deg, #fff, #f8f8fc); +} +.public-footer-accent { + height: 4px; + background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); + opacity: 0.72; +} +.public-trust-chip { + display: inline-flex; + align-items: center; + gap: 0.35rem; + border: 1px solid var(--line); + border-radius: 999px; + background: #fff; + padding: 0.38rem 0.58rem; +} +.course-product-card, +.teacher-product-card { + border-radius: 20px; + box-shadow: 0 10px 32px rgba(24, 29, 67, 0.06); +} +.course-product-card:hover, +.teacher-product-card:hover { + border-color: #d7d4f4; + box-shadow: 0 22px 52px rgba(31, 34, 76, 0.12); +} +.course-product-card:hover img { + transform: scale(1.045); +} +.teacher-product-card::before { + position: absolute; + height: 4px; + background: linear-gradient(90deg, var(--primary), var(--accent)); + content: ''; + inset: 0 0 auto; + opacity: 0; + transition: opacity 0.2s ease; +} +.teacher-product-card:hover::before { + opacity: 1; +} .floating-card { position: absolute; z-index: 2; @@ -623,6 +731,11 @@ a { max-width: 100%; object-fit: contain; } +.landing-brand-wordmark { + display: inline-flex; + align-items: center; + gap: 0.65rem; +} .landing-brand-mark { display: grid; width: 34px; @@ -1556,6 +1669,631 @@ a { animation-duration: 0.01ms !important; } } + +/* Premium public experience ------------------------------------------------- + * These rules sit after the CMS-compatible landing styles on purpose. The + * builder still controls copy, media and theme values while this layer gives + * every public section one consistent product-led visual system. + */ +.landing-page { + --landing-ink: #11162f; + --landing-muted: #626b7f; + --landing-line: #e8eaf1; + background: + radial-gradient(circle at 10% 4%, color-mix(in srgb, var(--landing-primary) 7%, transparent), transparent 24rem), + var(--landing-background, #fbfbfe); +} +.landing-header { + border-bottom-color: rgba(226, 228, 238, 0.82); + background: color-mix(in srgb, var(--landing-background, #fff) 88%, transparent) !important; + backdrop-filter: blur(18px) saturate(160%); +} +.landing-header-inner { + min-height: 78px; +} +.landing-desktop-nav { + gap: 0.3rem; + padding: 0.35rem; + border: 1px solid rgba(228, 230, 239, 0.8); + border-radius: 999px; + background: rgba(255, 255, 255, 0.76); + box-shadow: 0 8px 28px rgba(30, 33, 67, 0.04); +} +.landing-desktop-nav a { + position: relative; + border-radius: 999px; + padding: 0.48rem 0.85rem; + font-size: 0.82rem; +} +.landing-desktop-nav a:hover, +.landing-desktop-nav a[aria-current='page'] { + background: #f2efff; +} +.landing-header-signup { + min-height: 42px; + border-radius: 999px; + padding-inline: 1.1rem; +} +.landing-hero { + position: relative; + border-bottom: 0; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(250, 250, 254, 0.96)), + radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--landing-primary) 14%, transparent), transparent 28rem); +} +.landing-hero::before { + position: absolute; + inset: 0; + pointer-events: none; + background-image: + linear-gradient(rgba(109, 74, 255, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(109, 74, 255, 0.035) 1px, transparent 1px); + background-size: 42px 42px; + mask-image: linear-gradient(to bottom, black, transparent 72%); + content: ''; +} +.landing-hero-grid { + position: relative; + min-height: 650px; + padding-block: clamp(4rem, 7vw, 6.6rem) 4.25rem; + grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr); +} +.landing-kicker { + border: 1px solid color-mix(in srgb, var(--landing-primary) 18%, transparent); + border-radius: 999px; + background: color-mix(in srgb, var(--landing-primary) 7%, white); + padding: 0.42rem 0.72rem; +} +.landing-kicker::before { + width: 7px; + height: 7px; + border-radius: 999px; + box-shadow: 0 0 0 5px color-mix(in srgb, var(--landing-primary) 10%, transparent); +} +.landing-kicker-light { + border-color: rgba(255, 255, 255, 0.16); + background: rgba(255, 255, 255, 0.08); + color: #ddd7ff; +} +.landing-hero-copy h1 { + margin-top: 1.5rem; + font-size: clamp(2.65rem, 5.2vw, 4.9rem); + font-weight: 850; + line-height: 1.18; +} +.landing-hero-copy p { + max-width: 590px; + margin-top: 1.35rem; + font-size: clamp(1rem, 1.4vw, 1.15rem); + line-height: 2.05; +} +.landing-button { + min-height: 50px; + border-radius: 14px; + padding-inline: 1.35rem; +} +.landing-button-primary { + background: linear-gradient( + 115deg, + var(--landing-button, #6d4aff), + color-mix(in srgb, var(--landing-button, #6d4aff) 78%, #312e81) + ); + box-shadow: 0 14px 32px color-mix(in srgb, var(--landing-button, #6d4aff) 24%, transparent); +} +.landing-button-quiet { + border-color: #dfe1e9; + box-shadow: 0 7px 20px rgba(30, 33, 67, 0.04); +} +.landing-trust-row { + margin-top: 1.55rem; + gap: 0.75rem 1rem; + font-size: 0.76rem; +} +.landing-trust-row span { + border-radius: 999px; + background: rgba(255, 255, 255, 0.72); + padding: 0.4rem 0.55rem; +} +.landing-hero-visual { + min-height: 520px; +} +.landing-hero-image { + inset: 0 1rem 1.2rem 0; + border: 8px solid rgba(255, 255, 255, 0.8); + border-radius: 42px; + box-shadow: 0 35px 90px rgba(36, 27, 81, 0.18); +} +.landing-hero-image::after { + position: absolute; + inset: 0; + background: linear-gradient(180deg, transparent 55%, rgba(15, 12, 40, 0.14)); + content: ''; +} +.landing-hero-note { + border-color: rgba(255, 255, 255, 0.8); + border-radius: 18px; + padding: 0.9rem 1rem; + box-shadow: 0 20px 48px rgba(36, 28, 83, 0.14); +} +.landing-hero-note-top { + right: -1.4rem; +} +.landing-hero-note-bottom { + right: 1.5rem; + bottom: -0.4rem; +} +.landing-proof-strip { + position: relative; + z-index: 2; + display: grid; + margin-bottom: -2.4rem; + border: 1px solid rgba(225, 225, 238, 0.9); + border-radius: 22px; + background: rgba(255, 255, 255, 0.9); + box-shadow: 0 24px 60px rgba(31, 27, 72, 0.09); + backdrop-filter: blur(18px); + grid-template-columns: repeat(4, minmax(0, 1fr)); +} +.landing-proof-strip > div { + display: flex; + min-height: 96px; + align-items: center; + gap: 0.75rem; + border-inline-end: 1px solid var(--landing-line); + padding: 1.2rem 1.4rem; +} +.landing-proof-strip > div:last-child { + border-inline-end: 0; +} +.landing-proof-strip strong { + color: var(--landing-primary); + font-size: 1.15rem; + font-weight: 850; + white-space: nowrap; +} +.landing-proof-strip span { + color: var(--landing-muted); + font-size: 0.78rem; + font-weight: 700; + line-height: 1.6; +} +.landing-section { + padding-block: clamp(5.5rem, 9vw, 8.5rem); +} +.landing-section-tint { + background: linear-gradient(180deg, #f5f4fb, #f8f8fc); +} +.landing-section-intro h2 { + margin-top: 1.2rem; + font-size: clamp(2rem, 3.8vw, 3.35rem); + font-weight: 850; + line-height: 1.28; +} +.landing-language-grid, +.landing-course-grid, +.landing-blog-grid { + gap: 1.25rem; + margin-top: 3.25rem; +} +.landing-language-card, +.landing-course-card, +.landing-blog-card { + border-color: var(--landing-line); + box-shadow: 0 10px 35px rgba(32, 34, 70, 0.06); +} +.landing-language-card:hover, +.landing-course-card:hover, +.landing-blog-card:hover { + transform: translateY(-7px); + border-color: color-mix(in srgb, var(--landing-primary) 30%, #e5e7eb); + box-shadow: 0 24px 55px rgba(49, 41, 104, 0.12); +} +.landing-language-image { + height: 220px; +} +.landing-language-image img { + opacity: 0.94; + mix-blend-mode: normal; + transition: transform 0.65s ease; +} +.landing-language-card:hover .landing-language-image img { + transform: scale(1.045); +} +.landing-language-body { + display: flex; + flex: 1; + flex-direction: column; + padding: 1.45rem; +} +.landing-card-heading, +.landing-course-topline { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; +} +.landing-language-native { + border: 1px solid #e7e8ef; + border-radius: 999px; + padding: 0.3rem 0.5rem; + color: #767e90; + font-size: 0.67rem; +} +.landing-language-path { + display: grid; + gap: 0.35rem; + margin-top: 1.1rem; + grid-template-columns: 0.75fr 1fr 0.58fr; +} +.landing-language-path span { + height: 5px; + border-radius: 999px; + background: color-mix(in srgb, var(--landing-primary) 18%, #ececf3); +} +.landing-language-path span:first-child { + background: var(--landing-primary); +} +.landing-language-meta { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 0.85rem; + margin-top: 0.9rem; + color: var(--landing-muted); + font-size: 0.68rem; + font-weight: 700; +} +.landing-language-meta span, +.landing-course-topline > span:last-child { + display: inline-flex; + align-items: center; + gap: 0.3rem; +} +.landing-language-body .landing-inline-link { + margin-top: auto; + padding-top: 1.25rem; +} +.landing-benefit-grid { + gap: 1rem; + border-top: 0; + grid-template-columns: repeat(6, minmax(0, 1fr)); +} +.landing-benefit-item { + min-height: 250px; + border: 1px solid #e7e7f0; + border-radius: 22px; + background: rgba(255, 255, 255, 0.72); + padding: 1.5rem !important; + grid-column: span 2; +} +.landing-benefit-item:nth-child(4), +.landing-benefit-item:nth-child(5) { + grid-column: span 3; +} +.landing-benefit-featured { + background: linear-gradient(145deg, #20184c, #3b2f7e); + color: #fff; +} +.landing-benefit-featured p, +.landing-benefit-featured .landing-overline { + color: rgba(255, 255, 255, 0.66); +} +.landing-benefit-featured .landing-benefit-icon { + background: rgba(255, 255, 255, 0.13); + color: #fff; +} +.landing-benefit-icon { + width: 48px; + height: 48px; + border-radius: 15px; +} +.landing-learning-story { + display: grid; + align-items: center; + gap: clamp(2rem, 7vw, 7rem); + margin-top: 1.25rem; + border: 1px solid #e5e4ef; + border-radius: 28px; + background: #fff; + padding: clamp(1.5rem, 4vw, 3.5rem); + box-shadow: 0 18px 50px rgba(35, 34, 70, 0.06); + grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); +} +.landing-story-copy h3, +.landing-trust-panel-copy h3 { + margin-top: 1.2rem; + font-size: clamp(1.7rem, 3vw, 2.75rem); + font-weight: 850; + line-height: 1.35; +} +.landing-story-copy p, +.landing-trust-panel-copy p { + margin-top: 1rem; + color: var(--landing-muted); + font-size: 0.9rem; + line-height: 2; +} +.landing-journey-steps { + display: grid; + gap: 0.75rem; +} +.landing-journey-steps li { + display: flex; + align-items: center; + gap: 1rem; + border: 1px solid #e8e7ef; + border-radius: 16px; + background: #fbfbfe; + padding: 1rem; +} +.landing-journey-steps > li > span { + display: grid; + width: 42px; + height: 42px; + flex: 0 0 auto; + place-items: center; + border-radius: 13px; + background: #ebe7ff; + color: var(--landing-primary); + font-family: 'Inter Variable', Inter, sans-serif; + font-size: 0.72rem; + font-weight: 850; +} +.landing-journey-steps strong, +.landing-journey-steps small { + display: block; +} +.landing-journey-steps strong { + font-size: 0.86rem; +} +.landing-journey-steps small { + margin-top: 0.15rem; + color: var(--landing-muted); + font-size: 0.72rem; +} +.landing-placement { + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 30px 75px rgba(25, 18, 64, 0.22); +} +.landing-course-topline > span:last-child { + color: #636b7e; + font-size: 0.7rem; + font-weight: 700; +} +.landing-course-content { + padding: 1.35rem; +} +.landing-course-cta { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + margin-top: 1rem; + border-top: 1px solid #ececf2; + padding-top: 0.9rem; + color: var(--landing-primary); + font-size: 0.74rem; + font-weight: 800; +} +.landing-trust-panel { + display: grid; + align-items: center; + gap: clamp(2rem, 7vw, 7rem); + margin-top: clamp(4rem, 8vw, 7rem); + border-radius: 30px; + background: linear-gradient(145deg, #17143a, #2d235e 62%, #44358a); + padding: clamp(1.5rem, 5vw, 4.5rem); + color: #fff; + grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr); +} +.landing-trust-panel .landing-kicker { + border-color: rgba(255, 255, 255, 0.14); + background: rgba(255, 255, 255, 0.08); + color: #d8d1ff; +} +.landing-trust-panel-copy p { + color: rgba(255, 255, 255, 0.68); +} +.landing-trust-panel-copy .landing-button { + margin-top: 1.5rem; + background: #fff; + color: #2d235e; + box-shadow: none; +} +.landing-trust-checks { + display: flex; + flex-wrap: wrap; + gap: 0.6rem; + margin-top: 1.2rem; +} +.landing-trust-checks span { + display: inline-flex; + align-items: center; + gap: 0.4rem; + border-radius: 999px; + background: rgba(255, 255, 255, 0.08); + padding: 0.45rem 0.65rem; + color: rgba(255, 255, 255, 0.78); + font-size: 0.7rem; + font-weight: 700; +} +.landing-teacher-stack { + display: grid; + gap: 0.75rem; +} +.landing-teacher-stack article, +.landing-teacher-result { + display: flex; + align-items: center; + gap: 1rem; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 18px; + background: rgba(255, 255, 255, 0.09); + padding: 1rem; + backdrop-filter: blur(12px); +} +.landing-teacher-stack article:nth-child(2) { + margin-inline-start: 2.5rem; +} +.landing-teacher-avatar { + display: grid; + width: 58px; + height: 58px; + flex: 0 0 auto; + place-items: center; + border-radius: 18px; + background: linear-gradient(145deg, #d9d3ff, #fff); + color: #332775; + font-family: 'Inter Variable', Inter, sans-serif; + font-size: 0.8rem; + font-weight: 900; +} +.landing-teacher-avatar-alt { + background: linear-gradient(145deg, #d7f7ec, #fff); + color: #17664e; +} +.landing-teacher-stack article span, +.landing-teacher-stack article strong, +.landing-teacher-stack article small, +.landing-teacher-result span, +.landing-teacher-result strong { + display: flex; + align-items: center; + gap: 0.3rem; +} +.landing-teacher-stack article span { + color: #bfb6ff; + font-size: 0.65rem; + font-weight: 800; +} +.landing-teacher-stack article strong, +.landing-teacher-result strong { + margin-top: 0.2rem; + font-size: 0.9rem; +} +.landing-teacher-stack article small, +.landing-teacher-result span { + margin-top: 0.15rem; + color: rgba(255, 255, 255, 0.6); + font-size: 0.68rem; +} +.landing-teacher-result { + margin-inline-end: 2.5rem; + color: #d9d2ff; +} +.landing-faq-list details { + border: 1px solid #e7e7ef; + border-radius: 16px; + background: #fff; + padding: 0; +} +.landing-faq-list { + display: grid; + gap: 0.65rem; + border-top: 0; +} +.landing-faq-list summary { + min-height: 64px; + padding: 1rem 1.2rem; +} +.landing-faq-list p { + margin: 0; + border-top: 1px solid #eeeef4; + padding: 1rem 1.2rem 1.2rem; +} +.landing-final-cta { + position: relative; + isolation: isolate; + box-shadow: 0 28px 65px color-mix(in srgb, var(--landing-primary) 22%, transparent); +} +.landing-final-cta::after { + position: absolute; + z-index: -1; + width: 340px; + height: 340px; + border: 70px solid rgba(255, 255, 255, 0.08); + border-radius: 50%; + content: ''; + inset-inline-end: -100px; +} +.landing-footer-grid { + padding-block: 4.5rem; +} + +@media (max-width: 1023px) { + .landing-hero-grid { + grid-template-columns: minmax(0, 1fr); + } + .landing-proof-strip { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .landing-proof-strip > div:nth-child(2) { + border-inline-end: 0; + } + .landing-proof-strip > div:nth-child(-n + 2) { + border-bottom: 1px solid var(--landing-line); + } + .landing-benefit-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .landing-benefit-item, + .landing-benefit-item:nth-child(4), + .landing-benefit-item:nth-child(5) { + border: 1px solid #e7e7f0; + grid-column: auto; + } + .landing-benefit-featured { + grid-column: span 2; + } + .landing-learning-story, + .landing-trust-panel { + grid-template-columns: minmax(0, 1fr); + } +} +@media (max-width: 640px) { + .landing-header-inner { + min-height: 68px; + } + .landing-hero-grid { + padding-block: 3.25rem 3rem; + } + .landing-hero-copy h1 { + font-size: clamp(2.35rem, 12vw, 3.4rem); + } + .landing-hero-visual { + min-height: 350px; + } + .landing-proof-strip { + margin-bottom: -1.5rem; + } + .landing-proof-strip > div { + min-height: 82px; + gap: 0.55rem; + padding: 0.9rem; + } + .landing-proof-strip strong { + font-size: 0.92rem; + } + .landing-proof-strip span { + font-size: 0.67rem; + } + .landing-benefit-grid { + grid-template-columns: minmax(0, 1fr); + } + .landing-benefit-featured { + grid-column: auto; + } + .landing-learning-story { + padding: 1.25rem; + } + .landing-trust-panel { + border-radius: 24px; + padding: 1.4rem; + } + .landing-teacher-stack article:nth-child(2), + .landing-teacher-result { + margin-inline: 0; + } +} .review-dialog { width: min(92vw, 560px); max-height: 88vh; @@ -1673,9 +2411,7 @@ a { overflow: hidden; border: 1px solid #e3e0fa; border-radius: 28px; - background: - linear-gradient(140deg, rgba(243, 241, 255, 0.96), rgba(255, 255, 255, 0.94)), - #fff; + background: linear-gradient(140deg, rgba(243, 241, 255, 0.96), rgba(255, 255, 255, 0.94)), #fff; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 26px 65px rgba(70, 57, 167, 0.12); } @@ -1931,9 +2667,7 @@ a { } .placement-test-page { min-height: calc(100vh - 76px); - background: - radial-gradient(circle at 88% 3%, rgba(118, 84, 246, 0.08), transparent 24%), - #fafaff; + background: radial-gradient(circle at 88% 3%, rgba(118, 84, 246, 0.08), transparent 24%), #fafaff; padding-block: 1.25rem 4.5rem; } .placement-test-shell { @@ -3153,7 +3887,9 @@ html[dir='ltr'] .blog-aside-back svg { padding-inline: 1.1rem 0.6rem; color: var(--subtle); box-shadow: var(--shadow-card); - transition: border-color 0.2s ease, box-shadow 0.2s ease; + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; } .blog-search:focus-within { border-color: var(--primary); diff --git a/apps/web/src/app/languages/page.tsx b/apps/web/src/app/languages/page.tsx index 898af90..36efeb9 100644 --- a/apps/web/src/app/languages/page.tsx +++ b/apps/web/src/app/languages/page.tsx @@ -1,4 +1,4 @@ -import { Footer, Header } from '@/components/layout/site'; +import { Footer, Header, PublicPageHero } from '@/components/layout/site'; import { publicApi } from '@/shared/services/api'; import type { EducationalLanguage } from '@/features/languages'; import { LanguageDiscoveryCard } from '@/features/languages/components/language-discovery-card'; @@ -31,11 +31,15 @@ export default async function LanguagesPage() { <>
-

چه زبانی می‌خواهید یاد بگیرید؟

-

زبان‌ها

-

- زبان را انتخاب کنید تا دوره‌ها، تعیین سطح و مدرس‌های مرتبط را در یک مسیر روشن ببینید. -

+ {items.length ? (
{items.map((language) => ( diff --git a/apps/web/src/app/teachers/page.tsx b/apps/web/src/app/teachers/page.tsx index 7b19c9f..5c48107 100644 --- a/apps/web/src/app/teachers/page.tsx +++ b/apps/web/src/app/teachers/page.tsx @@ -5,7 +5,7 @@ import { Suspense, useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import { useSearchParams } from 'next/navigation'; import { Search, RotateCcw, SlidersHorizontal } from 'lucide-react'; -import { Header, Footer, Empty } from '@/components/layout/site'; +import { Header, Footer, Empty, PublicPageHero } from '@/components/layout/site'; import { TeacherCard } from '@/features/teacher/components/teacher-card'; import { TeacherLanguageFilter } from '@/features/teacher/components/teacher-language-filter'; import { publicApi, type Paginated } from '@/shared/services/api'; @@ -51,18 +51,23 @@ function DirectoryContent() { return ( <>
-
-

{translate(locale, 'teachersVerifiedTeachers')}

-

- {translate(locale, 'teachersFindATeacherBuiltAroundYourGoal')} -

+
+
{ e.preventDefault(); setSearch(q); setPage(1); }} - className="sticky top-20 z-20 mt-8 grid gap-3 rounded-3xl border hairline bg-white/95 p-4 shadow-soft sm:grid-cols-2 xl:grid-cols-[minmax(220px,1fr)_140px_140px_130px_160px_auto]" + className="sticky top-24 z-20 mt-8 grid gap-3 rounded-3xl border hairline bg-white/95 p-4 shadow-[0_18px_45px_rgba(26,29,65,.10)] backdrop-blur-xl sm:grid-cols-2 xl:grid-cols-[minmax(220px,1fr)_140px_140px_130px_160px_auto]" >