Base Structure Setup

frontend/app/(views)/(website)/survey-2024/opengraph-image.tsx

@@ -0,0 +1,22 @@
+/* * */
+
+import { OpenGraphSurvey2024Default } from '@/opengraph/OpenGraphSurvey2024Default';
+import fs from 'fs';
+import { ImageResponse } from 'next/og';
+
+/* * */
+
+export default async function Image() {
+	return new ImageResponse(
+		<OpenGraphSurvey2024Default />,
+		{
+			fonts: [
+				{ data: fs.readFileSync(`${process.cwd()}/public/fonts/Inter-Medium.ttf`).buffer as ArrayBuffer, name: 'Inter', style: 'normal', weight: 500 },
+				{ data: fs.readFileSync(`${process.cwd()}/public/fonts/Inter-SemiBold.ttf`).buffer as ArrayBuffer, name: 'Inter', style: 'normal', weight: 600 },
+				{ data: fs.readFileSync(`${process.cwd()}/public/fonts/Inter-Bold.ttf`).buffer as ArrayBuffer, name: 'Inter', style: 'normal', weight: 700 },
+			],
+			height: 630,
+			width: 1200,
+		},
+	);
+}

frontend/app/(views)/(website)/survey-2024/page.tsx

@@ -0,0 +1,16 @@
+/* * */
+
+import { Survey2024Page } from '@/components/survey-2024/Survey2024Page';
+import { type Metadata } from 'next';
+
+/* * */
+
+export const metadata: Metadata = {
+	description: 'Explore a verdadeira dimensão da CMetropolitana em 2024.',
+	title: 'CMetropolitana | Inquérito 2024',
+};
+
+/* * */
+export default function Page() {
+	return <Survey2024Page />;
+}

frontend/components/home/MainCarousel/data.json

@@ -1,22 +1,27 @@
 [
 	{
 		"id": "0001",
+		"src": "/assets/featured/survey-2024.png",
+		"url": "/survey-2024"
+	},
+	{
+		"id": "0002",
 		"src": "/assets/featured/review-2024.png",
 		"url": "/viagem-2024"
 	},
 	{
-		"id": "0002",
+		"id": "0003",
 		"src": "/assets/featured/tempo-real.png",
 		"url": "/news/27134"
 	},
 	{
-		"id": "0003",
+		"id": "0004",
 		"src": "/assets/featured/download_app.png",
 		"target": "_blank",
 		"url": "https://backoffice.carrismetropolitana.pt/viagemvirtual"
 	},
 	{
-		"id": "0004",
+		"id": "0005",
 		"src": "/assets/featured/join_whatsapp.png",
 		"url": "/news/7243"
 	}

frontend/components/survey-2024/Survey2024AboutCard/index.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+/* * */
+
+import { LottiePlayer } from '@/components/common/LottiePlayer';
+import { Survery2024AboutCardSchema } from '@/components/survey-2024/_data/About/cards';
+
+import styles from './styles.module.css';
+
+/* * */
+
+interface Props {
+	cardData: Survery2024AboutCardSchema
+
+}
+/* * */
+
+export function Survey2024AboutCard({ cardData }: Props) {
+	//
+
+	//
+	// A. Render components
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.cardMainWrapperShadow}><p className={styles.headerTitle}>{cardData.content.header_title}</p></div>
+			<div className={styles.cardMainWrapper} id={cardData._id}>
+				<div className={styles.header}>
+					{cardData.content.lottie_src && (
+						<LottiePlayer
+							className={styles.lottie}
+							path={cardData.content.lottie_src}
+							loop
+							play
+						/>
+					)}
+					<p className={styles.headerNumber}>{cardData.header.value}</p>
+					<p className={styles.headerTitle}>{cardData.content.legend}</p>
+				</div>
+			</div>
+		</div>
+	);
+
+	//
+}

frontend/components/survey-2024/Survey2024AboutCard/styles.module.css

@@ -0,0 +1,140 @@
+/* * */
+/* CONTAINER */
+
+.container {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 0;
+	align-items: flex-start;
+	justify-content: flex-start;
+	width: 100%;
+}
+
+
+/* * */
+/* HEADER */
+
+.header {
+	z-index: 10;
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	align-items: center;
+	width: 100%;
+	padding: 10px;
+	min-height: 140px;
+	justify-content: center;
+}
+
+.headerTitle {
+	font-size: 16px;
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text);
+	margin-left: 20px;
+}
+
+.headerNumber {
+	font-size: 28px;
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text);
+}
+
+
+/* * */
+/* CONTENT */
+
+.content {
+	width: 100%;
+	border-right: 2px solid var(--color-border);
+	border-left: 2px solid var(--color-border);
+	transition: all 500ms ease-out;
+}
+
+/* * */
+/* CONTENT NUMBER */
+
+.contentNumber {
+	display: flex;
+	flex-direction: column;
+	gap: 5px;
+	padding: 15px 20px;
+	background-color: var(--color-primary);
+	border-radius: 18px;
+}
+
+.contentNumberValue {
+	font-size: 26px;
+	font-weight: var(--font-weight-bold);
+	line-height: 1;
+	color: var(--color-text);
+}
+
+.contentNumberLegend {
+	font-size: 12px;
+	font-weight: var(--font-weight-semibold);
+	color: var(--color-text);
+	opacity: 0.8;
+}
+
+/* * */
+/* CONTENT LOTTIE */
+
+.contentLottie {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 200px;
+	background: #fff;
+	border: 1px solid var(--color-system-border-100);
+	border-radius: 18px;
+}
+
+/* * */
+/* CONTENT TITLE */
+
+.contentTitle {
+	font-size: 18px;
+	font-weight: var(--font-weight-bold);
+	color: var(--color-system-text-200);
+}
+
+.contentDescription {
+	font-size: 14px;
+	font-weight: var(--font-weight-medium);
+	color: var(--color-system-text-200);
+}
+
+/* * */
+/* CARD WRAPPER SHADOW */
+
+.cardMainWrapperShadow{
+    width: 100%;
+    height: 60px;
+    margin-bottom: -10px;
+    background-color: var(--color-brand);  
+    border-top-left-radius: 18px;  
+    border-top-right-radius: 18px;  
+}
+
+
+/* * */
+/* CARD WRAPPER */
+
+.cardMainWrapper{
+    -webkit-box-shadow: 0px -10px 0px rgba(0, 0, 0, 0.08);
+    -moz-box-shadow: 0px -10px 0px rgba(0, 0, 0, 0.08);
+    box-shadow: 0px -10px 0px rgba(0, 0, 0, 0.08);
+    border-radius: 10px;
+    background-color: var(--color-system-background-100);
+    border: 1px solid var(--color-system-border-100);
+}
+
+/* * */
+/* Header Title */
+.headerTitle {
+	font-size: 16px;
+	font-weight: var(--font-weight-bold);
+	color: var(--color-text);
+	padding: 10px;
+	text-align: center	;
+}

frontend/components/survey-2024/Survey2024Header/index.tsx

@@ -0,0 +1,45 @@
+/* * */
+
+import Button from '@/components/common/Button';
+import { Section } from '@/components/layout/Section';
+import { Surface } from '@/components/layout/Surface';
+import { IconDownload } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+
+import styles from './styles.module.css';
+
+/* * */
+export function Survey2024Header() {
+	//
+
+	//
+	// A. Setup variables
+
+	const t = useTranslations('survey-2024.Survey2024Header');
+
+	//
+	// B. Render components
+
+	return (
+		<Surface>
+			<Section withGap withPadding>
+
+				<p className={styles.SurveyTitle}>{t('title')}</p>
+
+				<div className={styles.anchorButtonsContainer}>
+					<Button href="#aboutSurvey" label={t('AnchorAboutSurvey')} />
+					<Button href="#passangerChacterization" label={t('AnchorPassengerCaracter')} />
+					<Button href="#results" label={t('AnchorResults')} />
+					<Button href="#recomendationIndex" label={t('AnchorIndex')} />
+				</div>
+
+				<div className={styles.downloadButtonContainer}>
+					<Button className={styles.downloadButton} icon={<IconDownload size={20} />} label={t('AnchorAboutSurveyTitle')} />
+				</div>
+
+			</Section>
+		</Surface>
+	);
+
+	//
+}

frontend/components/survey-2024/Survey2024Header/styles.module.css

@@ -0,0 +1,44 @@
+.SurveyTitle {
+    font-weight: var(--font-weight-title);
+    font-size:var(--font-size-title) ;
+    color: var(--color-system-text-100);
+}
+
+.downloadButton{
+    background: var(--color-brand);
+    font-weight: var(--font-weight-semibold);
+    font-size:var(--color-system-text-300) ;
+}
+
+.downloadButtonContainer{
+    align-items: center;
+    align-self: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+}
+
+.anchorButtonsContainer{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin: 0 auto;
+
+}
+@media(width <= 650px) {
+	.anchorButtonsContainer{
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 10px;
+        margin: 0 auto;
+
+    }
+}
+
+
+.anchorButtonsContainer a{
+    color: var(--color-system-text-300);
+    font-weight: var(--font-weight-bold);
+    font-size:var(--font-size-text);
+}

frontend/components/survey-2024/Survey2024Intro/index.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+/* * */
+
+import { Surface } from '@/components/layout/Surface';
+import { Image } from '@mantine/core';
+
+import styles from './styles.module.css';
+
+/* * */
+
+export function Survey2024Intro() {
+	return (
+		<Surface forceOverflow>
+			<Image alt="Review 2024" className={styles.image} src="/assets/survey-2024/images/AF _ Inquérito _ Banner _ Small.png" />
+		</Surface>
+	);
+}

frontend/components/survey-2024/Survey2024Intro/styles.module.css

@@ -0,0 +1,9 @@
+/* * */
+/* TEXT */
+
+.text {
+	padding: 0 5px;
+	font-size: 18px;
+	font-weight: var(--font-weight-medium);
+	color: var(--color-system-text-100);
+}