@@ -26,7 +26,7 @@ export default function Home() {
2626 const [ isFormOpen , setIsFormOpen ] = useState ( false ) ;
2727 const [ isIntegrationsOpen , setIsIntegrationsOpen ] = useState ( false ) ;
2828 const [ keyword , setKeyword ] = useState ( "" ) ;
29- const { isScrolled } = useScrollPosition ( 100 ) ;
29+ const { isScrolled } = useScrollPosition ( 80 ) ;
3030
3131 const handleSubmitSuccess = useCallback ( ( ) => {
3232 setIsFormOpen ( false ) ;
@@ -50,78 +50,88 @@ export default function Home() {
5050 visible : isScrolled ,
5151 } }
5252 >
53- < div className = "flex flex-1 flex-col p-4" >
54- { /* Hero Section with Main Search Box */ }
55- < div className = "flex flex-col items-center justify-center py-12" >
56- < div className = "w-full max-w-2xl space-y-8" >
57- < h1 className = "text-center text-4xl font-medium tracking-tight text-foreground" >
58- { t ( "home.title" ) }
59- </ h1 >
60- { /* Main Search Box with fade animation */ }
53+ < div className = "flex min-h-0 flex-1 flex-col" >
54+ < section className = "relative overflow-hidden border-b border-border/70" >
55+ < div
56+ aria-hidden
57+ className = "pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent_58%)]"
58+ />
59+ < div className = "relative mx-auto flex w-full max-w-[1400px] flex-col gap-5 px-4 py-6 sm:px-6 lg:px-8" >
60+ < div className = "flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between" >
61+ < div className = "min-w-0 space-y-1.5" >
62+ < p className = "text-[11px] font-medium uppercase tracking-[0.14em] text-muted-foreground" >
63+ { t ( "sidebar.explore" ) }
64+ </ p >
65+ < h1 className = "text-2xl font-semibold tracking-tight text-foreground sm:text-[1.75rem]" >
66+ { t ( "home.title" ) }
67+ </ h1 >
68+ < p className = "max-w-xl text-sm text-muted-foreground" >
69+ { t ( "home.subtitle" ) }
70+ </ p >
71+ </ div >
72+
73+ < div className = "flex flex-wrap items-center gap-2" >
74+ < Dialog open = { isFormOpen } onOpenChange = { setIsFormOpen } >
75+ < Button
76+ className = "h-9 gap-2 rounded-lg bg-teal-600 px-3.5 text-white hover:bg-teal-500"
77+ onClick = { handleAddRepoClick }
78+ >
79+ < Plus className = "h-4 w-4" />
80+ { t ( "home.addPrivateRepo" ) }
81+ </ Button >
82+ < DialogContent className = "max-h-[85vh] overflow-y-auto sm:max-w-2xl" >
83+ { user && (
84+ < RepositorySubmitForm onSuccess = { handleSubmitSuccess } />
85+ ) }
86+ </ DialogContent >
87+ </ Dialog >
88+ < Button
89+ variant = "outline"
90+ className = "h-9 gap-2 rounded-lg border-border/80 bg-background/60"
91+ >
92+ < Flame className = "h-4 w-4 text-orange-500" />
93+ { t ( "home.exploreTrending" ) }
94+ </ Button >
95+ < Button
96+ variant = "ghost"
97+ className = "h-9 gap-2 rounded-lg text-muted-foreground hover:text-foreground"
98+ onClick = { ( ) => setIsIntegrationsOpen ( true ) }
99+ >
100+ < Puzzle className = "h-4 w-4" />
101+ < span className = "hidden sm:inline" > { t ( "home.mcpIntegrationShort" ) } </ span >
102+ < span className = "sm:hidden" > MCP</ span >
103+ </ Button >
104+ </ div >
105+ </ div >
106+
61107 < div
62108 className = { cn (
63- "relative transition-all duration-250 ease-in -out" ,
109+ "relative max-w-3xl transition-all duration-250 ease-out" ,
64110 isScrolled
65- ? "opacity-0 -translate-y-2 pointer-events-none "
66- : "opacity-100 translate-y-0 pointer-events-auto "
111+ ? "pointer-events-none -translate-y-1 opacity-0 "
112+ : "translate-y-0 opacity-100 "
67113 ) }
68114 >
69- < div className = "absolute left-4 top-1/2 -translate-y-1/2 text-muted-foreground" >
70- < Search className = "h-5 w-5" />
71- </ div >
115+ < Search className = "pointer-events-none absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
72116 < Input
73117 value = { keyword }
74118 onChange = { ( e ) => setKeyword ( e . target . value ) }
75119 placeholder = { t ( "home.searchPlaceholder" ) }
76120 maxLength = { 100 }
77- className = "h-14 rounded-full pl-12 text-lg shadow-sm transition-all hover:shadow-md focus-visible:ring-2 focus-visible:ring-primary/20 bg-secondary/50 border-transparent "
121+ className = "h-11 rounded-xl border-border/70 bg-background/80 pl-10 text-sm shadow-none transition-[border-color,box-shadow] focus-visible:border-teal-500/40 focus-visible:ring-teal-500/15 "
78122 />
79123 </ div >
80-
81- < div className = "flex flex-wrap items-center justify-center gap-3" >
82- < Dialog open = { isFormOpen } onOpenChange = { setIsFormOpen } >
83- < Button
84- variant = "secondary"
85- className = "gap-2 rounded-full h-10 px-6 bg-teal-500/10 text-teal-500 hover:bg-teal-500/20 hover:text-teal-400 border border-teal-500/20"
86- onClick = { handleAddRepoClick }
87- >
88- < Plus className = "h-4 w-4" />
89- { t ( "home.addPrivateRepo" ) }
90- </ Button >
91- < DialogContent className = "sm:max-w-2xl max-h-[85vh] overflow-y-auto" >
92- { user && (
93- < RepositorySubmitForm
94- onSuccess = { handleSubmitSuccess }
95- />
96- ) }
97- </ DialogContent >
98- </ Dialog >
99- < Button variant = "secondary" className = "gap-2 rounded-full h-10 px-6 bg-blue-500/10 text-blue-500 hover:bg-blue-500/20 hover:text-blue-400 border border-blue-500/20" >
100- < Flame className = "h-4 w-4" />
101- { t ( "home.exploreTrending" ) }
102- </ Button >
103- </ div >
104- < div className = "flex justify-center" >
105- < Button
106- variant = "ghost"
107- className = "gap-2 text-muted-foreground hover:text-foreground"
108- onClick = { ( ) => setIsIntegrationsOpen ( true ) }
109- >
110- < Puzzle className = "h-4 w-4" />
111- { t ( "home.mcpIntegration" ) }
112- </ Button >
113- </ div >
114- < IntegrationsDialog
115- open = { isIntegrationsOpen }
116- onOpenChange = { setIsIntegrationsOpen }
117- />
118124 </ div >
119- </ div >
120125
121- { /* Public Repository List Section */ }
122- < div className = "w-full max-w-6xl mx-auto mt-8" >
126+ < IntegrationsDialog
127+ open = { isIntegrationsOpen }
128+ onOpenChange = { setIsIntegrationsOpen }
129+ />
130+ </ section >
131+
132+ < section className = "mx-auto w-full max-w-[1400px] flex-1 px-4 py-5 sm:px-6 lg:px-8" >
123133 < PublicRepositoryList keyword = { keyword } />
124- </ div >
134+ </ section >
125135 </ div >
126136 </ AppLayout >
127137 ) ;
0 commit comments