chore(deps): update devdependencies-non-major

.all-contributorsrc

@@ -1,13 +1,35 @@
 {
-	"projectName": "template-default",
+	"projectName": "baer-gpt-help",
 	"projectOwner": "technologiestiftung",
 	"repoType": "github",
 	"repoHost": "https://github.com",
 	"files": ["README.md"],
 	"imageSize": 64,
 	"commit": true,
 	"commitConvention": "angular",
-	"contributors": [],
+	"contributors": [
+		{
+			"login": "aeschi",
+			"name": "aeschi",
+			"avatar_url": "https://avatars.githubusercontent.com/u/aeschi?v=4",
+			"profile": "https://github.com/aeschi",
+			"contributions": ["code", "design", "a11y"]
+		},
+		{
+			"login": "zainab-tariq",
+			"name": "zainab-tariq",
+			"avatar_url": "https://avatars.githubusercontent.com/u/zainab-tariq?v=4",
+			"profile": "https://github.com/zainab-tariq",
+			"contributions": ["code", "design", "a11y"]
+		},
+		{
+			"login": "raphael-arce",
+			"name": "raphael-arce",
+			"avatar_url": "https://avatars.githubusercontent.com/u/raphael-arce?v=4",
+			"profile": "https://github.com/raphael-arce",
+			"contributions": ["code", "design", "a11y"]
+		}
+	],
 	"contributorsPerLine": 7,
 	"skipCi": true
 }

README.md

@@ -2,65 +2,90 @@
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-# {template-vite-react}
+# BärGPT Help Center
 
-## TODO (after you generated the repo)
+A comprehensive help center and documentation website for [BärGPT](https://github.com/technologiestiftung/baergpt/), the AI assistant for Berlin's public administration. This website provides video tutorials, FAQs, and guides to help users get started with and make the most of BärGPT.
 
-- [ ] Review the content of the README.md and adjust to your liking
-- [ ] Read the README.md till the end and adjust the content licensing,
-      logos, etc (I know you stopped at tbd...)
-- [ ] Adjust the file [.github/CODEOWNERS](./.github/CODEOWNERS)
-- [ ] Adjust the files under [.github/ISSUE_TEMPLATE](./.github/ISSUE_TEMPLATE)
-- [ ] If you need unit, 2e2, a11y tests, or releases, you can enable them in this file: [pipeline.yml](.github/workflows/pipeline.yml)
-- [ ] If you use staging and main branches use this template for [.github/renovate.json](./.github/renovate.json)
+## Features
 
-```json
-{
-	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
-	"extends": ["github>technologiestiftung/renovate-config"],
-	"baseBranches": ["staging"]
-}
-```
+- **Video Tutorials**: Step-by-step video guides for using BärGPT
+- **FAQ Section**: Comprehensive answers to frequently asked questions
+- **Interactive Components**: Accordion sections, video players, and navigation
+- **Cookie Banner**: GDPR-compliant cookie consent management
+- **Analytics Integration**: Matomo analytics for usage tracking
+- **Responsive Design**: Mobile-first design with Tailwind CSS
+- **Accessibility**: Built with accessibility in mind (a11y testing included)
+
+## Tech Stack
 
-- [ ] Do you want to honor all kinds of contributions? Use [all-contributors](https://allcontributors.org/)
+- **Framework**: [React Router v7](https://reactrouter.com/) (with SSR support)
+- **UI Library**: [React 19](https://react.dev/)
+- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/)
+- **Build Tool**: [Vite](https://vitejs.dev/)
+- **State Management**: [Zustand](https://github.com/pmndrs/zustand)
+- **Markdown**: [react-markdown](https://github.com/remarkjs/react-markdown)
+- **Animations**: [react-scroll-parallax](https://github.com/jscottsmith/react-scroll-parallax)
+- **Testing**: Playwright (E2E & A11y), Vitest (Unit)
+
+## Prerequisites
+
+- Node.js (v18 or higher)
+- npm or yarn package manager
+
+## Installation
 
 ```bash
-npx all-contributors-cli check
-npx all-contributors-cli add ff6347 doc
-```
+# Clone the repository
+git clone https://github.com/technologiestiftung/baer-gpt-help.git
 
-You can use it on GitHub just by commenting on PRs and issues:
+# Navigate to the project directory
+cd baer-gpt-help
 
-```plain
-@all-contributors please add @ff6347 for infrastructure, tests and code
+# Install dependencies
+npm install
 ```
 
-- [ ] Add your project description
-- [ ] Get fancy shields at https://shields.io
+## Development
 
-## Prerequisites
+Start the development server:
 
-tbd...
+```bash
+npm run dev
+```
 
-## Installation
+The application will be available at `http://localhost:5173`
 
-tbd...
+### Available Scripts
 
-## Usage or Deployment
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run start` - Start production server
+- `npm run lint` - Lint code with ESLint
+- `npm run prettier` - Format code with Prettier
+- `npm run prettier:ci` - Check code formatting
+- `npm run test:unit` - Run unit tests
+- `npm run test:e2e` - Run end-to-end tests
+- `npm run test:a11y` - Run accessibility tests
 
-tbd...
+## Deployment
 
-## Development
+Build the application for production:
+
+```bash
+npm run build
+```
 
-tbd...
+The built files will be in the `build/` directory. The application can be deployed to any Node.js hosting platform.
 
-## Tests
+Start the production server:
 
-tbd...
+```bash
+npm run start
+```
 
 ## Contributing
 
@@ -74,8 +99,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
 <table>
-  <tr>
-  </tr>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="http://annaeschenbacher.com"><img src="https://avatars.githubusercontent.com/u/56318362?v=4?s=64" width="64px;" alt="aeschi"/><br /><sub><b>Anna Eschenbacher</b></sub></a><br /><a href="https://github.com/technologiestiftung/baergpt/commits?author=aeschi" title="Code">💻</a> <a href="https://github.com/technologiestiftung/baergpt/pulls?q=is%3Apr+reviewed-by%3Aaeschi" title="Reviewed Pull Requests">👀</a> <a href="#a11y-aeschi" title="Accessibility">️️️️♿️</a> <a href="https://github.com/technologiestiftung/baergpt/commits?author=aeschi" title="Documentation">📖</a> 
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/zainab-tariq"><img src="https://avatars.githubusercontent.com/u/15946816?v=4?s=64" width="64px;" alt="Zainab Tariq"/><br /><sub><b>Zainab Tariq</b></sub></a><br /><a href="https://github.com/technologiestiftung/baergpt/commits?author=zainab-tariq" title="Code">💻</a> <a href="https://github.com/technologiestiftung/baergpt/pulls?q=is%3Apr+reviewed-by%3Azainab-tariq" title="Reviewed Pull Requests">👀</a> <a href="#a11y-zainab-tariq" title="Accessibility">️️️️♿️</a></td>
+     <td align="center" valign="top" width="14.28%"><a href="https://github.com/raphael-arce"><img src="https://avatars.githubusercontent.com/u/8709861?v=4?s=64" width="64px;" alt="Rapha"/><br /><sub><b>Raphael Arce</b></sub></a><br /><a href="https://github.com/technologiestiftung/baergpt/commits?author=raphael-arce" title="Code">💻</a> <a href="https://github.com/technologiestiftung/baergpt/pulls?q=is%3Apr+reviewed-by%3Araphael-arce" title="Reviewed Pull Requests">👀</a> <a href="#a11y-raphael-arce" title="Accessibility">️️️️♿️</a></td>
+    </tr>
+  </tbody>
 </table>
 
 <!-- markdownlint-restore -->
@@ -85,12 +115,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
 
-## Content Licensing
-
-Texts and content available as [CC BY](https://creativecommons.org/licenses/by/3.0/de/).
-
-Illustrations by {MARIA_MUSTERFRAU}, all rights reserved.
-
 ## Credits
 
 <table>
@@ -119,4 +143,6 @@ Illustrations by {MARIA_MUSTERFRAU}, all rights reserved.
   </tr>
 </table>
 
-## Related Projects
+## Contact
+
+For questions or further inquiries, please contact us at [support@baergpt.berlin](mailto:support@baergpt.berlin).

app/app.css

@@ -3,6 +3,7 @@
 @theme {
 	--color-schwarz-100: #000000;
 	--color-schwarz-80: #333333;
+	--color-schwarz-40: #737373;
 
 	--color-dunkelblau-100: #0c2753;
 	--color-dunkelblau-200: #030812;
@@ -55,3 +56,7 @@
 		text-underline-offset: 4px;
 	}
 }
+
+html {
+	scroll-behavior: smooth;
+}

app/components/accordion-content-elements/anhor-link.tsx

@@ -4,11 +4,12 @@ import { TrackedAnchorLink } from "../primitives/anchor-links/tracked-anchor-lin
 
 export const AnchorLink: React.FC<AnchorLinkProps> = ({
 	href,
-	target = "_self",
-	rel,
+	target = "_blank",
+	rel = "noopener noreferrer",
 	ariaLabel,
 	title,
 	className,
+	hasBorder = true,
 }) => {
 	return (
 		<TrackedAnchorLink
@@ -17,7 +18,8 @@ export const AnchorLink: React.FC<AnchorLinkProps> = ({
 			rel={rel}
 			aria-label={ariaLabel}
 			title={title}
-			className={`flex gap-1.5 underline decoration-1 underline-offset-4 focus-outline-default text-base leading-6 font-normal
+			className={`flex gap-1.5 underline decoration-1 h-[66px] items-center lg:px-3 underline-offset-4 focus-outline-default text-base leading-6 font-normal
+			${hasBorder && "border-b-[0.5px] border-dunkelblau-200"}
             ${className}`}
 		>
 			<span>{title}</span>

app/components/accordion-content-elements/download-item.tsx

@@ -6,15 +6,19 @@ interface DownloadItemProps {
 	title: string;
 	subtitle: string;
 	href: string;
+	hasBorder?: boolean;
 }
 
 export const DownloadItem: React.FC<DownloadItemProps> = ({
 	title,
 	subtitle,
 	href,
+	hasBorder = true,
 }) => {
 	return (
-		<div className="flex flex-col lg:flex-row gap-3 lg:gap-3 justify-between px-0 lg:px-3 py-3 border-b-[0.5px] border-dunkelblau-200">
+		<div
+			className={`flex flex-col md:flex-row gap-3 lg:gap-3 md:h-[66px] md:items-center  justify-between px-0 lg:px-3 py-3 ${hasBorder && "border-b-[0.5px] border-dunkelblau-200"}`}
+		>
 			<div className="flex flex-col">
 				<p className="text-base leading-6 font-semibold">{title}</p>
 				<p className="text-xs leading-4 font-normal">{subtitle}</p>

app/components/accordion-content-elements/video-item.tsx

@@ -15,13 +15,17 @@ export const VideoItem: React.FC<VideoItemProps> = ({
 }) => {
 	return (
 		<div
-			className={`flex flex-col lg:flex-row gap-3 lg:gap-0 justify-between px-0 lg:px-3 py-3 ${hasBorder && "border-b-[0.5px] border-dunkelblau-200"}`}
+			className={`flex flex-col md:flex-row gap-3 lg:gap-0 md:h-[66px] md:items-center justify-between px-0 lg:px-3 py-3 ${hasBorder && "border-b-[0.5px] border-dunkelblau-200"}`}
 		>
 			<div className="flex flex-col">
 				<p className="text-base leading-6 font-semibold">{title}</p>
 				<p className="text-xs leading-4 font-normal">Video-Tutorial</p>
 			</div>
-			<TertiaryTrackedAnchorLink href={href}>
+			<TertiaryTrackedAnchorLink
+				href={href}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
 				{content["anchor.toVideo.label"]}
 				<img
 					src="/icons/arrow-right-icon.svg"

app/components/cookie-banner/compact-banner-content.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { AccentButton } from "../primitives/buttons/accent-button";
+import { content } from "~/content";
+
+type CompactBannerContentProps = {
+	setIsExpanded: (expanded: boolean) => void;
+	handleAcceptAll: () => void;
+	handleDecline: () => void;
+};
+
+export const CompactBannerContent: React.FC<CompactBannerContentProps> = ({
+	setIsExpanded,
+	handleAcceptAll,
+	handleDecline,
+}) => {
+	return (
+		<div className="fixed bottom-0 left-0 right-0 bg-hellblau-30 border-t border-hellblau-50 z-50">
+			<div className="w-full max-w-screen-xl mx-auto gap-4 px-6 py-3 md:py-4 flex flex-col lg:flex-row items-center justify-between">
+				<div>
+					<h2 className="text-lg text-dunkelblau-100 mb-2 font-semibold">
+						{content["cookiesBanner.title"]}
+					</h2>
+					<p className="max-w-3xl text-base leading-6 text-dunkelblau-100 self-start">
+						{content["cookiesBanner.message.short"]}
+						<button
+							onClick={() => setIsExpanded(true)}
+							aria-label={content["cookiesBanner.expandButton.ariaLabel"]}
+							className="underline text-dunkelblau-100 outline-offset-1 focus-visible:outline-default rounded-3px"
+						>
+							{content["cookiesBanner.expandButton"]}
+						</button>
+					</p>
+				</div>
+
+				<div className="flex flex-shrink-0 flex-col w-full md:w-fit md:flex-row gap-2">
+					<button
+						onClick={handleDecline}
+						className="px-3 py-2 text-lg leading-7 font-normal cursor-pointer h-11 text-dunkelblau-100 hover:underline outline-offset-1 focus-visible:outline-default rounded-3px"
+						aria-label={content["cookiesBanner.button.deny"]}
+					>
+						{content["cookiesBanner.button.deny"]}
+					</button>
+
+					<AccentButton
+						onClick={handleAcceptAll}
+						ariaLabel={content["cookiesBanner.button.accept"]}
+					>
+						{content["cookiesBanner.button.accept"]}
+					</AccentButton>
+				</div>
+			</div>
+		</div>
+	);
+};