Skip to content

Commit bf88a3d

Browse files
ayeletperesayeletperes
committed
update site design
1 parent c256751 commit bf88a3d

15 files changed

Lines changed: 1565 additions & 463 deletions

File tree

‎app/(default)/docs/layout.tsx‎

Lines changed: 173 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@
22

33
import Link from 'next/link';
44
import { usePathname } from 'next/navigation';
5+
import Image from 'next/image';
6+
import ThemeToggle from '@/components/ui/theme-toggle';
7+
import { useTheme } from '@/components/ui/theme-provider';
8+
import LogoBW from '@/public/images/logo_alignair11bw.svg';
9+
import LogoWB from '@/public/images/logo_alignair11wb.svg';
510

611
export default function DocsLayout({ children }: { children: React.ReactNode }) {
712
const pathname = usePathname();
13+
const context = useTheme();
14+
const theme = context?.theme || 'dark';
815

916
const links = [
1017
{
@@ -72,6 +79,16 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
7279
),
7380
description: 'Get help quickly'
7481
},
82+
{
83+
name: 'Terms & License',
84+
href: '/docs/terms',
85+
icon: (
86+
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
88+
</svg>
89+
),
90+
description: 'Legal information'
91+
},
7592
];
7693

7794
// Utility to check if a section should be expanded
@@ -96,11 +113,76 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
96113
return { parent: 'Documentation', current: null };
97114
};
98115

116+
// Get navigation info for footer
117+
const getNavigationInfo = () => {
118+
const allPages: { name: string; href: string }[] = [];
119+
120+
// Flatten all pages into a single array
121+
links.forEach(link => {
122+
allPages.push({ name: link.name, href: link.href });
123+
if (link.children) {
124+
link.children.forEach(child => {
125+
allPages.push({ name: child.name, href: child.href });
126+
});
127+
}
128+
});
129+
130+
const currentIndex = allPages.findIndex(page => page.href === pathname);
131+
132+
return {
133+
previous: currentIndex > 0 ? allPages[currentIndex - 1] : null,
134+
next: currentIndex < allPages.length - 1 ? allPages[currentIndex + 1] : null,
135+
current: currentIndex >= 0 ? allPages[currentIndex] : null
136+
};
137+
};
138+
99139
const pageInfo = getCurrentPageInfo();
140+
const navigation = getNavigationInfo();
100141

101142
return (
102-
<div className="min-h-screen bg-white dark:bg-black text-gray-900 dark:text-gray-200 flex">
143+
<div className="min-h-screen bg-white dark:bg-black text-gray-900 dark:text-gray-200">
144+
{/* Minimal Docs Toolbar */}
145+
<div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-6 py-3 flex items-center justify-between">
146+
<div className="flex items-center space-x-6">
147+
{/* Logo */}
148+
<Link href="/" className="flex items-center" aria-label="AlignAIR Home">
149+
<Image
150+
src={theme === 'dark' ? LogoBW : LogoWB}
151+
width={120}
152+
height={30}
153+
alt="AlignAIR Logo"
154+
priority
155+
className="transition-opacity"
156+
/>
157+
</Link>
158+
159+
{/* Divider */}
160+
<div className="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
161+
162+
{/* Docs Label */}
163+
<span className="text-sm font-medium text-gray-600 dark:text-gray-400">Documentation</span>
164+
</div>
165+
166+
<div className="flex items-center space-x-4">
167+
{/* Quick nav back to main site */}
168+
<Link
169+
href="/"
170+
className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
171+
>
172+
Home
173+
</Link>
174+
<Link
175+
href="/alignair"
176+
className="text-sm bg-purple-600 hover:bg-purple-700 text-white px-3 py-1.5 rounded-md transition-colors"
177+
>
178+
Try AlignAIR
179+
</Link>
180+
<ThemeToggle />
181+
</div>
182+
</div>
103183

184+
{/* Main docs layout */}
185+
<div className="flex">
104186

105187
{/* Enhanced Sidebar */}
106188
<aside className="w-80 bg-gradient-to-b from-gray-900 via-gray-900 to-black border-r border-gray-800 relative">
@@ -250,7 +332,7 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
250332

251333
{/* Content */}
252334
<div className="flex-1 overflow-y-auto">
253-
<div className="max-w-none">
335+
<div className="max-w-none pb-8">
254336
{children}
255337
</div>
256338
</div>
@@ -261,44 +343,112 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
261343

262344
{/* Previous Page */}
263345
<div className="flex-1">
264-
{/* You could add logic here to determine previous page */}
265-
<Link href="/docs" className="inline-flex items-center text-sm text-gray-400 hover:text-white transition-colors group">
266-
<svg className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
267-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
268-
</svg>
269-
Back to Docs Home
270-
</Link>
346+
{navigation.previous ? (
347+
<Link href={navigation.previous.href} className="inline-flex items-center text-sm text-gray-400 hover:text-white transition-colors group">
348+
<svg className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
349+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
350+
</svg>
351+
<div>
352+
<div className="text-xs text-gray-500">Previous</div>
353+
<div className="font-medium">{navigation.previous.name}</div>
354+
</div>
355+
</Link>
356+
) : (
357+
<Link href="/docs" className="inline-flex items-center text-sm text-gray-400 hover:text-white transition-colors group">
358+
<svg className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
359+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
360+
</svg>
361+
<div>
362+
<div className="text-xs text-gray-500">Back to</div>
363+
<div className="font-medium">Docs Home</div>
364+
</div>
365+
</Link>
366+
)}
271367
</div>
272368

273369
{/* Center - Page Actions */}
274370
<div className="flex items-center space-x-4">
275-
<button className="inline-flex items-center px-3 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white rounded-md text-sm transition-colors">
276-
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
277-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
371+
<a
372+
href="https://github.com/MuteJester/AlignAIR"
373+
target="_blank"
374+
rel="noopener noreferrer"
375+
className="inline-flex items-center px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-300 hover:text-white rounded-md text-sm transition-colors"
376+
>
377+
<svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
378+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
278379
</svg>
279380
Star on GitHub
280-
</button>
281-
<button className="inline-flex items-center px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded-md text-sm transition-colors">
381+
</a>
382+
<a
383+
href="https://github.com/MuteJester/AlignAIR/issues"
384+
target="_blank"
385+
rel="noopener noreferrer"
386+
className="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm transition-colors"
387+
>
282388
<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
283-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
389+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
284390
</svg>
285-
Edit Page
286-
</button>
391+
Report Issue
392+
</a>
287393
</div>
288394

289395
{/* Next Page */}
290396
<div className="flex-1 flex justify-end">
291-
{/* You could add logic here to determine next page */}
292-
<Link href="/docs/installation" className="inline-flex items-center text-sm text-gray-400 hover:text-white transition-colors group">
293-
Get Started
294-
<svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
295-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
296-
</svg>
397+
{navigation.next ? (
398+
<Link href={navigation.next.href} className="inline-flex items-center text-sm text-gray-400 hover:text-white transition-colors group">
399+
<div className="text-right">
400+
<div className="text-xs text-gray-500">Next</div>
401+
<div className="font-medium">{navigation.next.name}</div>
402+
</div>
403+
<svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
404+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
405+
</svg>
406+
</Link>
407+
) : (
408+
<Link href="/alignair" className="inline-flex items-center text-sm text-gray-400 hover:text-white transition-colors group">
409+
<div className="text-right">
410+
<div className="text-xs text-gray-500">Try now</div>
411+
<div className="font-medium">AlignAIR Tool</div>
412+
</div>
413+
<svg className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
414+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
415+
</svg>
416+
</Link>
417+
)}
418+
</div>
419+
</div>
420+
</div>
421+
422+
{/* Legal Footer */}
423+
<div className="bg-black border-t border-gray-800 px-8 py-4">
424+
<div className="flex flex-col md:flex-row justify-between items-center text-xs text-gray-500">
425+
<div className="flex items-center space-x-4 mb-2 md:mb-0">
426+
<span>© 2025 AlignAIR. All rights reserved.</span>
427+
<span className="hidden md:inline">•</span>
428+
<span>Advancing computational biology through AI</span>
429+
</div>
430+
<div className="flex items-center space-x-4">
431+
<Link href="/docs/terms" className="hover:text-gray-300 transition-colors">
432+
Terms
433+
</Link>
434+
<span>•</span>
435+
<Link href="/docs/license" className="hover:text-gray-300 transition-colors">
436+
License
297437
</Link>
438+
<span>•</span>
439+
<a
440+
href="https://github.com/MuteJester/AlignAIR"
441+
target="_blank"
442+
rel="noopener noreferrer"
443+
className="hover:text-gray-300 transition-colors"
444+
>
445+
Open Source
446+
</a>
298447
</div>
299448
</div>
300449
</div>
301450
</main>
451+
</div>
302452
</div>
303453
);
304454
}

0 commit comments

Comments
 (0)