diff --git a/www/src/components/UseCases.astro b/www/src/components/UseCases.astro index 7fc1cb8..c7aec5e 100644 --- a/www/src/components/UseCases.astro +++ b/www/src/components/UseCases.astro @@ -19,7 +19,7 @@ import { useCases } from '@/lib/use-cases';
- {useCases.map((useCase) => ( + {useCases.slice(0, 3).map((useCase) => (
@@ -60,5 +60,15 @@ import { useCases } from '@/lib/use-cases';
))}
+ +
+ + View more use cases + + +
diff --git a/www/src/components/UseCasesList.tsx b/www/src/components/UseCasesList.tsx new file mode 100644 index 0000000..9ca2496 --- /dev/null +++ b/www/src/components/UseCasesList.tsx @@ -0,0 +1,79 @@ + +import { useCases } from '@/lib/use-cases'; +import { ArrowRight } from 'lucide-react'; + +const featured = useCases.slice(0, 3); +const more = useCases.slice(3); + +export function FeaturedUseCases() { + return ( +
+ {featured.map((item) => ( +
+
+ {item.tags.map((tag) => ( + {tag} + ))} +
+

{item.title}

+

{item.summary}

+
+
+

Pain point

+

{item.painPoint}

+
+
+

Outcome

+

{item.outcome}

+
+
+ + View playbook + + +
+ ))} +
+ ); +} + +export function MoreUseCases() { + return ( +
+ {more.map((item) => ( +
+
+ {item.tags.map((tag) => ( + {tag} + ))} +
+ +

{item.title}

+

{item.summary}

+ +
+
+

Pain point

+

{item.painPoint}

+
+
+

Outcome

+

{item.outcome}

+
+
+ + + View playbook + + +
+ ))} +
+ ) +} diff --git a/www/src/layouts/UseCaseIndexLayout.astro b/www/src/layouts/UseCaseIndexLayout.astro new file mode 100644 index 0000000..9a7722c --- /dev/null +++ b/www/src/layouts/UseCaseIndexLayout.astro @@ -0,0 +1,115 @@ +--- +import '../styles/global.css'; +import { Header } from '../components/Header'; +import Footer from '../components/Footer.astro'; + +const { + content: { + title = 'Use Case', + description = 'Explore how Gitea Mirror helps engineering teams stay resilient.', + canonical = 'https://gitea-mirror.com/use-cases', + } +} = Astro.props; +--- + + + + + + {title} · Gitea Mirror + + + + + + +
+
+
+ +
+
+