From 8ade5db671d2b3f519ebc5ab509a756c321ee7f9 Mon Sep 17 00:00:00 2001 From: Nathan Vieira Marcelino Date: Tue, 5 Mar 2024 18:19:49 -0300 Subject: [PATCH] feat: first session --- .../HomepageCardsRowSession/index.tsx | 68 ----- .../HomepageCardsRowSession/styles.module.css | 75 ------ .../HomepageContactSession/index.tsx | 42 --- .../HomepageContactSession/styles.module.css | 78 ------ src/components/HomepageFeatures/index.tsx | 141 ---------- .../HomepageFeatures/styles.module.css | 69 ----- .../HomepageHeaderSession/index.tsx | 118 -------- .../HomepageHeaderSession/styles.module.css | 105 -------- .../HomepageProblemSession/index.tsx | 34 --- .../HomepageProblemSession/styles.module.css | 70 ----- src/pages/base.css | 30 +++ src/pages/index.css | 253 ++++++++++++++++++ src/pages/index.module.css | 0 src/pages/index.tsx | 103 +++++-- static/img/landing/github.svg | 9 + static/img/landing/green-piece-border.svg | 3 + 16 files changed, 381 insertions(+), 817 deletions(-) delete mode 100644 src/components/HomepageCardsRowSession/index.tsx delete mode 100644 src/components/HomepageCardsRowSession/styles.module.css delete mode 100644 src/components/HomepageContactSession/index.tsx delete mode 100644 src/components/HomepageContactSession/styles.module.css delete mode 100644 src/components/HomepageFeatures/index.tsx delete mode 100644 src/components/HomepageFeatures/styles.module.css delete mode 100644 src/components/HomepageHeaderSession/index.tsx delete mode 100644 src/components/HomepageHeaderSession/styles.module.css delete mode 100644 src/components/HomepageProblemSession/index.tsx delete mode 100644 src/components/HomepageProblemSession/styles.module.css create mode 100644 src/pages/base.css create mode 100644 src/pages/index.css delete mode 100644 src/pages/index.module.css create mode 100644 static/img/landing/github.svg create mode 100644 static/img/landing/green-piece-border.svg diff --git a/src/components/HomepageCardsRowSession/index.tsx b/src/components/HomepageCardsRowSession/index.tsx deleted file mode 100644 index 0906692..0000000 --- a/src/components/HomepageCardsRowSession/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - Svg: React.ComponentType>; - description: JSX.Element; -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Open source', - Svg: require('@site/static/img/undraw_open_source.svg').default, - description: ( - <> - Domino is an open source project, which means that anyone can contribute to its development and use it for free. - - ), - }, - { - title: 'Powered by Apache Airflow', - Svg: require('@site/static/img/apache-airflow-logo.svg').default, - description: ( - <> - Domino is powered by Apache Airflow for top-tier workflows scheduling and monitoring. - - ), - }, - { - title: 'Kubernetes native', - Svg: require('@site/static/img/undraw_server_cluster.svg').default, - description: ( - <> - Domino is Kubernetes native, with every task running in a dedicated pod. - This guarantees scalability and resilience to your workflows. - - ), - }, -]; - -function Feature({ title, Svg, description }: FeatureItem) { - return ( -
- -
{/* Add a black line */} -

{title}

-

{description}

-
- ); -} - -export default function HomepageCardsRowSession(): JSX.Element { - return ( -
-

- Made to be open, reliable and scalable -

-
-
- {FeatureList.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/src/components/HomepageCardsRowSession/styles.module.css b/src/components/HomepageCardsRowSession/styles.module.css deleted file mode 100644 index 59a63fd..0000000 --- a/src/components/HomepageCardsRowSession/styles.module.css +++ /dev/null @@ -1,75 +0,0 @@ -.textTitle { - font-size: 2rem; - font-weight: 800; - text-align: center; - margin-bottom: 2rem; - max-width: 100%; -} - -.cardContainer { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - overflow-x: auto; -} - -.card { - width: 300px; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding: 1rem; - margin: 1rem; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6); - background-color: white; - color: black; - border-width: 0; -} - -.cardTitle { - font-size: 1.2rem; - font-weight: bold; - color: black; -} - -.line { - width: 100%; - height: 2px; - background-color: #000; - margin: 1rem 0; -} - - -.features { - padding-top: 2rem; - padding-bottom: 2rem; - background-color: #5c6472; -} - -.featureSvg { - height: 100px; - width: auto; - object-fit: contain; - margin-bottom: 2rem; -} - -/* Responsive styles */ -@media (max-width: 1200px) { - .cardContainer { - justify-content: space-evenly; - /* Adjust spacing for medium screens */ - } -} - -@media (max-width: 768px) { - .cardContainer { - justify-content: center; - /* Center cards on smaller screens */ - } - - .card { - margin: 1rem 0.5rem; - /* Adjust margins for smaller screens */ - } -} \ No newline at end of file diff --git a/src/components/HomepageContactSession/index.tsx b/src/components/HomepageContactSession/index.tsx deleted file mode 100644 index 4c800e6..0000000 --- a/src/components/HomepageContactSession/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import styles from './styles.module.css'; - -export default function HomepageContactSession(): JSX.Element { - const imageUrl = require('@site/static/img/landing/get-in-touch-transparent.png').default; - - return ( -
-

- Get in touch with the maintainers -

-
- Get in touch -
-

- Are you interested in using Domino for your business? - We would love to hear from you! You can reach us at: -

- -
-
-
- ); -} diff --git a/src/components/HomepageContactSession/styles.module.css b/src/components/HomepageContactSession/styles.module.css deleted file mode 100644 index ca21364..0000000 --- a/src/components/HomepageContactSession/styles.module.css +++ /dev/null @@ -1,78 +0,0 @@ -.contactSession { - padding: 2rem; - background-color: rgb(255, 255, 255); - color: black; -} - -.textTitle { - font-size: 2rem; - font-weight: 800; - text-align: center; - margin-bottom: 2rem; - max-width: 100%; -} - -.contentContainer { - display: flex; - align-items: center; - justify-content: space-between; -} - -.featureImg { - max-width: 50%; -} - -.textContent { - max-width: 45%; - margin-left: auto; - margin-right: auto; - text-align: left; - display: flex; - flex-direction: column; - justify-content: center; -} - -.liContact { - text-align: left; -} - - -.socialLinks { - text-align: left; - font-size: large; -} - -.socialLinks li { - text-align: left; - margin-bottom: 10px; -} - -.socialLinks a { - text-decoration: none; - color: black; - display: flex; - align-items: center; -} - -.socialLinks i { - margin-left: 5px; -} - -@media (max-width: 768px) { - - .contentContainer { - flex-direction: column; - align-items: flex-start; - } - - .featureImg, - .textContent { - max-width: 100%; - } - - .textContent { - text-align: left; - margin: 20px 0; - } - -} \ No newline at end of file diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx deleted file mode 100644 index a31717b..0000000 --- a/src/components/HomepageFeatures/index.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import React from 'react'; -import styles from './styles.module.css'; - -type FeatureItem = { - title: string; - imageUrl: string; // Use a common imageUrl for both PNG and SVG - description: JSX.Element; - url: string; // Add a URL property for the link -}; - -const FeatureList: FeatureItem[] = [ - { - title: 'Visual data workflows for everyone', - imageUrl: require('@site/static/img/landing/visual-workflows-transparent.png').default, - description: ( - <> -

- Domino brings an intuitive Graphical User Interface that facilitates creating, - editing and monitoring any type of workflow, including integrations with: -

- - - ), - url: '/docs/domino_components/domino_components_gui', - }, - { - title: 'Focus on reusability and reproducibility', - imageUrl: require('@site/static/img/landing/pieces-sharing-transparent.png').default, - description: ( - <> -

- Domino proposes a standard for writing and publishing functional Pieces - which makes them reusable and reproducible, and can be easily shared with the community. -

- - - ), - url: '/docs/pieces', - }, - { - title: 'Rich real-time monitoring', - imageUrl: require('@site/static/img/landing/workflow-monitoring-transparent.png').default, - description: ( - <> -

- Experience a clean and user-friendly interface for monitoring workflows results, - including logs and rich reports with images, interactive graphics, and tables. -

- - - ), - url: '/docs/domino_components/domino_components_gui', - }, - { - title: 'Collaborate with teams and community', - imageUrl: require('@site/static/img/landing/collaborative-transparent.png').default, - description: ( - <> -

- Collaboration is at the heart of Domino. From your internal team to the whole community, you can easily share your work - and get help and inspiration from others. -

- - - ), - url: '/docs/domino_components/domino_components_gui', - }, -]; - -function Feature({ title, imageUrl, description, isImageRight, url }: { isImageRight: boolean, url: string } & FeatureItem) { - const rowStyle = { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - marginBottom: '2.5rem', - }; - - return ( -
- {isImageRight ? ( -
-
-

{title}

-
{description}
-
-
- ) : null} - -
-
- {title} -
-
- - {!isImageRight ? ( -
-
-

{title}

-
{description}
-
-
- ) : null} -
- ); -} - -export default function HomepageFeatures(): JSX.Element { - return ( -
-
- <> -

- Build with Domino - advanced data and AI tools at your fingertips! -

- - {FeatureList.map((props, idx) => ( - - ))} - -
-
- ); -} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css deleted file mode 100644 index ffe4352..0000000 --- a/src/components/HomepageFeatures/styles.module.css +++ /dev/null @@ -1,69 +0,0 @@ -.features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; - background-color: #f0f0f0; - color: black; -} - -.featureImage { - height: 300px; - width: 300px; -} - -.featureTitle { - text-decoration: none; - color: black; - cursor: pointer; -} - -.checkmark { - color: green; - margin-right: 5px; -} - -.ulFeatureList { - list-style-type: none; - /* Remove default bullets */ - padding-left: 0; - /* Remove default padding */ -} - - -/* Responsive styles */ -@media (max-width: 700px) { - .features .row { - flex-direction: column; - align-items: center; - margin-left: 0; - margin-right: 0; - } - - .features .col { - /* Adjust column width and padding for smaller screens */ - width: 100%; - padding: 0 1rem; - } - - .features .col--5 { - /* Remove specific styling for columns */ - margin-bottom: 1rem; - } - - .featureImage { - /* Resize image for smaller screens */ - height: auto; - width: 100%; - max-width: 300px; - } -} - -@media (max-width: 480px) { - - /* Further adjustments for very small screens, if necessary */ - .featureImage { - max-width: 200px; - /* Adjust image size for very small screens */ - } -} \ No newline at end of file diff --git a/src/components/HomepageHeaderSession/index.tsx b/src/components/HomepageHeaderSession/index.tsx deleted file mode 100644 index f293f99..0000000 --- a/src/components/HomepageHeaderSession/index.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react'; -import { Icon } from '@iconify/react'; -import Link from '@docusaurus/Link'; - -import styles from './styles.module.css'; - - -export default function HomepageHeader(): JSX.Element { - return ( -
-
-
-
- Build amazing ideas, -
-
-
- piece  -
-
- by  -
-
- piece -
-
- -
- - - Get Started with Domino - -
- -
- - - Get in touch with us - -
-
- -
- Domino - Build amazing ideas, Piece by Piece -
-
-
- ); -} \ No newline at end of file diff --git a/src/components/HomepageHeaderSession/styles.module.css b/src/components/HomepageHeaderSession/styles.module.css deleted file mode 100644 index 54b049b..0000000 --- a/src/components/HomepageHeaderSession/styles.module.css +++ /dev/null @@ -1,105 +0,0 @@ -.heroBanner { - padding: 1.5rem 0; - text-align: center; - position: relative; - overflow: hidden; - color: black; -} - -.hero__subtitle { - font-size: 3rem; - font-weight: 800; - font-family: 'Rethink-Sans-Bold'; - -webkit-text-fill-color: #eeeeeef5 !important; - -webkit-text-stroke: 1px !important; - /* backdrop-filter: blur(1px) saturate(90%); */ - /* padding-top: 0; */ - margin: 0; -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; - margin-top: 1rem; -} - -/* Ensure side-by-side layout on larger screens */ -.contentBlock { - max-width: 50%; -} - -.imageBlock { - margin-top: 2rem; - margin-bottom: 2rem; - margin-right: 2rem; - margin-left: 2rem; - max-width: 50%; -} - - -/* fade in effects */ -@keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -.hero__subtitle__fadein { - font-size: 3vw; - font-weight: 800; - font-family: 'Rethink-Sans-Bold'; - -webkit-text-fill-color: #eeeeeef5 !important; - /* backdrop-filter: blur(1px) saturate(90%); */ - /* padding-top: 0; */ - margin: 0; - animation-name: fadeIn; - animation-fill-mode: forwards; - opacity: 0; -} - -@media screen and (max-width: 1200px) { - .container { - /* Stack elements vertically on small screens */ - flex-direction: column; - align-items: center; - /* Center-align items for a cleaner look */ - } - - /* Ensure both content and image take full width on smaller screens */ - .contentBlock, - .imageBlock { - max-width: 100%; - width: 100%; - } - - .contentBlock { - margin-top: 2rem; - } - - .hero__subtitle__fadein { - font-size: 8vw; - /* Adjust font size for visibility on small screens */ - } - - .heroBanner { - padding: 1rem; - /* Reduced padding */ - } - - /* Reorganize layout for smaller screens */ - .container { - flex-direction: column; - } - - /* Adjust image styles for small screens */ - .container img { - max-width: 100%; - margin-top: 2rem; - /* Add space above the image */ - } -} \ No newline at end of file diff --git a/src/components/HomepageProblemSession/index.tsx b/src/components/HomepageProblemSession/index.tsx deleted file mode 100644 index c039a4b..0000000 --- a/src/components/HomepageProblemSession/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import styles from './styles.module.css'; - -export default function HomepageProblemSession(): JSX.Element { - const imageUrl = require('@site/static/img/landing/gap.png').default; - - return ( -
-

- Close the gap between your ideas and their realization -

-
- Gap between worlds -
-

- Most professionals face barriers when trying to implement their ideas using data and AI. - At the same time, data scientists and AI experts continuously produce solutions that are often underutilized. -

-
    -
  • ❌ Tools typically require basic programming skills from the start
    • -
  • ❌ Integrating multiple tools demand solid coding expertise
    • -
  • ❌ People don't know where to find the right tools to implement their ideas
    • -
  • ❌ Pieces of code that would be useful to many, get buried in code repositories serving few
    • -
  • ❌ There's no visual interface to most of that code
    • -
-

- ✅ Domino is here to empower individuals with access to state-of-the-art tools, - bridging the gap between visionaries and data/AI expertise. -

-
-
-
- ); -} diff --git a/src/components/HomepageProblemSession/styles.module.css b/src/components/HomepageProblemSession/styles.module.css deleted file mode 100644 index 6dc4b53..0000000 --- a/src/components/HomepageProblemSession/styles.module.css +++ /dev/null @@ -1,70 +0,0 @@ -.problemSection { - padding: 20px; - background-color: white; - color: black; -} - -.contentContainer { - display: flex; - align-items: center; - /* Keeps the image and text vertically aligned */ - justify-content: space-between; -} - -.featureImg { - max-width: 50%; - height: auto; -} - -.textTitle { - font-size: 2rem; - font-weight: 800; - text-align: center; - margin-bottom: 2rem; - max-width: 100%; -} - -.textContent { - max-width: 45%; - margin-left: auto; - margin-right: auto; - text-align: left; - display: flex; - flex-direction: column; - justify-content: center; -} - -.bullets { - list-style-type: none; - padding-left: 0; -} - -/* Responsive styles */ -@media (max-width: 768px) { - .contentContainer { - flex-direction: column; - align-items: center; - /* Stack image and text vertically */ - } - - .featureImg, - .textContent { - max-width: 100%; - margin: 0 0 20px 0; - /* Adjust margins for smaller screens */ - } - - .bullets { - text-align: left; - } -} - -@media (max-width: 480px) { - - /* Further adjustments for very small screens */ - .textContent h2, - .textContent p { - font-size: normal; - /* Adjust font sizes if necessary */ - } -} \ No newline at end of file diff --git a/src/pages/base.css b/src/pages/base.css new file mode 100644 index 0000000..de65b24 --- /dev/null +++ b/src/pages/base.css @@ -0,0 +1,30 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + outline: 0; +} + +#root { + min-height: 100vh; + max-height: 100vh; +} + +body{ + -webkit-font-smoothing: antialiased; + transition: background 0.2s linear; +} +body, input, button { + font-family: "Rethink-Sans", sans-serif; + font-size: 16px; +} + +h1 { + font-family: 'Rethink-Sans', sans-serif; + font-size: 2.5rem; +} + +button { + cursor: pointer; + background-color: transparent; +} \ No newline at end of file diff --git a/src/pages/index.css b/src/pages/index.css new file mode 100644 index 0000000..7168a90 --- /dev/null +++ b/src/pages/index.css @@ -0,0 +1,253 @@ +html { + background-color: #f0f0f0; +} + +#navbar { + position: fixed; + top: 0; + + width: 100%; + height: 144px; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +#navbar>#logo { + margin-left: 70px; + height: 143px; +} + +#navbar>#central-links { + list-style: none; + display: flex; + flex-direction: row; + gap: calc(50px); +} + +#navbar>#right-buttons { + justify-self: flex-end; + margin-right: 115px; + list-style: none; + display: flex; + flex-direction: row; + gap: calc(8px); +} + +ul { + padding: 0px; + margin-bottom: 0; +} + +li { + display: flex; + align-items: center; + justify-content: center; +} + +li>a { + font-size: 20px; + font-weight: 500; + color: #101820; +} + +a#github { + background: none; + border: none; + padding: 0; + cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; +} + +button { + border: none; + padding: 0; + cursor: pointer; +} + +button#primary { + background: var(--ifm-color-primary); + color: #fff; + + width: 115px; + height: 32px; + border-radius: 8px; +} + +button#primary:hover { + background: var(--ifm-color-primary-dark); +} + +button#secondary { + background: #101820; + color: #fff; + + width: 115px; + height: 32px; + border-radius: 8px; +} + +button#secondary:hover { + background: #223344; +} + +button#tertiary { + background: transparent; + color: #101820; + border: 1px solid #101820; + + width: 115px; + height: 32px; + border-radius: 8px; +} + +button#tertiary:hover { + box-shadow: 1px solid gray; +} + +section:first-of-type { + margin-top: 144px; +} + +section { + display: inline-block; + + height: calc(100vh - 144px); + width: 100%; + + padding: 0 112px; +} + +section#section-1 { + height: calc(100vh - 144px - 64px); +} + +div#container { + display: flex; + flex-direction: row; +} + +div#title-container { + margin-top: 80px; + + width: 710px; + height: 333px; +} + +h1#title { + display: flex; + flex-direction: column; + + font-style: normal; + font-weight: 400; + font-size: 96px; + line-height: 111px; + color: #101820; +} + +h1#title::after { + content: ''; + flex: 1; + margin-left: 1rem; + height: 1px; +} + +i#piece { + color: #00B140; + font-style: italic; + font-weight: 500; +} + +div#subtitle-container { + + margin-top: 20px; + + width: 662px; + height: 93px; + + font-family: 'Rethink Sans'; + font-style: normal; + font-weight: 400; + font-size: 26px; + line-height: 125%; + + color: #101820; +} + +div#button-container { + margin-top: 64px; +} + +div#button-container > button { + width: 273px; + height: 54px; + + font-size: 36px; + font-weight: 500; + margin-right: 36px; +} + +div#gif-container { + flex: 1; + width: 100%; +} + +div#gif-container > div#rectangle { + margin-top: 88px; + + position: relative; + width: 1010px; + height: 564px; + + display: inline-block; + /* 3B3A3B */ + background: #F6F6F6; + box-shadow: 124px 27px 51px rgba(0, 0, 0, 0.01), 70px 15px 43px rgba(0, 0, 0, 0.05), 31px 7px 32px rgba(0, 0, 0, 0.09), 8px 2px 17px rgba(0, 0, 0, 0.1); + border-radius: 29px 29px 8px 8px; + +} + /* Ellipse 1 */ +div#rectangle > div#ellipse { + position: absolute; + border-radius: 50%; + width: 12.6px; + height: 12.6px; +} + +div#ellipse.red { + top: 14px; + left: 24px; + background: #FF5E57; +} +div#ellipse.yellow { + top: 14px; + left: 44px; + background: #FEBB2D; +} +div#ellipse.green { + top: 14px; + left: 64px; + background: #28C840; +} + +div#rectangle > img#gif { + width: 995px; + height: 515px; + + border-radius: 4px; + + margin-top: 40px; + margin-left: 7px; +} + +section#section-2 { + padding: 0; +} +section#section-3 { + background-color: #00B140; +} \ No newline at end of file diff --git a/src/pages/index.module.css b/src/pages/index.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 212f1e9..f1b69f3 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,26 +1,95 @@ import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import HomepageHeader from '@site/src/components/HomepageHeaderSession'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; -import HomepageCardsRowSession from '../components/HomepageCardsRowSession'; -import HomepageProblemSession from '../components/HomepageProblemSession'; -import HomepageContactSession from '../components/HomepageContactSession'; - +import "./base.css" +import "./index.css" export default function Home(): JSX.Element { - const { siteConfig } = useDocusaurusContext(); + const { siteConfig: { title } } = useDocusaurusContext(); return ( - - +
+
- - - - +
+
+
+ +
+

+ Build + amazing ideas, + piece by piece. +

+
+ +
+

You have the idea, Domino simplifies the process through an intuitive workflow, no coding required, and the result is a seamless journey from concept to reality.

+
+ +
+ + +
+
+ +
+
+
+
+
+ +
+
+
+ + +
+
+ + +
+
Section 3
- +
); } diff --git a/static/img/landing/github.svg b/static/img/landing/github.svg new file mode 100644 index 0000000..1dd69f0 --- /dev/null +++ b/static/img/landing/github.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/static/img/landing/green-piece-border.svg b/static/img/landing/green-piece-border.svg new file mode 100644 index 0000000..5daebf4 --- /dev/null +++ b/static/img/landing/green-piece-border.svg @@ -0,0 +1,3 @@ + + +