feat(documentaion): home page content

apps/docs/src/app/pages/docs/landing/docs-page.component.html

@@ -1,6 +1,6 @@
 <ng-doc-root>
 	<ng-doc-navbar>
-		<h3 ngDocNavbarLeft>MyAwesomeDoc</h3>
+		<h3 ngDocNavbarLeft>NGX Tools</h3>
 	</ng-doc-navbar>
 	<ng-doc-sidebar></ng-doc-sidebar>
 	<router-outlet></router-outlet>

apps/docs/src/app/pages/landing/landing-page.component.html

@@ -1 +1,187 @@
-<a [routerLink]="routes.DOCS">Go to docs</a>
+<div class="landing">
+	<header>
+		<a href="https://studiohyperdrive.be/" target="_blank"><img src="/logo-full.svg" alt="Studio Hyperdrive" /></a>
+
+		<nav>
+			<a [routerLink]="[routes.DOCS, 'cookies', 'introduction']">Docs</a>
+			<a href="https://github.com/studiohyperdrive/ngx-tools" target="_blank">Github</a>
+		</nav>
+	</header>
+	<main>
+		<div class="intro">
+			<h1><span>Ngx</span><br /><span>Tools</span></h1>
+			<h2 class="subtitle">
+				Ngx-tools is a mono-repo providing several of the Angular based packages created and
+				maintained by the
+				<a href="https://studiohyperdrive.be/" target="_blank">Studio Hyperdrive</a> team.
+			</h2>
+		</div>
+		<section class="white tools">
+			<div class="tools">
+				<div class="tool">
+					<h3>Utils</h3>
+					<a [routerLink]="[routes.DOCS, 'utils', 'installation']"
+						><img src="/arrow.svg" alt="arrow"
+					/></a>
+					<p>
+						Several independent utilities to facilitate common use-cases for users and
+						developers.
+					</p>
+				</div>
+				<div class="tool">
+					<h3>Forms</h3>
+					<a [routerLink]="[routes.DOCS, 'forms', 'introduction']"
+						><img src="/arrow.svg" alt="arrow"
+					/></a>
+					<p>Multiple utilities for complex form use-cases.</p>
+				</div>
+				<div class="tool">
+					<h3>Store</h3>
+					<a [routerLink]="[routes.DOCS, 'store', 'introduction']"
+						><img src="/arrow.svg" alt="arrow"
+					/></a>
+					<p>Several utils and abstractions to improve the Redux workflow</p>
+				</div>
+				<div class="tool">
+					<h3>Table</h3>
+					<a [routerLink]="[routes.DOCS, 'table', 'introduction']"
+						><img src="/arrow.svg" alt="arrow"
+					/></a>
+					<p>
+						A quick and easy template based table builder using the Angular CDK Table.
+					</p>
+				</div>
+				<div class="tool">
+					<h3>I18n</h3>
+					<a [routerLink]="[routes.DOCS, 'i18n', 'introduction']"
+						><img src="/arrow.svg" alt="arrow"
+					/></a>
+					<p>A lazy-loaded modular approach to translations.</p>
+				</div>
+				<div class="tool">
+					<h3>Cookies</h3>
+					<a [routerLink]="[routes.DOCS, 'cookies', 'introduction']"
+						><img src="/arrow.svg" alt="arrow"
+					/></a>
+					<p>A quick and easy wrapper for CookieConsent V3.</p>
+				</div>
+				<div class="tool">
+					<h3>Layout</h3>
+					<a [routerLink]="[routes.DOCS, 'layout', 'introduction']"
+						><img src="/arrow.svg" alt="arrow"
+					/></a>
+					<p>A collection of Angular components related to layout.</p>
+				</div>
+				<div class="tool">
+					<h3>Tour</h3>
+					<a [routerLink]="[routes.DOCS, 'tour', 'introduction']"
+						><img src="/arrow.svg" alt="arrow"
+					/></a>
+					<p>The tools to build a guided walkthrough of one or more pages.</p>
+				</div>
+			</div>
+		</section>
+
+		<section>
+			<div class="divide">
+				<p>
+					At <b>Studio Hyperdrive</b>, we’re all about building robust digital solutions.
+					We’ve been passionately developing our JavaScript and Angular expertise since
+					our foundation in 2018. That passion gave rise to <b>SHD Open Source</b>, our
+					open source initiative. What started as a “love project” of some of our
+					employees has grown into an active open source ecosystem powered by the
+					ingenuity of our team and the broader developer community.
+				</p>
+				<p>
+					Since the launch in <b>2021</b>, we’ve already created <b>16 packages</b> for
+					a.o. Angular, RXJS and Node.js. These tools have already spiked the interest of
+					the international community. Our tools have been widely implemented across a
+					<b>broad spectrum of applications and projects</b>. Thus helping developers
+					worldwide streamline their workflows and build better applications.
+				</p>
+			</div>
+		</section>
+		<section class="white bullets">
+			<h3>Why SHD Open Source?</h3>
+			<div class="bullets">
+				<div>
+					<img src="/github.svg" alt="Github icon" />
+					<h4>Collaboration with the community:</h4>
+					<p>
+						Engaging with the global developer community allows us to share knowledge,
+						learn from others, and create better tools together. SHD Open Source isn’t
+						only about giving back; it’s about working smarter, and innovate through
+						shared effort.
+					</p>
+				</div>
+
+				<div>
+					<img src="/zap.svg" alt="lightning bolt icon" />
+					<h4>Efficiency and simplicity:</h4>
+					<p>
+						By leveraging open source packages (both our own and those from others),
+						repetitive tasks can be eliminated and you can focus on solving real
+						problems. These packages provide a tested, reliable foundation that reduces
+						complexity and accelerates development timelines.
+					</p>
+				</div>
+
+				<div>
+					<img src="/layout-dashboard.svg" alt="layout dashboard icon" />
+					<h4>Proven building blocks:</h4>
+					<p>
+						Our open source tools offer a modular approach to development. Think of them
+						as a toolbox full of building blocks that have already been validated in
+						countless real-world applications. This means fewer bugs, less stress during
+						production, and more time to focus on innovation. Moreover, all components
+						are compliant with the latest WCAG standards.
+					</p>
+				</div>
+			</div>
+		</section>
+
+		<section>
+			<h3>Built for developers</h3>
+			<div class="divide">
+				<p>
+					SHD Open Source is built by developers, for developers. Our tools are designed
+					to save you time, reduce frustration, and help you ship better code faster.
+					Whether you’re looking for UI components, utilities, or advanced functionality
+					for Angular applications, our packages have something to offer. And if not, stay
+					tuned. We’re working every day on expanding them.
+				</p>
+				<div class="quote">
+					<p>
+						“By switching our mindset from one-off to more robust solutions, we are now
+						working together across projects, which has had a remarkable impact on the
+						quality of our code and developer happiness.”
+					</p>
+					<cite>Denis Valcke, lead developer and project founder.</cite>
+				</div>
+			</div>
+		</section>
+
+		<section class="white">
+			<h3>Join the community</h3>
+			<div>
+				<p>
+					Many contributors have already joined our journey, and the amount of features,
+					packages and community members grows each day. We invite you to dive in, explore
+					our packages, and see how they can make your projects smoother and more
+					efficient. Whether you’re here to contribute, collaborate, or simply use our
+					tools, you’re part of a community that values craftsmanship, collaboration, and
+					continuous improvement.
+				</p>
+
+				<a
+					class="button"
+					href="https://github.com/studiohyperdrive/ngx-tools"
+					target="_blank"
+				>
+					<img src="/github.svg" alt="Github icon" />
+					Github</a
+				>
+			</div>
+		</section>
+	</main>
+</div>

apps/docs/src/app/pages/landing/landing-page.component.scss

@@ -0,0 +1,305 @@
+div.landing {
+	background-color: black;
+	background: black url('/D—Heavy.webp') center / cover no-repeat;
+	color: white;
+	padding: 2rem 0rem 0rem;
+	font-family: 'Space Grotesk', sans-serif !important;
+
+	header,
+	main {
+		margin: auto;
+	}
+	h1,
+	h2,
+	h3,
+	h4,
+	p {
+		margin: 0;
+		line-height: 1.2;
+	}
+
+	a {
+		color: white;
+		text-decoration: underline;
+	}
+
+	header {
+		max-width: 1024px;
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+		align-items: end;
+		padding: 0 1rem;
+		img {
+			width: 10rem;
+		}
+		nav {
+			width: 100%;
+			display: flex;
+			gap: 1rem;
+			justify-content: flex-end;
+			font-size: 1.2rem;
+			a {
+				text-decoration: none;
+				&:hover {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+	main {
+		.intro {
+			max-width: 1024px;
+			padding: 0 1rem;
+			margin: auto;
+			h1 {
+				margin: 4rem 0 2rem 0;
+				font-size: 6rem;
+				line-height: 6rem;
+				:nth-child(3) {
+					margin-left: 4.7rem;
+				}
+			}
+			h2 {
+				justify-self: end;
+				padding: 0 1rem;
+				align-self: start;
+				font-size: 1.4rem;
+				margin-bottom: 4rem;
+			}
+		}
+		section {
+			max-width: 100%;
+			padding: 2rem;
+			h3 {
+				text-align: center;
+				font-size: 1.8rem;
+				margin-bottom: 1rem;
+			}
+			div {
+				margin: auto;
+				max-width: 1024px;
+				b {
+					font-size: 1.1rem;
+				}
+				.quote {
+					width: 100%;
+					font-size: 1.1rem;
+					font-style: italic;
+					padding: 1rem;
+					background-color: white;
+					border-bottom: 5px solid #bd00ff;
+					color: black;
+					box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
+					border-image: linear-gradient(
+							90deg,
+							#00cb9a 0.32%,
+							#3858ca 29.01%,
+							#38cfff 51.04%,
+							#f872c2 98.69%
+						)
+						1;
+					p {
+						margin-bottom: 1rem;
+						text-align: center;
+					}
+					cite {
+						color: grey;
+					}
+				}
+				a.button {
+					margin: 1rem auto;
+					display: flex;
+					gap: 0.5rem;
+					width: fit-content;
+					padding: 0.5rem 1rem;
+					color: black;
+					border-radius: 2rem;
+					font-size: 1.2rem;
+					text-decoration: none;
+					border: 1px solid black;
+					align-items: center;
+					&:hover {
+						cursor: pointer;
+						color: white;
+						background-color: #bd00ff;
+						border: 1px solid #bd00ff;
+						img {
+							filter: invert(1);
+						}
+					}
+				}
+				&.divide {
+					display: grid;
+					gap: 1.5rem;
+				}
+				&.bullets {
+					display: grid;
+					gap: 2rem;
+					div {
+						display: grid;
+						grid-template-columns: 1.5rem 1fr;
+						gap: 0.5rem 0.75rem;
+						img {
+							width: 100%;
+						}
+						h4 {
+							font-size: 1.4rem;
+							line-height: 1;
+						}
+						p {
+							grid-column-start: 2;
+						}
+					}
+				}
+				&.tools {
+					display: grid;
+					gap: 2rem;
+					align-items: end;
+					div.tool {
+						padding-bottom: 1rem;
+						border-bottom: 2px solid black;
+						display: grid;
+						grid-template-columns: auto 1fr;
+						grid-template-rows: auto 1fr;
+						gap: 0.5rem;
+						width: 100%;
+						height: 100%;
+						h3 {
+							text-align: left;
+							font-size: 1.5rem;
+							margin: 0;
+						}
+						p {
+							grid-column: 1 / 3;
+						}
+						a {
+							border: 1px solid black;
+							border-radius: 1rem;
+							cursor: pointer;
+							justify-self: end;
+							width: 3rem;
+							height: 1.5rem;
+							display: block;
+							padding: 0.25rem 0.5rem;
+							img {
+								display: block;
+								width: 100%;
+							}
+							&:hover {
+								background-color: #bd00ff;
+								border: 1px solid #bd00ff;
+								img {
+									filter: invert(1);
+								}
+							}
+						}
+					}
+				}
+			}
+
+			&.white {
+				background-color: white;
+				box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 10px;
+				color: black;
+			}
+		}
+	}
+}
+
+@media screen and (min-width: 640px) {
+	div.landing {
+		main {
+			.intro {
+				h1 {
+					margin: 6rem 0 4rem 0;
+					font-size: 7rem;
+					line-height: 7rem;
+					:nth-child(3) {
+						margin-left: 5.4rem;
+					}
+				}
+				h2 {
+					width: 75%;
+					margin-bottom: 6rem;
+					text-align: right;
+				}
+			}
+			section {
+				padding: 3rem 2rem;
+				h3 {
+					margin-bottom: 3rem;
+				}
+				div.tools {
+					grid-template-columns: repeat(2, 1fr);
+					gap: 1.5rem;
+					div.tool {
+						padding: 0 0 1rem 0;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media screen and (min-width: 768px) {
+	div.landing {
+		main {
+			.intro {
+				h2 {
+					width: 70%;
+					margin-bottom: 10rem;
+				}
+			}
+			section {
+				padding: 4rem 3rem;
+				div.divide {
+					grid-template-columns: repeat(2, 1fr);
+				}
+				div.tools {
+					grid-template-columns: repeat(3, 1fr);
+				}
+				div.bullets {
+					grid-template-columns: repeat(3, 1fr);
+					gap: 1rem;
+					div {
+						height: 100%;
+						grid-template-rows: auto 1fr;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media screen and (min-width: 1024px) {
+	div.landing {
+		header {
+			nav {
+				gap: 1.5rem;
+			}
+		}
+		main {
+			.intro {
+				h1 {
+					margin: 8rem 0 6rem 0;
+					font-size: 8rem;
+					line-height: 8rem;
+					:nth-child(3) {
+						margin-left: 6.2rem;
+					}
+				}
+				h2 {
+					width: 65%;
+					margin-bottom: 12rem;
+				}
+			}
+			section {
+				padding: 6rem 4rem;
+				div.tools {
+					grid-template-columns: repeat(4, 1fr);
+				}
+			}
+		}
+	}
+}

apps/docs/src/app/pages/landing/landing-page.component.ts

@@ -6,6 +6,7 @@ import { ERoutes } from '../../shared/types';
 	imports: [RouterLink],
 	selector: 'landing-page',
 	templateUrl: 'landing-page.component.html',
+	styleUrl: 'landing-page.component.scss',
 })
 export class LandingPageComponent {
 	public routes: typeof ERoutes = ERoutes;

apps/docs/src/styles.scss

@@ -18,7 +18,7 @@ h3 {
 }
 
 .ng-doc-header {
-	background-image: linear-gradient(15deg, #bd00ff 40%, #3858ca);
+	background-image: linear-gradient(15deg, #6e3e70 40%, #308497);
 	color: white;
 	button:hover {
 		background-color: rgba(78, 78, 78, 0.5);