22
33import ProfilePage from "@/app/profiles/page" ;
44import Link from "next/link" ;
5+ import React from 'react' ; // ← Add this line here
56
67export const dynamic = "force-dynamic" ; // This disables SSG and ISR
78
@@ -14,8 +15,43 @@ export default function HomePage() {
1415 </ main >
1516 )
1617 }
17- const fontStyle = "transition px-6 py-4 text-4xl font-medium xs:text-xs "
18+ const fontStyle = "transition px-5 py-3 text-3xl font-medium xs:text-sm "
1819
20+
21+ React . useEffect ( ( ) => {
22+ const text = "Search." ;
23+ const typewriter = document . getElementById ( "typewriter" ) ;
24+ let i = 0 ;
25+ let timeoutId : any ;
26+ let intervalId ;
27+
28+ // Clear any existing content
29+ if ( typewriter ) {
30+ typewriter . textContent = "" ;
31+ }
32+
33+ function typeWriter ( ) {
34+ if ( i < text . length && typewriter ) {
35+ typewriter . textContent = text . substring ( 0 , i + 1 ) ;
36+ i ++ ;
37+ timeoutId = setTimeout ( typeWriter , 150 ) ;
38+ }
39+ }
40+
41+ // Start typing after delay
42+ intervalId = setTimeout ( ( ) => {
43+ typeWriter ( ) ;
44+ } , 500 ) ;
45+
46+ // Cleanup function - this runs when component unmounts
47+ return ( ) => {
48+ clearTimeout ( timeoutId ) ;
49+ clearTimeout ( intervalId ) ;
50+ if ( typewriter ) {
51+ typewriter . textContent = "Search." ; // Just show the full text
52+ }
53+ } ;
54+ } , [ ] ) ;
1955 return (
2056 < main className = "min-h-screen flex flex-col" >
2157 { /* Header */ }
@@ -33,21 +69,54 @@ export default function HomePage() {
3369 { /*</header>*/ }
3470
3571 { /* Hero Section */ }
36- < section className = "flex flex-col items-center justify-center flex-1 text-center px-4" >
37- < h1 className = "py-4 text-5xl md:text-6xl xs:text-4xl font-extrabold max-w-3xl leading-tight xl:whitespace-nowrap md:whitespace-nowrap " >
38- Don't swipe. Just search.
72+ < section className = "flex flex-col items-center justify-start flex-1 text-center px-4" >
73+ < div className = "h-20" > </ div >
74+ < h1 className = "pt-48 pb-2 text-7xl md:text-8xl xs:text-6xl font-extrabold max-w-4xl leading-tight xl:whitespace-nowrap md:whitespace-nowrap " >
75+ Don't Swipe. < span id = "typewriter" > </ span > < span id = "cursor" className = "animate-pulse" > |</ span >
3976 </ h1 >
4077 { /*<p className="mt-6 text-lg md:text-xl text-gray-400 max-w-2xl">*/ }
4178 { /* {"Tired of swiping? Search what you're looking for!"}*/ }
4279 { /*</p>*/ }
43-
44- < div className = "py-8" >
45- < Link href = "/login" className = { `${ fontStyle } } >
46- Sign In
80+ { /* Spacer */ }
81+ < div className = "h-10" > </ div >
82+ < div className = "py-18" >
83+ < Link href = "/register" className = { `${ fontStyle } } >
84+ Join Compass
85+
4786 </ Link >
48-
87+ { /* Spacer */ }
88+ < div className = "h-52" > </ div >
89+ </ div >
90+ { /* Why Compass Bar */ }
91+ < div className = "w-full bg-gray-50 dark:bg-gray-900 py-16 mt-20" >
92+ < div className = "max-w-6xl mx-auto px-4" >
93+ < div className = "grid md:grid-cols-3 gap-8 text-center" >
94+ < div className = "space-y-2" >
95+ < h3 className = "text-lg font-bold" > Radically Transparent</ h3 >
96+ < p className = "text-gray-600 dark:text-gray-400" >
97+ No algorithms. Every profile searchable.
98+ </ p >
99+ </ div >
100+
101+ < div className = "space-y-2" >
102+ < h3 className = "text-lg font-bold" > Built for Depth</ h3 >
103+ < p className = "text-gray-600 dark:text-gray-400" >
104+ Filter by any keyword and what matters most.
105+ </ p >
106+ </ div >
107+
108+ < div className = "space-y-2" >
109+ < h3 className = "text-lg font-bold" > Community Owned</ h3 >
110+ < p className = "text-gray-600 dark:text-gray-400" >
111+ Free forever. Built by users, for users.
112+ </ p >
113+ </ div >
114+ </ div >
115+ </ div >
49116 </ div >
50- < div className = " w-full py-4" >
117+ { /* Spacer */ }
118+ < div className = "h-20" > </ div >
119+ < div className = " w-full py-18" >
51120 { profilePage ( ) }
52121 </ div >
53122 </ section >
0 commit comments