Skip to content

Commit

Permalink
Add markup and components for landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@hstandaert
hstandaert committed Mar 22, 2024
1 parent d17161d commit d7b4e78
Show file tree
Hide file tree
Showing 39 changed files with 1,091 additions and 24 deletions.
5 changes: 4 additions & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"editor.defaultFormatter": "biomejs.biome"
"editor.defaultFormatter": "biomejs.biome",
"editor.codeActionsOnSave": {
"source.organizeImports.biome": "explicit"
}
}
3 changes: 3 additions & 0 deletions biome.jsonc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@
"recommended": true
}
},
"formatter": {
"enabled": true
},
"vcs": {
"enabled": true,
"clientKind": "git",
Expand Down
10 changes: 8 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
<!doctype html>
<html lang="en">
<html>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
</head>

<body>
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"tailwind-merge": "^2.2.2"
},
"devDependencies": {
"@biomejs/biome": "1.6.1",
Expand Down
20 changes: 20 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion public/vite.svg
View file

This file was deleted.

9 changes: 6 additions & 3 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { Landing } from "@/pages";
import { AppStateProvider } from "@/providers";

function App() {
return (
<main>
<h1 className="text-3xl font-bold underline">Hello world!</h1>
</main>
<AppStateProvider>
<Landing />
</AppStateProvider>
);
}

Expand Down
2 changes: 2 additions & 0 deletions src/assets/content/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { default as navigationItems } from "./navigationItems";
export { default as newsItems, type NewsItem } from "./newsItems";
14 changes: 14 additions & 0 deletions src/assets/content/navigationItems.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export type NavigationItem = {
title: string;
href: string;
isActive?: boolean;
};

const navigationItems: NavigationItem[] = [
{ title: "Home", href: "#!", isActive: true },
{ title: "Services", href: "#!" },
{ title: "About", href: "#!" },
{ title: "Contact", href: "#!" },
];

export default navigationItems;
47 changes: 47 additions & 0 deletions src/assets/content/newsItems.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
export type NewsItem = {
key: string;
image: string;
title: string;
summary: string;
href: string;
};

const newsItems: NewsItem[] = [
{
key: "0",
title: "Distinguishing between ARIA and native HTML attributes",
summary:
"As a developer, you want to create more inclusive and accessible digital experiences for your users. Great! It’s possible, however, that you might be feeling a bit confused or overwhelmed by the element attributes that can affect the usability for users of assistive technology.",
href: "https://www.deque.com/blog/distinguishing-between-aria-and-native-html-attributes/",
image:
"https://images.unsplash.com/photo-1556484687-30636164638b?q=80&w=3474&auto=format&fit=crop",
},
{
key: "1",
title:
"Uber Must Pay Wheelchair User $35,000, Provide Accessible Rides: B.C. Human Rights Tribunal",
summary:
"It was the first time a ride-hailing app in Canada has been the subject of a human rights tribunal, the ruling said Author of the article:Susan Lazaruk",
href: "https://www.accessibilitynewsinternational.com/uber-must-pay-wheelchair-user-35000-provide-accessible-rides-b-c-human-rights-tribunal/",
image:
"https://images.unsplash.com/photo-1505243542579-da5adfe8338f?q=80&w=3540&auto=format&fit=crop",
},
{
key: "2",
title: "E-inclusion demo",
summary: "This is a demo of the E-inclusion project.",
href: "",
image:
"https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1740&auto=format&fit=crop",
},
{
key: "3",
title: "E-inclusion demo",
summary: "This is a demo of the E-inclusion project.",
href: "",
image:
"https://images.unsplash.com/photo-1476703993599-0035a21b17a9?q=80&w=1740&auto=format&fit=crop",
},
];

export default newsItems;
23 changes: 23 additions & 0 deletions src/assets/icons/arrowRight.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import type { SvgIcon } from "./types";

function arrowRight({ title, width = 24, height = 24 }: SvgIcon) {
return (
<svg
height={height}
width={width}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 330 330"
fill="currentColor"
>
<title>{title}</title>

<path
d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255
s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0
c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"
/>
</svg>
);
}

export default arrowRight;
30 changes: 30 additions & 0 deletions src/assets/icons/exclamation.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import type { SvgIcon } from "./types";

function exclamation({ title, width = 24, height = 24, ...props }: SvgIcon) {
return (
<svg
height={height}
width={width}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
{...props}
>
<title>{title}</title>

<path
d="M12 21C10.22 21 8.47991 20.4722 6.99987 19.4832C5.51983 18.4943 4.36628 17.0887 3.68509 15.4442C3.0039 13.7996 2.82567 11.99 3.17294 10.2442C3.5202 8.49836 4.37737 6.89472 5.63604 5.63604C6.89472 4.37737 8.49836 3.5202 10.2442 3.17294C11.99 2.82567 13.7996 3.0039 15.4442 3.68509C17.0887 4.36628 18.4943 5.51983 19.4832 6.99987C20.4722 8.47991 21 10.22 21 12C21 14.387 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.387 21 12 21ZM12 4.5C10.5166 4.5 9.0666 4.93987 7.83323 5.76398C6.59986 6.58809 5.63856 7.75943 5.07091 9.12988C4.50325 10.5003 4.35473 12.0083 4.64411 13.4632C4.9335 14.918 5.64781 16.2544 6.6967 17.3033C7.7456 18.3522 9.08197 19.0665 10.5368 19.3559C11.9917 19.6453 13.4997 19.4968 14.8701 18.9291C16.2406 18.3614 17.4119 17.4001 18.236 16.1668C19.0601 14.9334 19.5 13.4834 19.5 12C19.5 10.0109 18.7098 8.10323 17.3033 6.6967C15.8968 5.29018 13.9891 4.5 12 4.5Z"
fill="currentColor"
/>
<path
d="M12 13C11.8019 12.9974 11.6126 12.9176 11.4725 12.7775C11.3324 12.6374 11.2526 12.4481 11.25 12.25V8.75C11.25 8.55109 11.329 8.36032 11.4697 8.21967C11.6103 8.07902 11.8011 8 12 8C12.1989 8 12.3897 8.07902 12.5303 8.21967C12.671 8.36032 12.75 8.55109 12.75 8.75V12.25C12.7474 12.4481 12.6676 12.6374 12.5275 12.7775C12.3874 12.9176 12.1981 12.9974 12 13Z"
fill="currentColor"
/>
<path
d="M12 16C11.8019 15.9974 11.6126 15.9176 11.4725 15.7775C11.3324 15.6374 11.2526 15.4481 11.25 15.25V14.75C11.25 14.5511 11.329 14.3603 11.4697 14.2197C11.6103 14.079 11.8011 14 12 14C12.1989 14 12.3897 14.079 12.5303 14.2197C12.671 14.3603 12.75 14.5511 12.75 14.75V15.25C12.7474 15.4481 12.6676 15.6374 12.5275 15.7775C12.3874 15.9176 12.1981 15.9974 12 16Z"
fill="currentColor"
/>
</svg>
);
}

export default exclamation;
22 changes: 22 additions & 0 deletions src/assets/icons/icappsLogo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type { SvgIcon } from "./types";

function icappsLogo({ title, width = 100, height = 16 }: SvgIcon) {
return (
<svg width={width} height={height} xmlns="http://www.w3.org/2000/svg">
<title>{title}</title>

<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g fillRule="nonzero" fill="currentColor">
<path d="M12.9980952,8.03809524 C12.9980952,3.76380952 16.2819048,0.601904762 20.7238095,0.601904762 C22.6935652,0.580644217 24.5985926,1.3045546 26.0571429,2.62857143 C26.1464689,2.69134335 26.1996326,2.7936809 26.1996326,2.90285714 C26.1996326,3.01203338 26.1464689,3.11437093 26.0571429,3.17714286 L24.3809524,4.75428571 C24.3114771,4.83835285 24.2081077,4.88702652 24.0990476,4.88702652 C23.9899876,4.88702652 23.8866181,4.83835285 23.8171429,4.75428571 C22.0210194,3.0717065 19.2095492,3.1328717 17.4883015,4.89197342 C15.7670539,6.65107513 15.7670539,9.46321058 17.4883015,11.2223123 C19.2095492,12.981414 22.0210194,13.0425792 23.8171429,11.36 C23.8866181,11.2759329 23.9899876,11.2272592 24.0990476,11.2272592 C24.2081077,11.2272592 24.3114771,11.2759329 24.3809524,11.36 L26.0647619,12.8838095 C26.247619,13.0666667 26.2780952,13.2571429 26.0647619,13.4171429 C24.5936544,14.7530551 22.6727938,15.4849411 20.6857143,15.4666667 C16.2819048,15.4819048 12.9980952,12.32 12.9980952,8.03809524 Z" />
<path d="M52.4952381,14.9028571 L52.4952381,1.18857143 C52.4828839,1.08220613 52.5198325,0.976028932 52.5955498,0.900311684 C52.671267,0.824594437 52.7774442,0.787645768 52.8838095,0.8 L58.887619,0.8 C60.1765552,0.729599398 61.4364083,1.20020968 62.3635314,2.09840533 C63.2906544,2.99660098 63.8009503,4.2409089 63.7714286,5.53142857 C63.7714286,8.19809524 61.8819048,10.1866667 58.887619,10.1866667 L56.0838095,10.1866667 C55.9774442,10.1743124 55.871267,10.2112611 55.7955498,10.2869784 C55.7198325,10.3626956 55.6828839,10.4688728 55.6952381,10.5752381 L55.6952381,14.9180952 C55.7102401,15.0236683 55.6752671,15.1302114 55.600616,15.2063555 C55.5259648,15.2824997 55.4201351,15.3195754 55.3142857,15.3066667 L52.8838095,15.3066667 C52.7736327,15.3235437 52.662128,15.2858094 52.5848425,15.205493 C52.5075569,15.1251767 52.4741375,15.0123036 52.4952381,14.9028571 Z M58.3771429,7.48952381 C59.9009524,7.48952381 60.6628571,6.72761905 60.6628571,5.47809524 C60.6628571,4.22857143 59.9009524,3.45904762 58.3771429,3.45904762 L56.0914286,3.45904762 C55.9850633,3.44669339 55.8788861,3.48364206 55.8031688,3.5593593 C55.7274516,3.63507655 55.6905029,3.74125375 55.7028571,3.84761905 L55.7028571,7.10857143 C55.6899484,7.21442083 55.7270241,7.32025054 55.8031683,7.39490169 C55.8793125,7.46955285 55.9858555,7.50452586 56.0914286,7.48952381 L58.3771429,7.48952381 Z" />
<path d="M70.4228571,14.9028571 L70.4228571,1.18857143 C70.4105029,1.08220613 70.4474516,0.976028932 70.5231688,0.900311684 C70.5988861,0.824594437 70.7050633,0.787645768 70.8114286,0.8 L76.8152381,0.8 C78.1041742,0.729599398 79.3640274,1.20020968 80.2911504,2.09840533 C81.2182735,2.99660098 81.7285694,4.2409089 81.6990476,5.53142857 C81.6990476,8.19809524 79.8095238,10.1866667 76.8152381,10.1866667 L74.0114286,10.1866667 C73.9050633,10.1743124 73.7988861,10.2112611 73.7231688,10.2869784 C73.6474516,10.3626956 73.6105029,10.4688728 73.6228571,10.5752381 L73.6228571,14.9180952 C73.6378592,15.0236683 73.6028862,15.1302114 73.528235,15.2063555 C73.4535839,15.2824997 73.3477542,15.3195754 73.2419048,15.3066667 L70.8114286,15.3066667 C70.7012517,15.3235437 70.5897471,15.2858094 70.5124615,15.205493 C70.435176,15.1251767 70.4017565,15.0123036 70.4228571,14.9028571 Z M76.3047619,7.48952381 C77.8285714,7.48952381 78.5904762,6.72761905 78.5904762,5.47809524 C78.5904762,4.22857143 77.8285714,3.45904762 76.3047619,3.45904762 L74.0190476,3.45904762 C73.9126823,3.44669339 73.8065051,3.48364206 73.7307879,3.5593593 C73.6550706,3.63507655 73.618122,3.74125375 73.6304762,3.84761905 L73.6304762,7.10857143 C73.6175674,7.21442083 73.6546431,7.32025054 73.7307873,7.39490169 C73.8069315,7.46955285 73.9134746,7.50452586 74.0190476,7.48952381 L76.3047619,7.48952381 Z" />
<path d="M8.51047619,0.761904762 L3.36761905,14.9180952 C3.29596034,15.1463734 3.08104625,15.2989935 2.84190476,15.2914286 L0,15.2914286 L5.14285714,1.17333333 C5.20887107,0.939004166 5.42518665,0.779118738 5.66857143,0.784761905 L8.51047619,0.761904762 Z" />
<path d="M90.2780952,4.72380952 C90.2780952,3.8552381 91.04,3.29142857 92.32,3.29142857 C93.8754527,3.27441614 95.3810419,3.83969151 96.5409524,4.87619048 L96.5409524,4.87619048 L97.4552381,2.24 C97.5083296,2.09612542 97.4545122,1.93467334 97.3257143,1.85142857 C95.9183819,0.951034508 94.2718222,0.496902726 92.6019048,0.548571429 C89.1885714,0.548571429 87.1009524,2.55238095 87.1009524,4.96 C87.1009524,10.4228571 95.4819048,8.66285714 95.4819048,11.1847619 C95.4819048,12.0304762 94.6742857,12.792381 92.96,12.792381 C91.349339,12.7938921 89.7987978,12.1807607 88.6247619,11.0780952 C88.5573569,11.0134179 88.4655476,10.9805908 88.3724152,10.9878668 C88.2792827,10.9951427 88.1936855,11.0418297 88.1371429,11.1161905 L86.8114286,12.9980952 C86.710418,13.1195165 86.710418,13.2957216 86.8114286,13.4171429 C88.4537389,14.8733958 90.5998404,15.6306826 92.792381,15.527619 C96.6857143,15.527619 98.5981005,13.5314286 98.5981005,10.88 C98.6057143,5.46285714 90.2780952,7.00952381 90.2780952,4.72380952 Z" />
<path d="M45.9657143,14.8495238 L40.96,1.08952381 C40.8999943,0.895218628 40.7131904,0.768571919 40.5104762,0.784761905 L37.3333333,0.784761905 C37.1325735,0.769352573 36.9483667,0.896391718 36.8914286,1.08952381 L31.8857143,14.8495238 C31.7790476,15.1161905 31.8857143,15.2914286 32.1904762,15.2914286 L34.4761905,15.2914286 C34.6790568,15.3118756 34.8653393,15.177883 34.9104762,14.9790476 L38.6819048,4.64761905 C38.8114286,4.29714286 39.0552381,4.29714286 39.1847619,4.64761905 L40.8838095,9.31809524 C40.9828571,9.5847619 40.8838095,9.76 40.5714286,9.76 L38.2857143,9.76 L37.287619,12.4190476 L41.6990476,12.4190476 C41.8982155,12.4058917 42.078096,12.5375899 42.1257143,12.7314286 L42.9409524,14.9790476 C42.9885707,15.1728863 43.1684512,15.3045845 43.367619,15.2914286 L45.6533333,15.2914286 C45.927619,15.2914286 46.0647619,15.1161905 45.9657143,14.8495238 Z" />
</g>
</g>
</svg>
);
}

export default icappsLogo;
3 changes: 3 additions & 0 deletions src/assets/icons/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { default as ArrowRight } from "./arrowRight.tsx";
export { default as IcappsLogo } from "./icappsLogo.tsx";
export { default as Exclamation } from "./exclamation.tsx";
7 changes: 7 additions & 0 deletions src/assets/icons/types.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { HTMLAttributes } from "react";

export type SvgIcon = HTMLAttributes<SVGElement> & {
title: string;
width?: number;
height?: number;
};
26 changes: 26 additions & 0 deletions src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import type { ButtonHTMLAttributes, PropsWithChildren } from "react";
import { twMerge } from "tailwind-merge";

export type ButtonProps = PropsWithChildren &
ButtonHTMLAttributes<HTMLButtonElement>;

function Button({ type = "button", ...props }: ButtonProps) {
return (
<button
className={twMerge(
"bg-blueZodiac",
"hover:bg-blueZodiac/60",
"transition-colors",
"duration-200",
"text-white",
"py-2",
"px-4",
"rounded",
)}
type={type}
{...props}
/>
);
}

export default Button;
33 changes: 33 additions & 0 deletions src/components/Container.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import type { HTMLAttributes, PropsWithChildren } from "react";
import { twMerge } from "tailwind-merge";

export type ContainerProps = PropsWithChildren &
HTMLAttributes<HTMLDivElement> & {
narrow?: boolean;
};

function Container({ className, narrow, ...props }: ContainerProps) {
return (
<div
className={twMerge(
"container",
"mx-auto",
"px-4",
"sm:px-6",
"lg:px-8",
narrow && "xl:px-60",
"py-3",
"sm:py-4",
"lg:py-6",
"my-4",
"sm:my-6",
"lg:my-8",
"xl:my-12",
className,
)}
{...props}
/>
);
}

export default Container;
14 changes: 14 additions & 0 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Container } from ".";

function footer() {
return (
<Container className="my-0 md:my-0 lg:my-0 xl:my-0">
<div className="py-6 flex border-t border-opacity-50">
<h5 className="font-bold mr-3">Adres</h5>
<p>Hangar 26/27, Rijnkaai 100 B16, 2000 Antwerp Belgium</p>
</div>
</Container>
);
}

export default footer;
34 changes: 34 additions & 0 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Navigation } from "@/components";
import { useAppState } from "@/providers/AppStateProvider";
import { twMerge } from "tailwind-merge";
import Container from "./Container";

function Header() {
const { isCompliant } = useAppState();

return (
<header
className={twMerge(
"mb-auto",
"text-sm",
isCompliant && ["bg-gradient-to-b", "from-blueZodiac", "to-background"],
"lg:min-h-screen",
"flex",
"flex-col",
)}
>
<Container className="grow flex flex-col">
<Navigation />

<div className="mt-12 grow flex items-center">
<h1 className="uppercase text-4xl lg:text-7xl/normal">
The only <strong>disability</strong> is when people cannot see{" "}
<strong>human potential</strong>.
</h1>
</div>
</Container>
</header>
);
}

export default Header;
Loading

0 comments on commit d7b4e78

Please sign in to comment.