lumither/nocturne
1
0 Fork 0
mirror of https://github.com/Lumither/nocturne.git synced 2026-10-17 10:26:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(frontend) new tag filter, new landing page

Browse Source
This commit is contained in:
lumither committed 2025-10-13 02:59:21 -04:00
1 parent 314f5780fd
commit 02e7166fcb
18 files changed
+256 -427
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/app/page.tsx
+60 -44
View File
@@ -5,63 +5,79 @@ import { useScreenSizeTrigger } from '@/app/(pages)/public/screenSizeTrigger';
import { Button } from '@nextui-org/react';
import { entries } from '@/app/entries';
import Link from 'next/link';
import BoxesGL from '@/components/BackgroundBoxGL';
import { BoxesCore } from '@/components/BackgroundBox';
import * as motion from 'motion/react-client';
import { cn } from '@/src/utils';
export default function Home() {
const isMobile = useScreenSizeTrigger('sm');
const isSm = useScreenSizeTrigger('sm');
const isXs = useScreenSizeTrigger('xs');
return (
<div className={ 'h-dvh w-full overflow-hidden relative' }>
{/*<BoxesGL />*/ }
<BoxesCore />
<div className={ `min-h-dvh h-min content-center z-20` }>
<p className={ 'text-center text-4xl' }>Atelier Lumiaethor</p>
</div>
<div
// className={ 'absolute bottom-0 w-full h-60 bg-yellow-500 p-12' }
className={ 'absolute bottom-0 w-full h-60 p-12' }
<motion.div
initial={ { opacity: 0 } }
animate={ { opacity: 1 } }
transition={ { ease: 'easeInOut', duration: 0.3, delay: 0.0 } }
>
<div
// className={ 'bg-blue-500 h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
className={ 'h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-2 content-center' }>
<div className={ `min-h-dvh h-min content-center z-20 p-10` }>
<p className={ 'text-center text-4xl' }>Atelier Lumiaethor</p>
<p className={ 'text-center text-gray-700 font-bold dark:text-gray-400' }>In pursuit of absolute
simplicity and ultimate
sophistication</p>
</div>
<div className={ 'w-full flex justify-between' }>
<div className={ 'p-16' }>
test
<div
className={ 'absolute left-1/2 -translate-x-1/2 bottom-0 w-full h-60 p-12 max-w-[1536px] justify-center' }
>
<div
className={ 'h-full w-full rounded-3xl backdrop-blur align-middle grid grid-cols-1 sm:grid-cols-2 content-center' }>
{ !isSm &&
<div className={ 'w-full grid content-center' }>
<div
className={ 'p-2 h-fit brightness-50 lg:brightness-75 lg:p-8 xl:p-16 transition-all' }>
<p>
© 2024-{ new Date().getFullYear() } <Link href={ `/about` }>Lumither Tao</Link>
</p>
<p>Powered by Next.js and Rust, built with passion and love</p>
<p>LMTCloud ecosystem</p>
</div>
</div>
}
<div className={ 'h-full content-center p-4' }>
<ul className={ `grid grid-cols-3 sm:grid-cols-2 justify-items-center sm:justify-items-start w-full` }>
{
entries.map((meta, key) => (
<li key={ key } className={ cn(isXs && 'w-fit', !isXs && 'w-full') }>
<Button
as={ Link }
variant={ `light` }
color={ `default` }
fullWidth
isIconOnly={ isXs }
className={ cn(
'flex justify-center',
isXs && 'w-fit',
!isXs && 'sm:justify-start'
) }
aria-label={ `navbar: ${ meta.display_name }` }
href={ meta.href }
>
{ meta.icon }
{ !isXs && <p className={ `font-bold` }>{ meta.display_name }</p> }
</Button>
</li>
))
}
</ul>
</div>
<div className={ 'w-0.5 h-full bg-neutral-400' }></div>
</div>
<div className={ 'h-full content-center p-4 pr-3' }>
<ul className={ `grid grid-cols-2 w-full` }>
{
entries.map((meta, key) => (
<li key={ key }>
<Button
as={ Link }
variant={ `light` }
color={ `default` }
fullWidth
isIconOnly={ isMobile }
className={ 'flex lg:justify-start w-fit lg:w-full' }
aria-label={ `navbar: ${ meta.display_name }` }
href={ meta.href }
>
{ meta.icon }
<p className={ `font-bold hidden sm:block` }>{ meta.display_name }</p>
</Button>
</li>
))
}
</ul>
</div>
</div>
</div>
</motion.div>
</div>
);
}