@@ -2,6 +2,7 @@ import Link from "next/link"
22import { Button } from "@/components/ui/button"
33import { ArrowRight , BookOpen , GraduationCap } from "lucide-react"
44import { type Tenant } from "@/lib/supabase/tenant"
5+ import { getTranslations } from "next-intl/server"
56
67interface Product {
78 product_id : string
@@ -17,7 +18,8 @@ interface Props {
1718 products : Product [ ]
1819}
1920
20- export function SchoolLandingPage ( { tenant, products } : Props ) {
21+ export async function SchoolLandingPage ( { tenant, products } : Props ) {
22+ const t = await getTranslations ( 'schoolLanding' )
2123 const accentColor = tenant . primary_color || '#3B82F6'
2224
2325 return (
@@ -56,7 +58,7 @@ export function SchoolLandingPage({ tenant, products }: Props) {
5658 </ h1 >
5759
5860 < p className = "text-xl text-zinc-400 max-w-xl leading-relaxed font-medium" >
59- Learn with us. Enroll in courses and grow your skills.
61+ { t ( 'tagline' ) }
6062 </ p >
6163
6264 < div className = "flex flex-wrap gap-4 justify-center pt-2" >
@@ -66,7 +68,7 @@ export function SchoolLandingPage({ tenant, products }: Props) {
6668 className = "h-14 px-10 text-white font-bold rounded-xl text-lg transition-all duration-200 active:scale-95 border-0"
6769 style = { { backgroundColor : accentColor } }
6870 >
69- Join { tenant . name }
71+ { t ( 'join' , { name : tenant . name } ) }
7072 < ArrowRight className = "ml-2 w-5 h-5" aria-hidden = "true" />
7173 </ Button >
7274 </ Link >
@@ -76,7 +78,7 @@ export function SchoolLandingPage({ tenant, products }: Props) {
7678 variant = "outline"
7779 className = "h-14 px-10 bg-zinc-900/50 border-zinc-800 text-zinc-300 hover:text-white hover:bg-zinc-800/80 rounded-xl text-lg backdrop-blur-sm transition-all duration-200"
7880 >
79- Already a member? Log in
81+ { t ( 'alreadyMember' ) }
8082 </ Button >
8183 </ Link >
8284 </ div >
@@ -87,13 +89,13 @@ export function SchoolLandingPage({ tenant, products }: Props) {
8789 { /* ── Courses Grid ─────────────────────────────────────── */ }
8890 < section className = "py-24 relative" aria-label = "Available courses" >
8991 < div className = "container mx-auto px-4 md:px-6" >
90- < h2 className = "text-3xl font-bold text-white text-center mb-12" > Available Courses </ h2 >
92+ < h2 className = "text-3xl font-bold text-white text-center mb-12" > { t ( 'availableCourses' ) } </ h2 >
9193
9294 { products . length === 0 ? (
9395 < div className = "text-center py-20" >
9496 < BookOpen className = "w-12 h-12 text-zinc-700 mx-auto mb-4" aria-hidden = "true" />
95- < p className = "text-zinc-500 text-lg" > Courses coming soon </ p >
96- < p className = "text-zinc-600 text-sm mt-2" > Check back later for new content. </ p >
97+ < p className = "text-zinc-500 text-lg" > { t ( 'coursesComingSoon' ) } </ p >
98+ < p className = "text-zinc-600 text-sm mt-2" > { t ( 'checkBackLater' ) } </ p >
9799 </ div >
98100 ) : (
99101 < div className = "grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto" >
@@ -129,7 +131,7 @@ export function SchoolLandingPage({ tenant, products }: Props) {
129131 < div className = "flex items-center justify-between mt-auto pt-4 border-t border-zinc-800" >
130132 < span className = "text-white font-bold" >
131133 { product . price === 0 || product . price === null
132- ? 'Free'
134+ ? t ( 'free' )
133135 : `${ product . currency ?. toUpperCase ( ) ?? 'USD' } $${ parseFloat ( String ( product . price ) ) . toFixed ( 2 ) } `
134136 }
135137 </ span >
@@ -138,7 +140,7 @@ export function SchoolLandingPage({ tenant, products }: Props) {
138140 className = "text-sm font-semibold flex items-center gap-1 transition-colors duration-200"
139141 style = { { color : accentColor } }
140142 >
141- View < ArrowRight className = "w-3.5 h-3.5" aria-hidden = "true" />
143+ { t ( 'view' ) } < ArrowRight className = "w-3.5 h-3.5" aria-hidden = "true" />
142144 </ Link >
143145 </ div >
144146 </ div >
@@ -165,15 +167,15 @@ export function SchoolLandingPage({ tenant, products }: Props) {
165167 className = "text-3xl md:text-4xl font-black text-white tracking-tight"
166168 style = { { textWrap : "balance" } as React . CSSProperties }
167169 >
168- Ready to start learning at { tenant . name } ?
170+ { t ( 'ctaTitle' , { name : tenant . name } ) }
169171 </ h2 >
170172 < Link href = "/auth/sign-up?next=/join-school" >
171173 < Button
172174 size = "lg"
173175 className = "h-14 px-10 bg-white font-bold rounded-xl text-lg shadow-xl shadow-black/20 active:scale-95 transition-all duration-200 border-0"
174176 style = { { color : accentColor } }
175177 >
176- Join { tenant . name } Now
178+ { t ( 'ctaButton' , { name : tenant . name } ) }
177179 < ArrowRight className = "ml-2 w-5 h-5" aria-hidden = "true" />
178180 </ Button >
179181 </ Link >
0 commit comments