Skip to content

Commit

Permalink
enhance: improve use case overview page
Browse files Browse the repository at this point in the history
  • Loading branch information
@rschlaefli
rschlaefli committed Dec 20, 2024
1 parent 43b7c0b commit 59d7719
Showing 1 changed file with 131 additions and 78 deletions.
209 changes: 131 additions & 78 deletions apps/website/src/pages/use-cases/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
import { faArrowRight, faChalkboardTeacher, faGamepad, faChartLine } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Button, H1, H2 } from '@uzh-bf/design-system'
import { useRouter } from 'next/router'
Expand Down Expand Up @@ -41,89 +41,142 @@ function GBLUseCases({ sourceArr }: Props) {
</TitleBackground>

<Content>
<H2>Didactics</H2>
<div className="">
{useCasesDidactics.map(({ frontmatter }: any, ix) => (
<HomeSection key={frontmatter.slug}>
<HomeSection.Content
className={twMerge(ix % 2 === 0 ? 'order-1' : 'order-2')}
title={frontmatter.title}
content={frontmatter.abstract}
>
<Button
className={{ root: 'mt-4' }}
onClick={() => router.push(`/use-cases/${frontmatter.slug}`)}
<div className="space-y-12">
<section>
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50">
<FontAwesomeIcon icon={faChalkboardTeacher} className="h-6 w-6 text-orange-600" />
</div>
<H2 className={{ root: 'mb-0 text-3xl' }}>Didactics</H2>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
{useCasesDidactics.map(({ frontmatter }: any, ix) => (
<div
key={frontmatter.slug}
className="group relative overflow-hidden rounded-lg border border-slate-200 bg-white transition-all hover:border-orange-200 hover:shadow-md"
>
<Button.Icon>
<FontAwesomeIcon icon={faArrowRight} />
</Button.Icon>
<Button.Label>Read more</Button.Label>
</Button>
</HomeSection.Content>
<HomeSection.Hero
className={twMerge('', ix % 2 === 0 ? 'order-2' : 'order-1')}
src={frontmatter.imgSrc}
/>
</HomeSection>
))}
</div>
<div className="relative aspect-video w-full overflow-hidden">
<img
src={frontmatter.imgSrc}
alt={frontmatter.title}
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
/>
<div className="absolute bottom-0 left-0 h-12 w-full bg-gradient-to-t from-white to-transparent" />
</div>
<div className="relative p-6">
<div className="absolute -top-px left-4 right-4 h-px bg-gradient-to-r from-transparent via-orange-200 to-transparent" />
<h3 className="mb-2 text-xl font-bold">{frontmatter.title}</h3>
<p className="mb-4 text-slate-600">{frontmatter.abstract}</p>
<Button
onClick={() => router.push(`/use-cases/${frontmatter.slug}`)}
className={{ root: 'group/button' }}
>
<Button.Label>Read more</Button.Label>
<Button.Icon>
<FontAwesomeIcon
icon={faArrowRight}
className="transition-transform group-hover/button:translate-x-0.5"
/>
</Button.Icon>
</Button>
</div>
</div>
))}
</div>
</section>

<H2>Game Development</H2>
<div className="">
{useCasesDevelopment.map(({ frontmatter }: any, ix) => (
<HomeSection key={frontmatter.slug}>
<HomeSection.Content
className={twMerge(ix % 2 === 0 ? 'order-1' : 'order-2')}
title={frontmatter.title}
content={frontmatter.abstract}
>
<Button
className={{ root: 'mt-4' }}
onClick={() => router.push(`/use-cases/${frontmatter.slug}`)}
<section>
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50">
<FontAwesomeIcon icon={faGamepad} className="h-6 w-6 text-orange-600" />
</div>
<H2 className={{ root: 'mb-0 text-3xl' }}>Game Development</H2>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
{useCasesDevelopment.map(({ frontmatter }: any, ix) => (
<div
key={frontmatter.slug}
className="group relative overflow-hidden rounded-lg border border-slate-200 bg-white transition-all hover:border-orange-200 hover:shadow-md"
>
<Button.Icon>
<FontAwesomeIcon icon={faArrowRight} />
</Button.Icon>
<Button.Label>Read more</Button.Label>
</Button>
</HomeSection.Content>
<HomeSection.Hero
className={twMerge('', ix % 2 === 0 ? 'order-2' : 'order-1')}
src={frontmatter.imgSrc}
/>
</HomeSection>
))}
</div>
<div className="relative aspect-video w-full overflow-hidden">
<img
src={frontmatter.imgSrc}
alt={frontmatter.title}
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
/>
<div className="absolute bottom-0 left-0 h-12 w-full bg-gradient-to-t from-white to-transparent" />
</div>
<div className="relative p-6">
<div className="absolute -top-px left-4 right-4 h-px bg-gradient-to-r from-transparent via-orange-200 to-transparent" />
<h3 className="mb-2 text-xl font-bold">{frontmatter.title}</h3>
<p className="mb-4 text-slate-600">{frontmatter.abstract}</p>
<Button
onClick={() => router.push(`/use-cases/${frontmatter.slug}`)}
className={{ root: 'group/button' }}
>
<Button.Label>Read more</Button.Label>
<Button.Icon>
<FontAwesomeIcon
icon={faArrowRight}
className="transition-transform group-hover/button:translate-x-0.5"
/>
</Button.Icon>
</Button>
</div>
</div>
))}
</div>
</section>

<H2 className={{ root: 'mt-6' }}>Simulations</H2>
<div className="">
{useCasesSimulations.map(({ frontmatter }: any, ix: number) => (
<HomeSection key={frontmatter.slug}>
<HomeSection.Content
className={twMerge(ix % 2 === 0 ? 'order-1' : 'order-2')}
title={frontmatter.title}
content={frontmatter.abstract}
>
<Button
className={{ root: 'mt-4' }}
onClick={() => router.push(`/use-cases/${frontmatter.slug}`)}
<section>
<div className="mb-8">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50">
<FontAwesomeIcon icon={faChartLine} className="h-6 w-6 text-orange-600" />
</div>
<H2 className={{ root: 'mb-0 text-3xl' }}>Simulations</H2>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
{useCasesSimulations.map(({ frontmatter }: any, ix) => (
<div
key={frontmatter.slug}
className="group relative overflow-hidden rounded-lg border border-slate-200 bg-white transition-all hover:border-orange-200 hover:shadow-md"
>
<Button.Icon>
<FontAwesomeIcon icon={faArrowRight} />
</Button.Icon>
<Button.Label>Read more</Button.Label>
</Button>
</HomeSection.Content>
<HomeSection.Hero
className={twMerge(ix % 2 === 0 ? 'order-2' : 'order-1')}
src={frontmatter.imgSrc}
/>
</HomeSection>
))}
<div className="relative aspect-video w-full overflow-hidden">
<img
src={frontmatter.imgSrc}
alt={frontmatter.title}
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
/>
<div className="absolute bottom-0 left-0 h-12 w-full bg-gradient-to-t from-white to-transparent" />
</div>
<div className="relative p-6">
<div className="absolute -top-px left-4 right-4 h-px bg-gradient-to-r from-transparent via-orange-200 to-transparent" />
<h3 className="mb-2 text-xl font-bold">{frontmatter.title}</h3>
<p className="mb-4 text-slate-600">{frontmatter.abstract}</p>
<Button
onClick={() => router.push(`/use-cases/${frontmatter.slug}`)}
className={{ root: 'group/button' }}
>
<Button.Label>Read more</Button.Label>
<Button.Icon>
<FontAwesomeIcon
icon={faArrowRight}
className="transition-transform group-hover/button:translate-x-0.5"
/>
</Button.Icon>
</Button>
</div>
</div>
))}
</div>
</section>
</div>

{/* <H2 className={{ root: 'mt-6' }}>Serious Games</H2>
<div className="">Coming Soon</div> */}
</Content>
</PageWithHeader>
)
Expand Down

0 comments on commit 59d7719

Please sign in to comment.