diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000000..13566b81b0 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/docusaurus.config.js b/docusaurus.config.js index a7bf85e85e..5fe75faf0d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -47,6 +47,9 @@ const config = { require.resolve('./src/css/custom.css'), require.resolve('./src/css/header.css'), require.resolve('./src/css/footer.css'), + require.resolve('./src/css/banner.css'), + require.resolve('./src/css/features.css'), + require.resolve('./src/css/about.css'), ], }, }), diff --git a/src/css/about.css b/src/css/about.css new file mode 100644 index 0000000000..fce456235c --- /dev/null +++ b/src/css/about.css @@ -0,0 +1,14 @@ +/** + * home page about related css template + */ + .about-container{ + display: flex; + justify-content: center; + align-items: center; + background-size: cover; + background-color: aqua; + height: 400px; + /* add container border to debug the layout + * border: 2px solid red; + */ + } \ No newline at end of file diff --git a/src/css/banner.css b/src/css/banner.css new file mode 100644 index 0000000000..f91755face --- /dev/null +++ b/src/css/banner.css @@ -0,0 +1,119 @@ +/** + * home page banner related css template + */ + + .banner-container { + display: flex; + justify-content: center; + align-items: center; + background-size: cover; + height: 400px; + /* add container border to debug the layout + * border: 2px solid red; + */ +} + +.overlay{ + display:flex; + justify-content: center; + align-items: center; + height: 100%; + width: 50%; +} + +.content-box { + font-family: Helvetica, sans-serif; + text-align:center; + max-width: 500px; + margin: auto; + /* add container border to debug the layout + * border: 2px solid blue; + */ +} + +.content-box h1 { + font-size: 60px; + color: #fff; +} + +.content-box p { + font-size: 20px; + color: #fff; +} + +.buttons-container { + display:flex; + justify-content: center; + /* add container border to debug the layout + * border: 2px solid green; + */ + +} + +.buttons-container button { + width: 126px; + height: 40px; + margin-right: 10px; + border: none; + border-radius: 4px; + font-size: 14px; + font-weight: bold; + cursor: pointer; +} + +.logo-container { + display: flex; + align-items: center; + margin: auto; + /* add container border to debug the layout + * border: 2px solid yellow; + */ + +} + +.logo-container img { + width: 223px; + height: 245px; +} + +/* responsive design for mobile */ +@media (max-width: 768px) { + .banner-container { + flex-direction: column; + text-align: center; + } + + .logo-container { + display:none; + } + + .content-box h1 { + font-size: 40px; + } + + .content-box p { + font-size: 14px; + } + + .buttons-container{ + margin-bottom:10px; + width:auto + } + .buttons-container button { + margin-bottom: 10px; + } + .buttons-container button:last-child { + margin-bottom: 0; + } +} + +@media (max-width: 480px) { + .buttons-container button { + width: 100px; + font-size: 14px; + } + + .logo-container { + display:none; + } +} \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 6c5bee300b..d4043a762b 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -24,3 +24,4 @@ --ifm-color-primary-lighter: #b1dd93; --ifm-color-primary-lightest: #cbe9b7; } + diff --git a/src/css/features.css b/src/css/features.css new file mode 100644 index 0000000000..7aabc74cf8 --- /dev/null +++ b/src/css/features.css @@ -0,0 +1,46 @@ +/** + * home page features related css template + */ + + .center-container { + display: flex; + justify-content: center; + align-items: flex-start; + min-height: 50vh; + } + + .features-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + margin: 20px; + } + + .features-container div { + display: flex; + flex-direction: column; + max-width: 800px; + width: 100%; + border: 2px solid #007BFF; + padding: 10px; + box-sizing: border-box; + text-align: center; + } + + .f1 { + max-width: 800px; + } + + .f2 { + max-width: 800px; + } + + .f3 { + max-width: 800px; + } + + .f4 { + max-width: 800px; + } + \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index 83fd295c86..a29b3a1b39 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,7 +1,8 @@ import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; -import Logo from '@site/static/img/ozone-logo.svg'; +import Logo from '@site/static/img/ozone-logo-hug.svg'; +import Banner from '@site/static/img/banner.png'; export default function Home() { const {siteConfig} = useDocusaurusContext(); @@ -10,30 +11,47 @@ export default function Home() { -
-
-
-
-

{siteConfig.title}

-

- {siteConfig.tagline} -
- TODO HDDS-9539 -

- -
-
- -
-
+
+
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+ + +
+
+ +
+
+
+ +
+

To-Do: about component

+

create about component in src/components as function and import to here

+
+ +
+
+
feature-1 +

create feature-1 component in src/components as function and import to here

+
+ +
feature-2 +

create feature-2 component in src/components as function and import to here

+
+ +
feature-3 +

create feature-3 component in src/components as function and import to here

+
+ +
feature-4 +

create feature-4 component in src/components as function and import to here

+
+
+
); } diff --git a/static/img/banner.png b/static/img/banner.png new file mode 100644 index 0000000000..7e2133946d Binary files /dev/null and b/static/img/banner.png differ diff --git a/static/img/ozone-logo-hug.svg b/static/img/ozone-logo-hug.svg new file mode 100644 index 0000000000..88230fe9e7 --- /dev/null +++ b/static/img/ozone-logo-hug.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +