From 35bd8cb7188be9dae3a0ba7dd74d307eecb32243 Mon Sep 17 00:00:00 2001 From: Cian Hughes Date: Thu, 9 Jan 2025 11:18:37 +0000 Subject: [PATCH] Separated landing page into multiple files --- src/LandingPage/BottomCall.scss | 84 ++++ src/LandingPage/BottomCall.svelte | 15 + src/LandingPage/InfoScroll.scss | 90 ++++ src/LandingPage/InfoScroll.svelte | 104 ++++ src/LandingPage/LandingPage.scss | 27 + src/LandingPage/LandingPage.svelte | 625 +----------------------- src/LandingPage/NavigationFooter.scss | 110 +++++ src/LandingPage/NavigationFooter.svelte | 29 ++ src/LandingPage/NavigationHeader.scss | 51 ++ src/LandingPage/NavigationHeader.svelte | 13 + src/LandingPage/Splash.scss | 91 ++++ src/LandingPage/Splash.svelte | 28 ++ 12 files changed, 654 insertions(+), 613 deletions(-) create mode 100644 src/LandingPage/BottomCall.scss create mode 100644 src/LandingPage/BottomCall.svelte create mode 100644 src/LandingPage/InfoScroll.scss create mode 100644 src/LandingPage/InfoScroll.svelte create mode 100644 src/LandingPage/LandingPage.scss create mode 100644 src/LandingPage/NavigationFooter.scss create mode 100644 src/LandingPage/NavigationFooter.svelte create mode 100644 src/LandingPage/NavigationHeader.scss create mode 100644 src/LandingPage/NavigationHeader.svelte create mode 100644 src/LandingPage/Splash.scss create mode 100644 src/LandingPage/Splash.svelte diff --git a/src/LandingPage/BottomCall.scss b/src/LandingPage/BottomCall.scss new file mode 100644 index 0000000..ef052de --- /dev/null +++ b/src/LandingPage/BottomCall.scss @@ -0,0 +1,84 @@ +.btmcall { + background: #f7f7f7; + width: 100%; + height: 236px; + position: relative; + overflow: hidden; +} + +.btmcall-text { + color: var(--background, #090541); + text-align: left; + font-family: var(--title-font-family); + font-size: var(--title-font-size, 64px); + font-weight: var(--title-font-weight, 400); + position: absolute; + left: calc(50% - 675px); + top: 64px; + width: 874px; +} + +.btmcall-buttons { + display: flex; + flex-direction: row; + gap: 24px; + align-items: center; + justify-content: flex-end; + position: absolute; + right: 80px; + top: 80px; +} + +.btmcall-button1 { + background: var(--cpalettemedium); + border-radius: 8px; + padding: 20px 32px 20px 32px; + display: flex; + flex-direction: row; + gap: 8px; + align-items: center; + justify-content: flex-start; + flex-shrink: 0; + position: relative; + box-shadow: var(--button-shadow-box-shadow, + 0px 1px 2px 0px rgba(0, 0, 0, 0.05)); +} + +.btmcall-button2 { + background: var(--cpalettecomplimentary, #ffffff); + border-radius: 8px; + padding: 20px 32px 20px 32px; + display: flex; + flex-direction: row; + gap: 8px; + align-items: center; + justify-content: flex-start; + flex-shrink: 0; + position: relative; + box-shadow: var(--button-shadow-box-shadow, + 0px 1px 2px 0px rgba(0, 0, 0, 0.05)); +} + +.btmcall-get-involved { + color: var(--cpalettecomplimentary, #ffffff); + text-align: left; + font-family: var(--body-font-family, "Assistant", sans-serif); + font-size: var(--body-font-size, 24px); + font-weight: var(--body-font-weight, 400); + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.btmcall-contact-us { + color: var(--background, #090541); + text-align: left; + font-family: var(--body-font-family, "Assistant", sans-serif); + font-size: var(--body-font-size, 24px); + font-weight: var(--body-font-weight, 400); + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; +} diff --git a/src/LandingPage/BottomCall.svelte b/src/LandingPage/BottomCall.svelte new file mode 100644 index 0000000..86aed22 --- /dev/null +++ b/src/LandingPage/BottomCall.svelte @@ -0,0 +1,15 @@ + + +
+
+
+
Get Involved!
+
+
+
Contact Us
+
+
+
Interested in the project?
+
diff --git a/src/LandingPage/InfoScroll.scss b/src/LandingPage/InfoScroll.scss new file mode 100644 index 0000000..0749efc --- /dev/null +++ b/src/LandingPage/InfoScroll.scss @@ -0,0 +1,90 @@ +.infscr { + width: 100%; + position: relative; + padding-top: var(--infscr-vpad); + padding-bottom: var(--infscr-vpad); + padding-left: var(--infscr-hpad); + padding-right: var(--infscr-hpad); + display: flex; + flex-direction: column; + gap: var(--infscr-cardgap-size); +} + +.infscr-title { + color: var(--cpalettelight); + width: 100%; + text-align: left; + font-family: var(--infscr-title-font-family); + font-size: var(--infscr-title-font-size); + font-weight: var(--infscr-title-font-weight); + position: relative; +} + +.infscr-subtitle { + color: var(--cpalettelight); + text-align: left; + font-family: var(--infscr-subtitle-font-family); + font-size: var(--infscr-subtitle-font-size); + font-weight: var(--infscr-subtitle-font-weight); + position: relative; + width: 515px; +} + +.infscr-body { + color: var(--cpalettecomplimentary); + text-align: left; + font-family: var(--infscr-body-font-family); + font-size: var(--infscr-body-font-size); + font-weight: var(--infscr-body-font-weight); + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.infscr-image { + border-radius: var(--infscr-corner-round); + width: var(--infscr-img-size); + height: var(--infscr-img-size); + position: relative; +} + +.infscr-row, +.infscr-row-reverse { + display: flex; + width: 100%; + justify-content: space-evenly; + gap: var(--infscr-cardgap-size); +} + +@media (orientation: landscape) { + .infscr-row { + flex-direction: row; + } + + .infscr-row-reverse { + flex-direction: row-reverse; + } +} + +@media (orientation: portrait) { + .infscr-row { + flex-direction: column; + } + + .infscr-row-reverse { + flex-direction: column; + } +} + +.infscr-textcol { + display: flex; + flex-direction: column; + gap: var(--infscr-titlegap-size); +} + +.infscr-subcol { + display: flex; + flex-direction: column; + gap: var(--infscr-textgap-size); +} diff --git a/src/LandingPage/InfoScroll.svelte b/src/LandingPage/InfoScroll.svelte new file mode 100644 index 0000000..3a75add --- /dev/null +++ b/src/LandingPage/InfoScroll.svelte @@ -0,0 +1,104 @@ + + +
+
+
+
+
Experts in L-PBF
+
+
Experienced Research Teams
+
+ Our collaboration is comprised of expert L-PBF researchers + with years of experience in the field. +
+
+
+
International Excellence
+
+ AM-D-Model contributors include scientists and engineers + from respected research institutions across Europe. +
+
+
+
+ Backed by Research Associations +
+
+ AM-D-Model is supported and funded by ESAFORM, a globally + recognized association of research leaders in additive + manufacturing. +
+
+
+
+
+
+
+
Data Driven Research
+
+
Building the Future of L-PBF
+
+ AM-D-Model aims to provide a key cornerstone for the future + of L-PBF research: a universal benchmark for process + modelling. +
+
+
+
+ Community Focused Data Management +
+
+ We aim to provide a blueprint for future big data AM + projects, working with contributors to ensure this + benchmarking dataset is managed responsibly. +
+
+
+
+ Data Science, as a Core Discipline +
+
+ Our team includes expert data scientists, responsible for + managing data contributions and maximizing data impact. +
+
+
+
+
+
+ +
+
+
Open Science
+
+
FAIR, Transparent, and Open
+
+ The AM-D-Model benchmark project is designed with open + science in mind, following FAIR principles of transparency + and openness. +
+
+
+
+ Visibility, Accessibility and Impact +
+
+ By making these results open, we believe that visibility and + accessibility will maximize their impact on the L-PBF field. +
+
+
+
+ Serving the Research Community +
+
+ We aim to contribute to the L-PBF research community by + providing a universally accessible benchmark similar to + those driving other cutting-edge research fields. +
+
+
+
+
diff --git a/src/LandingPage/LandingPage.scss b/src/LandingPage/LandingPage.scss new file mode 100644 index 0000000..c047ec0 --- /dev/null +++ b/src/LandingPage/LandingPage.scss @@ -0,0 +1,27 @@ + .landing-page, + .landing-page * { + box-sizing: border-box; + } + + .landing-page { + background: var(--background, #090541); + height: 3860px; + width: 100vw; + position: absolute; + right: 0px; + left: 0px; + top: 0px; + overflow: hidden; + display: flex; + flex-direction: column; + } + + .landing-zone { + position: relative; + background-image: url("background-f-000143-10.png"); + background-size: 100% auto; + background-position: center; + background-repeat: no-repeat; + width: 100%; + overflow: hidden; + } diff --git a/src/LandingPage/LandingPage.svelte b/src/LandingPage/LandingPage.svelte index 05696e0..2d8a231 100644 --- a/src/LandingPage/LandingPage.svelte +++ b/src/LandingPage/LandingPage.svelte @@ -1,622 +1,21 @@
-
-
-
Data Repository
-
How to Contribute
-
-
Contact Us
-
-
-
-
-
-
-
- Benchmarking the future of metal 3d printing -
-
- AM-D-Model is an ESAFORM benchmark project aiming to - create the data that will drive the future of Laser - Powder-Bed-Fusion (L-PBF) research and innovation. By - connecting an international network of collaborators - AM-D-Model will create a comprehensive, open L-PBF - benchmark dataset. As part of our commitment to open - science, this dataset will be openly shared with the - research community. Our goal is to create a universal - benchmark for the L-PBF community, sparking the - collaboration and innovation that will build the future - of this technology. -
-
-
-
Get Involved!
-
-
-
-
-
-
-
-
-
-
Experts in L-PBF
-
-
- Experienced Research Teams -
-
- Our collaboration is comprised of expert L-PBF - researchers with years of experience in the field. -
-
-
-
International Excellence
-
- AM-D-Model contributors include scientists and engineers - from respected research institutions across Europe. -
-
-
-
- Backed by Research Associations -
-
- AM-D-Model is supported and funded by ESAFORM, a - globally recognized association of research leaders in - additive manufacturing. -
-
-
-
-
-
-
-
Data Driven Research
-
-
- Building the Future of L-PBF -
-
- AM-D-Model aims to provide a key cornerstone for the - future of L-PBF research: a universal benchmark for - process modelling. -
-
-
-
- Community Focused Data Management -
-
- We aim to provide a blueprint for future big data AM - projects, working with contributors to ensure this - benchmarking dataset is managed responsibly. -
-
-
-
- Data Science, as a Core Discipline -
-
- Our team includes expert data scientists, responsible - for managing data contributions and maximizing data - impact. -
-
-
-
-
-
- -
-
-
Open Science
-
-
- FAIR, Transparent, and Open -
-
- The AM-D-Model benchmark project is designed with open - science in mind, following FAIR principles of - transparency and openness. -
-
-
-
- Visibility, Accessibility and Impact -
-
- By making these results open, we believe that visibility - and accessibility will maximize their impact on the - L-PBF field. -
-
-
-
- Serving the Research Community -
-
- We aim to contribute to the L-PBF research community by - providing a universally accessible benchmark similar to - those driving other cutting-edge research fields. -
-
-
-
-
-
-
-
-
Get Involved!
-
-
-
Contact Us
-
-
-
Interested in the project?
-
-
-
-
Topic
-
Data Repository
-
How to Contribute
-
Contact Us
-
-
↥↥↥ Return to top ↥↥↥
-
AM-D-Model.eu
-
-
- -
-
- -
-
- -
-
- -
-
-
+ +
+ + +
- - diff --git a/src/LandingPage/NavigationFooter.scss b/src/LandingPage/NavigationFooter.scss new file mode 100644 index 0000000..c68f59d --- /dev/null +++ b/src/LandingPage/NavigationFooter.scss @@ -0,0 +1,110 @@ +.navigation-footer { + background: #ffffff; + height: 264px; + width: 100%; + overflow: hidden; +} + +.navigation-footer-site-name { + color: #000000; + text-align: left; + font-family: var(--body-font-family, "Assistant-Regular", sans-serif); + font-size: var(--body-font-size, 24px); + font-weight: var(--body-font-weight, 400); + position: absolute; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.navigation-footer-items { + display: flex; + flex-direction: column; + gap: var(--navigation-footer-spacing); + align-items: flex-end; + justify-content: center; + width: 187px; + position: absolute; +} + +.navigation-footer-topic { + color: #000000; + text-align: left; + font-family: "Assistant-Regular", sans-serif; + font-size: 24px; + font-weight: 400; + position: relative; + align-self: stretch; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.navigation-footer-link { + color: #454545; + text-align: left; + font-family: var(--body-font-family); + font-size: var(--body-font-size, 24px); + font-weight: var(--body-font-weight, 400); + position: relative; + align-self: stretch; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.navigation-footer-social-icon { + width: 24px; + height: 24px; + position: absolute; + left: 8px; + top: 8px; + overflow: visible; +} + +.navigation-footer-social-icons { + display: flex; + flex-direction: row; + gap: var(--spacing-xs, 8px); + align-items: flex-start; + justify-content: flex-start; + position: absolute; + left: 80px; + top: 176px; +} + +.navigation-footer-buttons-icon { + border-radius: 4px; + padding: 8px; + flex-shrink: 0; + width: 40px; + height: 40px; + position: relative; +} + +.navigation-footer-return { + color: rgba(69, 69, 69, 0.5); + text-align: left; + font-family: var(--small-text-font-family, "Inter-Medium", sans-serif); + font-size: var(--small-text-font-size, 16px); + line-height: var(--small-text-line-height, 150%); + font-weight: var(--small-text-font-weight, 500); + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.navigation-footer-divider { + margin-top: -1px; + border-style: solid; + border-color: #e6e6e6; + border-width: 1px 0 0 0; + width: 1280px; + height: 0px; + position: absolute; + left: 80px; + top: 1px; + transform-origin: 0 0; + transform: rotate(0deg) scale(1, 1); +} diff --git a/src/LandingPage/NavigationFooter.svelte b/src/LandingPage/NavigationFooter.svelte new file mode 100644 index 0000000..d261ea2 --- /dev/null +++ b/src/LandingPage/NavigationFooter.svelte @@ -0,0 +1,29 @@ + + +
+
+
Topic
+
Data Repository
+
How to Contribute
+
Contact Us
+
+
↥↥↥ Return to top ↥↥↥
+
AM-D-Model.eu
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
diff --git a/src/LandingPage/NavigationHeader.scss b/src/LandingPage/NavigationHeader.scss new file mode 100644 index 0000000..454baaa --- /dev/null +++ b/src/LandingPage/NavigationHeader.scss @@ -0,0 +1,51 @@ +.navigation-header { + position: relative; + height: 116.03px; + width: 100%; + overflow: hidden; +} + +.navigation-header-items { + display: flex; + flex-direction: row; + gap: var(--spacing-m, 48px); + align-items: center; + justify-content: flex-end; + position: absolute; + right: 79.79px; + top: 28px; +} + +.navigation-header-link { + color: var(--cpalettelight); + text-align: left; + font-family: var(--navigation-header-link-font-family); + font-size: var(--navigation-header-link-font-size); + font-weight: var(--navigation-header-link-font-weight); + text-decoration: underline; + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.navigation-header-button { + background: var(--cpalettelight); + border-radius: 8px; + padding: 14px 24px 14px 24px; + display: flex; + flex-direction: row; + gap: 8px; + align-items: center; + justify-content: center; + flex-shrink: 0; + position: relative; + box-shadow: var(--button-shadow-box-shadow, + 0px 1px 2px 0px rgba(0, 0, 0, 0.05)); +} + +.navigation-header-contact-us { + @extend .navigation-header-link; + color: var(--cpalettedark); + text-decoration: none; +} diff --git a/src/LandingPage/NavigationHeader.svelte b/src/LandingPage/NavigationHeader.svelte new file mode 100644 index 0000000..cdaa2cf --- /dev/null +++ b/src/LandingPage/NavigationHeader.svelte @@ -0,0 +1,13 @@ + + +
+
+
Data Repository
+
How to Contribute
+
+
Contact Us
+
+
+
diff --git a/src/LandingPage/Splash.scss b/src/LandingPage/Splash.scss new file mode 100644 index 0000000..e0900be --- /dev/null +++ b/src/LandingPage/Splash.scss @@ -0,0 +1,91 @@ +.splash { + position: relative; + width: 100%; + top: 0px; + height: 680px; +} + +.splash-page-title { + align-self: stretch; + flex-shrink: 0; + height: 492px; + position: relative; +} + +.splash-copy { + display: flex; + flex-direction: column; + gap: 40px; + align-items: flex-start; + justify-content: flex-start; + width: 892.53px; + height: 647.85px; + position: absolute; + left: 48.06px; + top: 227.77px; +} + +.splash-title { + color: var(--cpalettecomplimentary); + text-align: left; + font-family: var(--splash-title-font-family); + font-size: var(--splash-title-font-size); + font-size: 64px; + letter-spacing: -0.02em; + font-weight: var(--splash-title-font-weight); + font-weight: 700; + position: absolute; + left: 0px; + top: 0px; + width: 844px; +} + +.splash-body { + color: var(--cpalettecomplimentary); + text-align: left; + font-family: var(--splash-body-font-family); + font-size: var(--splash-body-font-size); + font-weight: var(--splash-body-font-weight); + position: absolute; + left: 0px; + top: 258px; + width: 844px; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.splash-button { + background: var(--background, #090541); + border-radius: 8px; + padding: 20px 32px 20px 32px; + display: flex; + flex-direction: row; + gap: 8px; + align-items: center; + justify-content: flex-start; + flex-shrink: 0; + position: relative; + box-shadow: var(--button-shadow-box-shadow, + 0px 1px 2px 0px rgba(0, 0, 0, 0.05)); +} + +.splash-get-involved { + color: var(--cpalettelight); + text-align: left; + font-family: "Assistant-Bold", sans-serif; + font-size: 24px; + font-weight: 700; + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.splash-bottom-blend { + background: var(--background, #090541); + width: 100%; + height: 33.31px; + top: 905.69px; + box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25); +} diff --git a/src/LandingPage/Splash.svelte b/src/LandingPage/Splash.svelte new file mode 100644 index 0000000..9ed077c --- /dev/null +++ b/src/LandingPage/Splash.svelte @@ -0,0 +1,28 @@ + + +
+
+
+
+ Benchmarking the future of metal 3d printing +
+
+ AM-D-Model is an ESAFORM benchmark project aiming to create the + data that will drive the future of Laser Powder-Bed-Fusion + (L-PBF) research and innovation. By connecting an international + network of collaborators AM-D-Model will create a comprehensive, + open L-PBF benchmark dataset. As part of our commitment to open + science, this dataset will be openly shared with the research + community. Our goal is to create a universal benchmark for the + L-PBF community, sparking the collaboration and innovation that + will build the future of this technology. +
+
+
+
Get Involved!
+
+
+
+