diff --git "a/apps/docs/public/D\342\200\224Heavy.webp" "b/apps/docs/public/D\342\200\224Heavy.webp" new file mode 100644 index 00000000..af6f9bb5 Binary files /dev/null and "b/apps/docs/public/D\342\200\224Heavy.webp" differ diff --git a/apps/docs/public/arrow.svg b/apps/docs/public/arrow.svg new file mode 100644 index 00000000..ff92fbd2 --- /dev/null +++ b/apps/docs/public/arrow.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/apps/docs/public/github.svg b/apps/docs/public/github.svg new file mode 100644 index 00000000..ca269a09 --- /dev/null +++ b/apps/docs/public/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/docs/public/layout-dashboard.svg b/apps/docs/public/layout-dashboard.svg new file mode 100644 index 00000000..32a8f8a3 --- /dev/null +++ b/apps/docs/public/layout-dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/docs/public/logo-full.svg b/apps/docs/public/logo-full.svg new file mode 100644 index 00000000..874ba066 --- /dev/null +++ b/apps/docs/public/logo-full.svg @@ -0,0 +1,30 @@ + + + Studio Hyperdrive logo full + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/docs/public/zap.svg b/apps/docs/public/zap.svg new file mode 100644 index 00000000..d4ff44f8 --- /dev/null +++ b/apps/docs/public/zap.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/docs/src/app/pages/docs/landing/docs-page.component.html b/apps/docs/src/app/pages/docs/landing/docs-page.component.html index 226ee107..9bb4d9a7 100644 --- a/apps/docs/src/app/pages/docs/landing/docs-page.component.html +++ b/apps/docs/src/app/pages/docs/landing/docs-page.component.html @@ -1,6 +1,6 @@ -

MyAwesomeDoc

+

NGX Tools

 diff --git a/apps/docs/src/app/pages/landing/landing-page.component.html b/apps/docs/src/app/pages/landing/landing-page.component.html index 745423bc..1b1cd0bc 100644 --- a/apps/docs/src/app/pages/landing/landing-page.component.html +++ b/apps/docs/src/app/pages/landing/landing-page.component.html @@ -1 +1,187 @@ -Go to docs +
+
+ Studio Hyperdrive + + +
+
+
+

Ngx
Tools

+

+ Ngx-tools is a mono-repo providing several of the Angular based packages created and + maintained by the + Studio Hyperdrive team. +

+
+
+
+
+

Utils

+ arrow +

+ Several independent utilities to facilitate common use-cases for users and + developers. +

+
+
+

Forms

+ arrow +

Multiple utilities for complex form use-cases.

+
+
+

Store

+ arrow +

Several utils and abstractions to improve the Redux workflow

+
+
+

Table

+ arrow +

+ A quick and easy template based table builder using the Angular CDK Table. +

+
+
+

I18n

+ arrow +

A lazy-loaded modular approach to translations.

+
+
+

Cookies

+ arrow +

A quick and easy wrapper for CookieConsent V3.

+
+
+

Layout

+ arrow +

A collection of Angular components related to layout.

+
+
+

Tour

+ arrow +

The tools to build a guided walkthrough of one or more pages.

+
+
+
+ +
+
+

+ At Studio Hyperdrive, 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 SHD Open Source, 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. +

+

+ Since the launch in 2021, we’ve already created 16 packages 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 + broad spectrum of applications and projects. Thus helping developers + worldwide streamline their workflows and build better applications. +

+
+
+
+

Why SHD Open Source?

+
+
+ Github icon +

Collaboration with the community:

+

+ 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. +

+
+ +
+ lightning bolt icon +

Efficiency and simplicity:

+

+ 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. +

+
+ +
+ layout dashboard icon +

Proven building blocks:

+

+ 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. +

+
+
+
+ +
+

Built for developers

+
+

+ 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. +

+
+

+ “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.” +

+ Denis Valcke, lead developer and project founder. +
+
+
+ +
+

Join the community

+
+

+ 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. +

+ + + Github icon + Github +
+
+
+
diff --git a/apps/docs/src/app/pages/landing/landing-page.component.scss b/apps/docs/src/app/pages/landing/landing-page.component.scss new file mode 100644 index 00000000..6878f48c --- /dev/null +++ b/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); + } + } + } + } +} diff --git a/apps/docs/src/app/pages/landing/landing-page.component.ts b/apps/docs/src/app/pages/landing/landing-page.component.ts index a69a01e9..4b252fb6 100644 --- a/apps/docs/src/app/pages/landing/landing-page.component.ts +++ b/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; diff --git a/apps/docs/src/styles.scss b/apps/docs/src/styles.scss index 348ef8d3..b765d052 100644 --- a/apps/docs/src/styles.scss +++ b/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);