diff --git a/.env b/.env new file mode 100644 index 00000000..3bbd0684 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +MAILCHIMP_URL=https://3dstreet.us6.list-manage.com/subscribe/post?u=01ce9902276fa6ad96be57ac6&id=9a18fdd9f4&f_id=006e03e2f0 \ No newline at end of file diff --git a/docusaurus.config.js b/docusaurus.config.js index 469496b4..0bfc00e3 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,144 +1,160 @@ // @ts-check // Note: type annotations allow type checking and IDEs autocompletion -const {themes} = require('prism-react-renderer'); +const { themes } = require("prism-react-renderer"); const lightTheme = themes.github; const darkTheme = themes.dracula; +require("dotenv").config(); + /** @type {import('@docusaurus/types').Config} */ const config = { - title: '3DStreet', - tagline: 'Safer street visualization tools', - url: 'https://3dstreet.org', - baseUrl: '/', - onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'warn', - favicon: 'img/favicon.ico', + title: "3DStreet", + tagline: "Safer street visualization tools", + url: "https://3dstreet.org", + baseUrl: "/", + onBrokenLinks: "throw", + onBrokenMarkdownLinks: "warn", + favicon: "img/favicon.ico", // GitHub pages deployment config. // If you aren't using GitHub pages, you don't need these. - organizationName: '3dstreet', // Usually your GitHub org/user name. - projectName: '3dstreet-docs', // Usually your repo name. + organizationName: "3dstreet", // Usually your GitHub org/user name. + projectName: "3dstreet-docs", // Usually your repo name. // Even if you don't use internalization, you can use this field to set useful // metadata like html lang. For example, if your site is Chinese, you may want // to replace "en" with "zh-Hans". i18n: { - defaultLocale: 'en', - locales: ['en'], + defaultLocale: "en", + locales: ["en"], + }, + customFields: { + mailchimpUrl: process.env.MAILCHIMP_URL, }, markdown: { mermaid: true, }, presets: [ [ - 'classic', + "classic", /** @type {import('@docusaurus/preset-classic').Options} */ ({ - blog: { - path: 'blog', - routeBasePath: 'blog', - }, + // blog: { + // path: "blog", + // routeBasePath: "blog", + // }, + blog: false, docs: { - sidebarPath: require.resolve('./sidebars.js'), + sidebarPath: require.resolve("./sidebars.js"), // Please change this to your repo. // Remove this to remove the "edit this page" links. - editUrl: - 'https://github.com/3dstreet/3dstreet-docs/tree/main/', + editUrl: "https://github.com/3dstreet/3dstreet-docs/tree/main/", }, theme: { - customCss: require.resolve('./src/css/custom.css'), + customCss: require.resolve("./src/css/styles.css"), }, }), ], ], + plugins: [ + // Use custom blog plugin + [ + "./src/plugins/blog-plugin.js", + { + id: "blog", + routeBasePath: "blog", + path: "./blog", + }, + ], + ], themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ colorMode: { - defaultMode: 'dark', + defaultMode: "dark", disableSwitch: false, respectPrefersColorScheme: false, }, navbar: { - title: 'Home', + title: "Home", logo: { - alt: '3DStreet Logo', - src: 'img/logo-black.svg', - srcDark: "img/logo.svg" + alt: "3DStreet Logo", + src: "img/logo-black.svg", + srcDark: "img/logo.svg", }, items: [ { - type: 'doc', - docId: 'index', - position: 'left', - label: 'Documentation', + type: "doc", + docId: "index", + position: "left", + label: "Documentation", }, { - href: '/#scenes', - label: 'Gallery', - position: 'left', + href: "/#scenes", + label: "Gallery", + position: "left", }, - {to: 'blog', label: 'Blog', position: 'left'}, // or position: 'right' + { to: "blog", label: "Blog", position: "left" }, // or position: 'right' { - href: 'https://3dstreet.app', - label: 'Launch 3DStreet App', - position: 'right', + href: "https://3dstreet.app", + label: "Launch 3DStreet App", + position: "right", }, ], }, footer: { - style: 'dark', + style: "dark", links: [ { - title: '3DStreet', + title: "3DStreet", items: [ { - label: 'About 3DStreet', - to: '/docs/category/about-3dstreet/', - }, + label: "About 3DStreet", + to: "/docs/category/about-3dstreet/", + }, { - label: 'Contact Sales', - href: 'https://us6.list-manage.com/contact-form?u=01ce9902276fa6ad96be57ac6&form_id=3f024b297f2177befa87b5ca5e9d45cc', + label: "Contact Sales", + href: "https://us6.list-manage.com/contact-form?u=01ce9902276fa6ad96be57ac6&form_id=3f024b297f2177befa87b5ca5e9d45cc", }, ], }, { - title: 'Community', + title: "Community", items: [ { - label: 'Discord', - href: 'https://discord.gg/VN242sx9qu', + label: "Discord", + href: "https://discord.gg/VN242sx9qu", }, { - label: 'Twitter', - href: 'https://twitter.com/3dstreetapp', + label: "Twitter", + href: "https://twitter.com/3dstreetapp", }, { - label: 'LinkedIn', - href: 'https://www.linkedin.com/company/3dstreet/', + label: "LinkedIn", + href: "https://www.linkedin.com/company/3dstreet/", }, { - label: 'Mastadon', - href: 'https://urbanists.social/@3dstreet', - } + label: "Mastadon", + href: "https://urbanists.social/@3dstreet", + }, ], }, { - title: 'GitHub Repositories', + title: "GitHub Repositories", items: [ { - label: '3DStreet Core (Parser and Viewer)', - href: 'https://github.com/3dstreet/3dstreet', + label: "3DStreet Core (Parser and Viewer)", + href: "https://github.com/3dstreet/3dstreet", }, { - label: '3DStreet Editor', - href: 'https://github.com/3dstreet/3dstreet-editor', + label: "3DStreet Editor", + href: "https://github.com/3dstreet/3dstreet-editor", }, { - label: '3DStreet Assets', - href: 'https://github.com/3dstreet/3dstreet-assets-source', + label: "3DStreet Assets", + href: "https://github.com/3dstreet/3dstreet-assets-source", }, ], }, diff --git a/package-lock.json b/package-lock.json index 59d6ef35..430b572b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,11 +16,13 @@ "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-mailchimp-subscribe": "^2.1.3", "react-twitter-widgets": "^1.11.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.0.1", - "@docusaurus/types": "3.0.1" + "@docusaurus/types": "3.0.1", + "dotenv": "^16.4.5" }, "engines": { "node": ">=18.0" @@ -6208,6 +6210,18 @@ "node": ">=8" } }, + "node_modules/dotenv": { + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -8468,6 +8482,27 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==", + "dependencies": { + "debug": "^2.1.3" + } + }, + "node_modules/jsonp/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/jsonp/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -13021,6 +13056,19 @@ "webpack": ">=4.41.1 || 5.x" } }, + "node_modules/react-mailchimp-subscribe": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/react-mailchimp-subscribe/-/react-mailchimp-subscribe-2.1.3.tgz", + "integrity": "sha512-ZRuPZMnX/9pHQLnAQavsgB5xIF+gNqjNCCq1vvTs23cn+93W2oOp17qjg3LpDBEt1HJi6IHXMwpKXn0taY8FHw==", + "dependencies": { + "jsonp": "^0.2.1", + "prop-types": "^15.5.10", + "to-querystring": "^1.0.4" + }, + "peerDependencies": { + "react": ">=15" + } + }, "node_modules/react-router": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", @@ -14616,6 +14664,11 @@ "node": ">=4" } }, + "node_modules/to-querystring": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/to-querystring/-/to-querystring-1.2.0.tgz", + "integrity": "sha512-V4qvlRNOltdNxvWGuDS71sNMH6FtFNx3GP967WT8gb6xzi4thJTUfogIln9hvz1ZmWcm9hY35LklMexo0YVHdg==" + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -20282,6 +20335,12 @@ } } }, + "dotenv": { + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "dev": true + }, "duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -21910,6 +21969,29 @@ "universalify": "^2.0.0" } }, + "jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha512-pfog5gdDxPdV4eP7Kg87M8/bHgshlZ5pybl+yKxAnCZ5O7lCIn7Ixydj03wOlnDQesky2BPyA91SQ+5Y/mNwzw==", + "requires": { + "debug": "^2.1.3" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + } + } + }, "keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -24702,6 +24784,16 @@ "@babel/runtime": "^7.10.3" } }, + "react-mailchimp-subscribe": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/react-mailchimp-subscribe/-/react-mailchimp-subscribe-2.1.3.tgz", + "integrity": "sha512-ZRuPZMnX/9pHQLnAQavsgB5xIF+gNqjNCCq1vvTs23cn+93W2oOp17qjg3LpDBEt1HJi6IHXMwpKXn0taY8FHw==", + "requires": { + "jsonp": "^0.2.1", + "prop-types": "^15.5.10", + "to-querystring": "^1.0.4" + } + }, "react-router": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", @@ -25888,6 +25980,11 @@ "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==" }, + "to-querystring": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/to-querystring/-/to-querystring-1.2.0.tgz", + "integrity": "sha512-V4qvlRNOltdNxvWGuDS71sNMH6FtFNx3GP967WT8gb6xzi4thJTUfogIln9hvz1ZmWcm9hY35LklMexo0YVHdg==" + }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", diff --git a/package.json b/package.json index 7a55b8fa..f980360e 100644 --- a/package.json +++ b/package.json @@ -22,11 +22,13 @@ "prism-react-renderer": "^2.3.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-mailchimp-subscribe": "^2.1.3", "react-twitter-widgets": "^1.11.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.0.1", - "@docusaurus/types": "3.0.1" + "@docusaurus/types": "3.0.1", + "dotenv": "^16.4.5" }, "browserslist": { "production": [ diff --git a/src/components/Home/index.js b/src/components/Home/index.js new file mode 100644 index 00000000..01435dbc --- /dev/null +++ b/src/components/Home/index.js @@ -0,0 +1,631 @@ +import React from "react"; + +import { Button, Input } from ".."; +import { + ArrowIcon, + DiscordIcon, + DiscordIcon2, + GithubIcon, + LinkedInIcon, + MastodonIcon, + PiechartIcon, + XIcon, + XIcon2, +} from "../../icons"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; + +export default function Home({ recentPosts }) { + const { + siteConfig: { + themeConfig: { + footer: { links: footerLinks }, + }, + }, + } = useDocusaurusContext(); + + return ( + <> + + + + 3DStreet - Open-source 3D street editor + + {/* SITEMAP */} + + + {/* FONTS */} + + + + + + {/* HTML */} +
+ +
+ + {/* HEADER SECTION */} +
+
+
+ + logo + +
+
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
+
+ +
+
+ +
+ + +
+ +
+
+ + + {/* MAIN SECTION */} +
+
+
+

+ Design and envision safer, greener streets, together. +

+

+ 3DStreet is a revolutionary tool that enables you to unleash + your creativity and design unique streets that not only stand + out visually but also make a tangible impact on creating a safer + and greener world. +

+ +
+
+
+
+ + {/* OVERVIEW SECTION */} + {/*
+

3DSTREET OVERVIEW

+ +
*/} + +
+ {/* VISION SECTION */} +
+

VISION

+

+ We can change our world for the better through safer, greener + streets. +

+
+ + {/* STATISTICS SECTION */} +
+

STATISTICS

+
+
+ +
+

52%

+

+ Over half of all car trips in the US are less than 3 miles - + an ideal distance for green alternatives such as walking, + biking, and transit. +

+ + US Bureau of Transportation Statistics, 2022 Report + +
+
+
+ +
+

80%

+

+ From the number of people interested in, but not using, + active mobility, 80% would be willing to bike on streets + with a protected or completely separated bike lane. +

+ + NACTO Report, 2016 + +
+
+
+ +
+

32%

+

+ Nearly one-third of the population (32%) is dissatisfied + with their community designs for making biking safe. +

+ + US Bureau of Transportation Statistics, 2012 Report + +
+
+
+
+ + {/* MISSION SECTION */} +
+

mission

+

+ Our goal is to empower the world with simple tools that enable + anyone to create a safer and greener future, one street at a time. +

+
+
+ + {/* FEATURES SECTION */} +
+
+

How are we different?

+ +
+
+
+
+

One unique simple tool

+

+ Our powerful yet user-friendly 3DStreet Editor tool allows + you to effortlessly bring your street design ideas to + life. With intuitive features and a straightforward + interface, you can easily create stunning and impactful + street designs that contribute to a safer and greener + world. +

+
+
+ feature-preview +
+ +
+
+
+

Infinitely collaborative software

+

+ Collaboration is at the heart of our 3DStreet tool. + Connect and work with others, whether it's fellow + designers, community members, or city planners. Share + ideas, gather feedback, find inspiration, and collectively + create street designs that truly reflect the needs and + aspirations of your community. +

+
+
+ feature-preview +
+ +
+
+
+

Batteries included

+

+ Kickstart your original designs with 3DStreet's built-in + library of over 200 unique and accurately scaled urban 3D + models such as pedestrians, vehicles, buildings, street + objects, and more. Automated smart Layers accelerate the + creation of street elements by combining pre-made segments + for sidewalks, parking stalls, bike lanes, railways, BRT + corridors, and more. +

+
+
+ feature-preview +
+ +
+
+
+

Open and transparent

+

+ Unlike most geospatial and civil engineering design + software, 3DStreet is open-source and user-created. + Instead of locking you into proprietary formats, 3DStreet + plays nicely with others to allow importing and exporting + standards-compliant formats such as glTF, SVG, JSON, JPEG, + PNG, Streetmix, and more. +

+
+
+ feature-preview +
+
+
+
+ + {/* BLOG SECTION */} +
+
+
+
+

Latest blog posts

+

+ {/* Latest blog posts associated with 3DStreet */} +

+ +
+ {recentPosts.length && + recentPosts.map( + ({ title, description, authors, imageURL, blogURL }, idx) => ( + + blog-preview +
+
+
+

+ author-avatar + {`${authors[0].name} ${ + authors.length > 1 ? "and others" : "" + }`} +

+
+

{title}

+
+
+

{description}

+
+
+ ) + )} +
+
+
+ + {/* SOCIALS SECTION */} +
+ {/* bg items */} +
+
+
+
+
+
+
+
+ +
+ {/* bg items */} + +
+

How to get involved

+

+ A safer greener world begins with you. Join our thriving, + growing community to get involved. Partner with other like minded + individuals or blaze your own trail. The only limit is your + imagination. +

+
+ +
+
+
+
+

COMMUNITY

+
+ +
+
+
+
+

Connect with our community on Discord

+

+ Be part of the community. Take a look at how we work on + projects. We share ideas and would love to hear yours. +

+
+
+
+ + Join 3DStreet Discord + +
+
+
+
+

collab

+
+ +
+
+
+
+

Contribute together on GitHub

+

+ See 3DStreet Core and Editor source code and help make it + better. +

+
+
+
+ + 3DStreet GitHub Repo + +
+
+
+
+

conversation

+
+ +
+
+
+
+

Follow us on X and stay up to date

+

+ Follow us on twitter and stay in the know on all things 3D + Street. +

+
+
+
+ + Connect on X + +
+
+
+ + {/* TRUSTED BY SECTION */} +
+

TRUSTED BY

+
+
+ University of Oregon +
+
+ Town of Manchester +
+
+ Bicycle coalition +
+
+ Streetmix +
+
+
+ + {/* START SECTION */} +
+

Ready to reimagine a safer greener world?

+
+ + {/* FOOTER SECTION */} + +
+ + ); +} diff --git a/src/components/button/button.component.jsx b/src/components/button/button.component.jsx new file mode 100644 index 00000000..9dfae618 --- /dev/null +++ b/src/components/button/button.component.jsx @@ -0,0 +1,37 @@ +import React from "react"; +import clsx from "clsx"; +import styles from "./button.module.css"; + +const Button = ({ + variant, + label, + icon, + isActive, + link, + disabled, + type, + onClick, + className, +}) => { + return ( + + ); +}; + +export { Button }; diff --git a/src/components/button/button.module.css b/src/components/button/button.module.css new file mode 100644 index 00000000..3b1dfab3 --- /dev/null +++ b/src/components/button/button.module.css @@ -0,0 +1,158 @@ +.wrapper { + outline: none; + border: none; + background: transparent; + cursor: pointer; + width: fit-content; + white-space: nowrap; +} + +.disabled { + cursor: not-allowed; +} + +/* VARIANTS */ +.variant-blue { + padding: 20px 28px; + border-radius: 50px; + background: #4a14bc; + color: #ffffff; + + font-family: "Hind Siliguri"; + font-size: 18px; + font-weight: 500; + + transition: 0.2s ease-out; + + @media (max-width: 768px) { + padding: 12px 20px; + } +} +.variant-blue:hover { + box-shadow: 0px 0px 26px 0px #4a14bc; +} +.variant-blue:focus-visible { + outline: 2px solid #fff; +} +.variant-blue.disabled { + background: #242329; + color: #444242; +} +.variant-blue.disabled:hover { + box-shadow: none; +} + +.variant-transparent { + padding: 16px 24px; + display: flex; + align-items: center; + justify-content: center; + column-gap: 12px; + + border-radius: 40px; + background: rgba(255, 255, 255, 0.16); + backdrop-filter: blur(6px); + + color: #fff; + font-size: 18px; + font-weight: 500; + transition: ease-out 0.2s; + + @media (max-width: 768px) { + padding: 12px 20px; + } +} +.variant-transparent .icon { + max-width: 24px; + min-width: 24px; + max-height: 24px; + min-height: 24px; +} +.variant-transparent .icon * { + fill: #fff; +} +.variant-transparent:hover { + background: rgba(255, 255, 255, 0.2); +} +.variant-transparent:focus-visible { + outline: 2px solid #fff; +} +.variant-transparent.disabled { + background: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.1); +} +.variant-transparent.disabled .icon * { + fill: rgba(255, 255, 255, 0.1); +} + +.variant-white { + padding: 20px 28px; + border-radius: 50px; + background: rgba(255, 255, 255, 0.9); + + color: #4a14bc; + font-size: 18px; + font-weight: 500; + + transition: 0.2s ease-out; + + @media (max-width: 768px) { + padding: 12px 20px; + } +} +.variant-white:hover { + box-shadow: 0px 0px 26px 0px #4a14bc; +} +.variant-white:focus-visible { + outline: 2px solid #000; +} +.variant-white.disabled { + background: #343434; + color: #444242; +} + +.variant-icon, +.variant-icon svg { + width: 48px; + height: 48px; + display: flex; + transition: 0.2s ease-out; +} +.variant-icon svg * { + fill: #fff; +} +.variant-icon:hover svg * { + fill: #4a14bc; +} +.variant-icon:focus-visible { + border: 2px solid #fff; +} +.variant-icon.disabled svg * { + fill: #444242; +} + +.variant-ghost { + color: #fff; + font-size: 18px; + font-weight: 500; +} +.variant-ghost:hover, +.variant-ghost.active { + position: relative; +} +.variant-ghost:hover::after, +.variant-ghost.active::after { + content: ""; + height: 2px; + width: 100%; + position: absolute; + bottom: -6px; + left: 0; + background-color: #fff; +} +.variant-ghost:focus-visible { + border: 2px solid #fff; +} +.variant-ghost.disabled { + color: #444242; +} diff --git a/src/components/button/index.js b/src/components/button/index.js new file mode 100644 index 00000000..55e57113 --- /dev/null +++ b/src/components/button/index.js @@ -0,0 +1 @@ +export { Button } from "./button.component"; diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 00000000..dd812129 --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,2 @@ +export { Button } from "./button"; +export { Input } from "./input"; diff --git a/src/components/input/index.js b/src/components/input/index.js new file mode 100644 index 00000000..169ba264 --- /dev/null +++ b/src/components/input/index.js @@ -0,0 +1 @@ +export { Input } from "./input.component"; diff --git a/src/components/input/input.component.jsx b/src/components/input/input.component.jsx new file mode 100644 index 00000000..e9d4403c --- /dev/null +++ b/src/components/input/input.component.jsx @@ -0,0 +1,94 @@ +import React, { useState } from "react"; +import styles from "./input.module.css"; +import { CheckIcon, MailIcon } from "../../icons"; +import { Button } from "../button"; +import clsx from "clsx"; +import Mailchimp from "react-mailchimp-subscribe"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; + +const EMAIL_REGEXP = + /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; + +const Input = () => { + const [value, setValue] = useState(""); + const [isEmail, setIsEmail] = useState(true); + const [isSent, setIsSent] = useState(false); + + const { siteConfig } = useDocusaurusContext(); + + const onChangeHandler = (value) => { + setValue(value); + + if (!isEmail) { + setIsEmail(true); + } + }; + + const onSubmitHandler = (e, subscribe) => { + e.preventDefault(); + + if (!isSent) { + const isEmailValid = EMAIL_REGEXP.test(value); + + if (!isEmailValid) { + return setIsEmail(isEmailValid); + } + setIsSent(true); + + subscribe({ EMAIL: value }); + } + }; + + return ( + ( +
+

+ Get the latest staff picks and insider updates monthly. +

+
+
+ + + onChangeHandler(value) + } + /> + + onChangeHandler(value) + } + /> +
+
+
+ )} + /> + ); +}; + +export { Input }; diff --git a/src/components/input/input.module.css b/src/components/input/input.module.css new file mode 100644 index 00000000..4e3236da --- /dev/null +++ b/src/components/input/input.module.css @@ -0,0 +1,75 @@ +.wrapper { + display: flex; + flex-direction: column; + row-gap: 12px; + width: 100%; +} + +.wrapper .label { + color: #e4e4e4; + font-size: 18px; + font-weight: 500; + margin-bottom: 0; +} + +.formWrapper { + display: flex; + column-gap: 22px; + + @media (max-width: 768px) { + flex-direction: column; + row-gap: 20px; + } +} + +.inputWrapper { + padding: 16px 24px; + display: flex; + column-gap: 12px; + align-items: center; + border-radius: 40px; + background: rgba(255, 255, 255, 0.16); + backdrop-filter: blur(6px); + + @media (max-width: 768px) { + padding: 12px 20px; + } +} + +.notValid { + outline: 2px solid #ff0b0b; + position: relative; +} + +.notValid::after { + content: "Wrong email format"; + position: absolute; + right: 0; + bottom: -50%; + + color: #ff0b0b; + text-align: right; + font-size: 12px; + font-weight: 400; +} + +.input { + width: 444px; + outline: none; + border: none; + background: transparent; + + color: #fff; + font-size: 18px; + font-weight: 400; + + @media (max-width: 768px) { + width: auto; + } +} + +.input::placeholder { + color: rgba(255, 255, 255, 0.5); + font-size: 18px; + font-weight: 400; +} diff --git a/src/css/custom.css b/src/css/custom.css deleted file mode 100644 index f303bdf7..00000000 --- a/src/css/custom.css +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* You can override the default Infima variables here. */ -:root { - --ifm-color-primary: hsl(263, 50%, 45%); - --ifm-color-primary-dark: hsl(263, 50%, 40%)c; - --ifm-color-primary-darker: hsl(263, 50%, 35%); - --ifm-color-primary-darkest: hsl(263, 50%, 30%); - --ifm-color-primary-light: hsl(263, 50%, 50%); - --ifm-color-primary-lighter: hsl(263, 50%, 55%); - --ifm-color-primary-lightest: hsl(263, 50%, 60%); - --ifm-code-font-size: 95%; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); -} - -/* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { - --ifm-color-primary: hsl(263, 50%, 60%); - --ifm-color-primary-dark: hsl(263, 50%, 55%); - --ifm-color-primary-darker: hsl(263, 50%, 50%); - --ifm-color-primary-darkest: hsl(263, 50%, 45%); - --ifm-color-primary-light: hsl(263, 50%, 65%); - --ifm-color-primary-lighter: hsl(263, 50%, 70%); - --ifm-color-primary-lightest: hsl(263, 50%, 75%); - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); -} - -.navbar__logo > img { - width: 90%; - height: 90%; -} diff --git a/src/css/styles.css b/src/css/styles.css new file mode 100644 index 00000000..95f90ed3 --- /dev/null +++ b/src/css/styles.css @@ -0,0 +1,1061 @@ +@charset "UTF-8"; + +/*---------------------------------------------------------------- + Base styles +----------------------------------------------------------------*/ + +*, +*::before, +*::after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Hind Siliguri", sans-serif; + font-size: 18px; + line-height: 160%; + overflow-x: hidden; +} + +a { + text-decoration: none; +} + +p, +h2 { + margin-bottom: 0; +} + +.wrapper { + width: 100%; + margin: 0 auto; + background-color: #0c011e; + + display: flex; + flex-direction: column; + align-items: center; +} + +section, +main { + width: 750px; +} + +.--mobile { + display: none; +} + +.--noMobile { + display: block; +} + +@media (max-width: 768px) { + .--mobile { + display: block; + } + + .--noMobile { + display: none; + } +} + +/*---------------------------------------------------------------- + Header styles +----------------------------------------------------------------*/ + +.st_header_ellipse { + position: absolute; + top: 0; + left: 0; + z-index: 1; + pointer-events: none; +} + +.st_header_container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 26px 0; + width: 1160px; + position: relative; +} + +.st_header_left { + display: flex; + column-gap: 64px; + align-items: center; +} + +.st_header_nav > ul { + display: flex; + column-gap: 32px; + list-style: none; + padding: 0; + margin: 0; + text-align: center; +} + +.st_header_container .relative_wrapper { + right: 0; + top: 0; + position: absolute; + width: fit-content; + height: 100vh; +} + +.st_header_container .socials { + display: flex; + flex-direction: column; + row-gap: 12px; + right: 0; + top: calc(50% - 82px); + position: absolute; +} + +.st_header_container .socials svg:hover * { + transition: 0.2s; + fill: #4a14bc; +} + +.st_header_container .down_icon { + position: absolute; + right: 0; + bottom: 40px; +} + +.st_header_container .down_icon::after { + content: ""; + width: 250px; + height: 200px; + rotate: -60deg; + background: linear-gradient( + 84.13deg, + rgba(89, 26, 222, 0.8) 25.32%, + rgba(43, 13, 161, 0.8) 121.74% + ); + position: absolute; + bottom: -24px; + right: -100px; + filter: blur(160px); +} + +/*---------------------------------------------------------------- + Main(section) styles +----------------------------------------------------------------*/ + +.st_main { + display: flex; + flex-direction: column; + align-items: center; + position: relative; +} + +.st_main_grid_bg { + top: 0; + left: 0; + width: 100vw; + height: 100vh; + position: absolute; + background-image: url("/img/website/st_hero_grid.png"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_main_grid { + width: 100vw; + height: 250px; + background-image: url("/img/website/st_hero_bottom_grid.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + margin-top: 76px; + clip: rect(auto, auto, 500px, auto); +} + +.st_main_container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 56px; +} + +.st_main_container h1 { + margin-bottom: 28px; + color: #fff; + font-family: "Kanit"; + font-size: 76px; + font-weight: 700; +} + +.st_main_container > p { + margin-bottom: 56px; +} + +section h2 { + font-weight: 700; + font-size: 20px; + color: rgba(255, 255, 255, 0.6); + letter-spacing: 6px; + text-transform: uppercase; +} + +.st_grid_3_wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + + background-image: url("/img/website/grid_3.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +/*---------------------------------------------------------------- + Overview(section) styles +----------------------------------------------------------------*/ + +.st_overview { + margin-top: 64px; + display: flex; + flex-direction: column; + row-gap: 24px; +} + +.st_overview_video { + width: 100%; +} + +/*---------------------------------------------------------------- + Vision(section) styles +----------------------------------------------------------------*/ + +.st_vision { + margin-top: 120px; + display: flex; + flex-direction: column; + row-gap: 24px; +} + +.st_vision p { + font-weight: 400; + font-size: 54px; + line-height: 120%; +} + +/*---------------------------------------------------------------- + Overview(section) styles +----------------------------------------------------------------*/ + +.st_statistics { + margin-top: 150px; + display: flex; + flex-direction: column; + row-gap: 24px; +} + +.st_statistics_posts { + width: 100%; + display: flex; + flex-direction: column; + row-gap: 80px; +} + +.st_statistics_item { + display: flex; + column-gap: 36px; +} + +.st_statistics_item .st_statistics_icon { + min-width: 185px; + min-height: 195px; +} + +.st_statistics_post_description p:nth-child(1) { + font-size: 84px; + font-weight: 700; + line-height: 100px; + color: #e4e4e4; +} + +.st_statistics_post_description p:nth-child(2) { + font-size: 16px; + font-weight: 500; + line-height: 130%; + letter-spacing: 0.5px; + color: rgba(228, 228, 228, 0.5); +} + +.st_statistics_post_description a { + font-size: 16px; + font-weight: 500; + line-height: 160%; + color: #5200ff; + text-decoration: underline; +} + +/*---------------------------------------------------------------- + Mission(section) styles +----------------------------------------------------------------*/ + +.st_mission { + margin-top: 248px; + margin-bottom: 200px; + + display: flex; + flex-direction: column; + row-gap: 24px; +} + +.st_mission p { + font-weight: 400; + font-size: 54px; + line-height: 120%; +} + +/*---------------------------------------------------------------- + Features(section) styles +----------------------------------------------------------------*/ + +.st_features { + padding: 124px 0; + background-color: #e7e3ee; + width: 100vw; + + display: flex; + justify-content: center; + background-image: url("/img/website/grid_4.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; +} + +.st_features_inner { + width: 860px; + display: flex; + flex-direction: column; + align-items: center; + row-gap: 80px; +} + +.st_features h2 { + text-align: left; + font-family: "Kanit"; + color: #5200d9; + font-size: 92px; + font-weight: 600; + line-height: 110%; + text-transform: none; +} + +.st_features_posts { + display: flex; + flex-direction: column; + row-gap: 64px; +} + +.st_features_item { + display: flex; + justify-content: space-between; + border-radius: 8px; + background-color: #fff; +} + +.st_features_item img { + border-radius: 0 8px 8px 0; +} + +.st_feature_description { + display: flex; + flex-direction: column; + justify-content: flex-end; + row-gap: 64px; + padding: 0 36px 60px 54px; +} + +.b-gap { + row-gap: 120px; +} + +.st_feature_description_top { + display: flex; + flex-direction: column; + row-gap: 40px; +} + +.st_feature_description_top p:nth-child(1) { + font-size: 42px; + font-weight: 600; + line-height: 110%; + color: #3514bc; +} + +.st_feature_description_top p:nth-child(2) { + font-size: 16px; + font-weight: 500; + line-height: 150%; + color: #3514bc; +} + +/*---------------------------------------------------------------- + Blog(section) styles +----------------------------------------------------------------*/ + +.st_blog { + width: 100%; + padding: 110px 0; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + + background-image: url("/img/website/blog_bg.png"); + background-size: 75% 75%; + background-position: center; + background-repeat: no-repeat; +} + +.st_blog_left_dot::after { + content: ""; + left: calc(50% - 1000px); + top: 25%; + width: 350px; + height: 350px; + position: absolute; + opacity: 0.5; + background-color: #720da1; + filter: blur(180px); +} + +.st_blog_right_dot::after { + content: ""; + right: calc(50% - 784px); + bottom: 15%; + width: 228px; + height: 350px; + position: absolute; + opacity: 0.5; + background-color: #2b0da1; + filter: blur(180px); +} + +.st_blog_inner { + width: 750px; + display: flex; + flex-direction: column; + align-items: center; +} + +.st_blog_title_description { + margin-bottom: 40px; +} + +.st_blog h2 { + font-family: "Kanit"; + font-size: 56px; + font-weight: 700; + line-height: 120%; + text-transform: none; + color: #ffffff; + letter-spacing: 0; + width: 100%; + text-align: left; +} + +.st_blog p { + font-size: 18px; + font-weight: 500; + line-height: 150%; + color: #ffffff; + width: 100%; + text-align: left; +} + +.st_blog_cards { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + row-gap: 48px; + margin-bottom: 64px; +} + +.st_blog_item { + display: flex; + border-radius: 0px 8px 8px 0px; +} + +.st_blog_item:hover { + box-shadow: 0px 0px 26px 0px #4a14bc; + cursor: pointer; + transition: 0.2s ease-out; +} + +.st_blog_item img { + width: 124px; + border-radius: 8px; +} + +.st_blog_item_description { + width: 236px; + display: flex; + flex-direction: column; + background-color: #100e1d; + padding: 24px 32px 48px 16px; +} + +.st_blog_item_header { + display: flex; + flex-direction: column; + row-gap: 12px; +} + +.st_blog_item_authors { + display: flex; + column-gap: 4px; +} + +.st_blog_item_authors p { + display: flex; + align-items: center; + column-gap: 8px; + + font-size: 12px; + font-weight: 500; + line-height: 110%; +} + +.st_blog_item_authors_p { + width: fit-content !important; +} + +.st_blog_item_header_title { + font-size: 16px; + font-weight: 600; + line-height: 110%; +} + +.st_blog_item_header img { + width: 16px; + height: 16px; +} + +.st_blog_item_description .divider { + margin: 16px 0; + background-color: #252239; +} + +.st_blog_item_description .st_blog_item_footer { + font-size: 12px; + font-weight: 500; + line-height: 110%; + color: #e7e3ee; +} + +/*---------------------------------------------------------------- + Socials(section) styles +----------------------------------------------------------------*/ + +.st_socials { + padding: 110px 0 90px; + + display: flex; + flex-direction: column; + align-items: center; + row-gap: 32px; + position: relative; +} + +.st_socials_icon2 { + position: absolute; + width: 55px; + height: 55px; + left: -220px; + rotate: -15deg; + top: 0; + background-image: url("/img/website/socials_icon_2.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials_icon3 { + position: absolute; + width: 115px; + height: 115px; + left: -190px; + rotate: -15deg; + top: 198px; + background-image: url("/img/website/socials_icon_3.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials_icon4 { + position: absolute; + width: 350px; + height: 350px; + left: -550px; + rotate: -15deg; + top: 198px; + background-image: url("/img/website/socials_icon_4.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; + rotate: 75deg; +} + +.st_socials_icon5 { + position: absolute; + width: 350px; + height: 350px; + right: -560px; + top: 150px; + background-image: url("/img/website/socials_icon_5.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials_icon6 { + position: absolute; + width: 100px; + height: 100px; + right: -300px; + top: 510px; + background-image: url("/img/website/socials_icon_6.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials_icon7 { + position: absolute; + width: 90px; + height: 90px; + right: -150px; + top: 700px; + background-image: url("/img/website/socials_icon_7.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials_icon8 { + position: absolute; + width: 30px; + height: 30px; + left: -260px; + bottom: 0px; + background-image: url("/img/website/socials_icon_8.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials_icon9 { + position: absolute; + width: 45px; + height: 45px; + left: -80px; + bottom: -140px; + background-image: url("/img/website/socials_icon_9.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials_icon10 { + position: absolute; + width: 45px; + height: 45px; + left: 600px; + bottom: -140px; + background-image: url("/img/website/socials_icon_10.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials::after { + content: ""; + position: absolute; + top: 0; + right: 120px; + width: 275px; + height: 275px; + background-image: url("/img/website/socials_icon_1.png"); + background-size: 100% 100%; + background-position: center; + background-repeat: no-repeat; + pointer-events: none; +} + +.st_socials_title { + display: flex; + flex-direction: column; + row-gap: 4px; + z-index: 1; +} + +.st_socials_title h2 { + font-weight: 700; + font-size: 56px; + line-height: 120%; + font-family: "Kanit"; + letter-spacing: 0; + color: #ffffff; + text-transform: none; +} + +.st_socials_title p { + font-weight: 500 !important; + font-size: 18px !important; + line-height: 120% !important; +} + +.st_socials_cards { + display: flex; + justify-content: space-between; + width: 100%; +} + +.st_socials_item { + width: 236px; + padding: 24px 24px 76px; + background-color: #4c00ae; + border-radius: 4px; + + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.st_socials_header { + display: flex; + flex-direction: column; + align-items: center; +} + +.st_socials_type { + width: 100%; + text-align: right; + margin-bottom: 40px; + text-transform: uppercase; + letter-spacing: 2px; + font-weight: 600; + font-size: 12px; +} + +.st_socials_icon { + width: 150px; + height: 150px; + display: flex; + justify-content: center; +} + +.st_socials_item_footer { + display: flex; + flex-direction: column; + row-gap: 24px; +} + +.st_socials_item_description { + display: flex; + flex-direction: column; + row-gap: 16px; +} + +.st_socials_item_description p:nth-child(1) { + font-size: 18px; + font-weight: 700; + line-height: 110%; +} + +.st_socials_item_description p:nth-child(2) { + font-size: 14px; + font-weight: 500; + line-height: 110%; +} + +.st_socials_item a { + font-size: 14px; + font-weight: 500; + line-height: 110%; + text-decoration: underline; + color: #fff; +} + +.st_socials_item_link { + margin-top: 24px; +} + +/*---------------------------------------------------------------- + Trusted by(section) styles +----------------------------------------------------------------*/ + +.st_trusted_by { + display: flex; + flex-direction: column; + row-gap: 24px; +} + +.st_trusted_by h2 { + font-size: 20px; + font-weight: 700; + line-height: 150%; + color: #3514bc; + text-align: center; +} + +.st_trusted_by_companies { + display: flex; + justify-content: center; + column-gap: 24px; + width: 100%; +} + +.st_trusted_by_company { + width: 175px; + height: 65px; + display: flex; + justify-content: center; + align-items: center; +} + +/* // */ + +.st_start { + display: flex; + flex-direction: column; + row-gap: 82px; + margin: 180px 0 140px; +} + +.st_start h2 { + font-family: "Kanit"; + font-weight: 700; + font-size: 92px; + line-height: 110%; + color: #fff; + text-transform: none; +} + +.st_footer { + display: flex; + flex-direction: column; + padding: 0 0 72px; + row-gap: 56px; + width: 750px; +} + +.st_footer_links { + display: flex; + justify-content: space-between; +} + +.st_footer_col { + display: flex; + flex-direction: column; + row-gap: 12px; +} + +.st_footer_col p { + font-size: 16px; + font-weight: 500; +} + +.st_footer_col li { + list-style-type: none; +} + +.st_footer_col a { + font-size: 14px; + color: #636881; + font-weight: 500; +} + +.st_footer_col ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.st_footer_copyright { + display: flex; + flex-direction: column; + row-gap: 12px; +} + +.st_footer_copyright span { + background-color: transparent; + width: 50px; + border-bottom: 3px solid #636881; + margin: 0; +} + +.st_footer_copyright { + font-size: 14px; + color: #636881; + font-weight: 500; + margin: 0; + height: 3px; +} + +/*---------------------------------------------------------------- + TABLET & MOBILE styles +----------------------------------------------------------------*/ + +/* TABLET */ +@media (max-width: 1200px) { + section, + main { + width: 750px; + padding-left: 40px !important; + padding-right: 40px !important; + } + + .st_footer { + width: 750px; + } + + .st_footer_links { + width: 100%; + } + + .st_header_container { + width: 100%; + padding: 26px 42px; + } + + .relative_wrapper { + display: none; + } + + .st_blog_item_description { + width: 200px; + } + + .st_socials_item { + width: 210px; + } +} + +/* MOBILE */ +@media (max-width: 768px) { + section, + main { + width: 100%; + padding-left: 10px !important; + padding-right: 10px !important; + } + + .st_footer { + width: 100%; + } + + .st_footer_links { + width: 100%; + } + + .st_header_container { + display: flex; + flex-direction: column; + row-gap: 32px; + padding: 26px 10px; + } + + .st_header_left { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + } + + .st_header_nav { + width: 100%; + } + + .st_features_item img { + width: 165px; + } + + .st_blog_cards { + flex-wrap: nowrap; + flex-direction: column; + } + + .st_socials_cards { + flex-direction: column; + } + + .st_trusted_by_companies { + flex-wrap: wrap; + } + + .st_statistics_item .st_statistics_icon { + min-width: 140px; + min-height: 140px; + } + + .st_feature_description { + padding: 24px 20px 24px 20px; + } + + .st_features_inner { + width: 100%; + } + + .st_features h2 { + word-break: break-word; + } + + .st_feature_description_top p:nth-child(1) { + word-break: break-word; + } + + .st_blog_item_description { + width: 100%; + } + + .st_socials_item { + width: 100%; + } + + .st_socials_cards { + row-gap: 20px; + } + + .st_socials_item { + padding: 24px 20px 24px 24px; + } + + .st_socials_item a { + margin-top: 24px; + } + + .st_blog_inner { + width: auto; + } + + .st_main_grid { + background-size: auto; + } +} diff --git a/src/icons/arrow.icon.jsx b/src/icons/arrow.icon.jsx new file mode 100644 index 00000000..c993f414 --- /dev/null +++ b/src/icons/arrow.icon.jsx @@ -0,0 +1,20 @@ +import React from "react"; + +const ArrowIcon = () => ( + + + +); + +export { ArrowIcon }; diff --git a/src/icons/check.icon.jsx b/src/icons/check.icon.jsx new file mode 100644 index 00000000..b03104d4 --- /dev/null +++ b/src/icons/check.icon.jsx @@ -0,0 +1,20 @@ +import React from "react"; + +const CheckIcon = () => ( + + + +); + +export { CheckIcon }; diff --git a/src/icons/index.js b/src/icons/index.js new file mode 100644 index 00000000..bda9959b --- /dev/null +++ b/src/icons/index.js @@ -0,0 +1,13 @@ +export { CheckIcon } from "./check.icon"; +export { MailIcon } from "./mail.icon"; +export { + DiscordIcon, + LinkedInIcon, + MastodonIcon, + XIcon, + DiscordIcon2, + GithubIcon, + XIcon2, +} from "./socials"; +export { ArrowIcon } from "./arrow.icon"; +export { PiechartIcon } from "./piechart.icon"; diff --git a/src/icons/mail.icon.jsx b/src/icons/mail.icon.jsx new file mode 100644 index 00000000..a041b3a5 --- /dev/null +++ b/src/icons/mail.icon.jsx @@ -0,0 +1,22 @@ +import React from "react"; + +const MailIcon = () => ( + + + + +); + +export { MailIcon }; diff --git a/src/icons/piechart.icon.jsx b/src/icons/piechart.icon.jsx new file mode 100644 index 00000000..cdb6f09e --- /dev/null +++ b/src/icons/piechart.icon.jsx @@ -0,0 +1,73 @@ +import React from "react"; + +const PiechartIcon = ({ percent, className }) => { + switch (percent) { + case 32: { + return ( + + + + + ); + } + + case 52: { + return ( + + + + + ); + } + + case 80: { + return ( + + + + + ); + } + } +}; + +export { PiechartIcon }; diff --git a/src/icons/socials/discord.icon.jsx b/src/icons/socials/discord.icon.jsx new file mode 100644 index 00000000..526f5f39 --- /dev/null +++ b/src/icons/socials/discord.icon.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +const DiscordIcon = () => ( + + + +); + +export { DiscordIcon }; diff --git a/src/icons/socials/discord2.icon.jsx b/src/icons/socials/discord2.icon.jsx new file mode 100644 index 00000000..ca3a9e1a --- /dev/null +++ b/src/icons/socials/discord2.icon.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +const DiscordIcon2 = () => ( + + + +); + +export { DiscordIcon2 }; diff --git a/src/icons/socials/github.icon.jsx b/src/icons/socials/github.icon.jsx new file mode 100644 index 00000000..65036345 --- /dev/null +++ b/src/icons/socials/github.icon.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +const GithubIcon = () => ( + + + +); + +export { GithubIcon }; diff --git a/src/icons/socials/index.js b/src/icons/socials/index.js new file mode 100644 index 00000000..9f7c8a45 --- /dev/null +++ b/src/icons/socials/index.js @@ -0,0 +1,7 @@ +export { DiscordIcon } from "./discord.icon"; +export { LinkedInIcon } from "./linkedin.icon"; +export { MastodonIcon } from "./mastodon.icon"; +export { XIcon } from "./x.icon"; +export { XIcon2 } from "./x2.icon"; +export { GithubIcon } from "./github.icon"; +export { DiscordIcon2 } from "./discord2.icon"; diff --git a/src/icons/socials/linkedin.icon.jsx b/src/icons/socials/linkedin.icon.jsx new file mode 100644 index 00000000..759e78d6 --- /dev/null +++ b/src/icons/socials/linkedin.icon.jsx @@ -0,0 +1,20 @@ +import React from "react"; + +const LinkedInIcon = () => ( + + + +); + +export { LinkedInIcon }; diff --git a/src/icons/socials/mastodon.icon.jsx b/src/icons/socials/mastodon.icon.jsx new file mode 100644 index 00000000..90ca9720 --- /dev/null +++ b/src/icons/socials/mastodon.icon.jsx @@ -0,0 +1,20 @@ +import React from "react"; + +const MastodonIcon = () => ( + + + +); + +export { MastodonIcon }; diff --git a/src/icons/socials/x.icon.jsx b/src/icons/socials/x.icon.jsx new file mode 100644 index 00000000..f696efa9 --- /dev/null +++ b/src/icons/socials/x.icon.jsx @@ -0,0 +1,20 @@ +import React from "react"; + +const XIcon = () => ( + + + +); + +export { XIcon }; diff --git a/src/icons/socials/x2.icon.jsx b/src/icons/socials/x2.icon.jsx new file mode 100644 index 00000000..880c906f --- /dev/null +++ b/src/icons/socials/x2.icon.jsx @@ -0,0 +1,25 @@ +import React from "react"; + +const XIcon2 = () => ( + + + + + + + + + + +); + +export { XIcon2 }; diff --git a/src/pages/index.js b/src/pages/index.js deleted file mode 100644 index 10ebead6..00000000 --- a/src/pages/index.js +++ /dev/null @@ -1,495 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; - -import styles from './index.module.css'; -import { Timeline } from 'react-twitter-widgets'; - -function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - -
-
-
- ); -} - -export default function Home() { - const {siteConfig} = useDocusaurusContext(); - // return ( - // - // - //
- // - //
- //
- // ); - - return ( - <> - - - - 3DStreet - open-source 3d street editor for safer streets - - - - - - {/* header start */} -
-
-
-
- - - -
-
- -
-
- - Launch App - -
-
-
-
- {/* header end */} - {/* banner start */} -
-
-

Visualize safer streets.

- - See Example Scenes - -
-
- {/* banner end */} - {/* scenes start */} -
-
-

- 3DStreet Scene Gallery -

-
- -
-
- -
- - - - - - -
-
-
-

Basic Demo Scene

-

- A 3DStreet scene showing a basic street imported from Streetmix with no customization. -

-
-
-
-
-
- -
- - - - - - -
-
-
-

Staff Pick: Custom Placements

-

- Eli's street scene shows advanced use of duplicating and modifying vehicles, mobility users, and other props to create multi-use segments that change mid-block. -

-
-
-
- -
-
- -
- - - - - -
-
-
-

Staff Pick: Custom Geometry

-

- Sharon's scene features custom safe street details like a midblock crosswalk with students crossing to get to school and clever use of building models. -

-
-
-
- - {/* -
- -
-

Intersection Simple Demo

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus ultrices cum lorem sapien in elementum, pharetra. Tortor malesuada ornare et ipsum.

-
-
- -
- -
-

Intersection Simple Demo

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus ultrices cum lorem sapien in elementum, pharetra. Tortor malesuada ornare et ipsum.

-
-
- -
- -
-

Title

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus ultrices cum lorem sapien in elementum, pharetra. Tortor malesuada ornare et ipsum.

-
-
*/} -
-
-
- Show more - - - -
-
-
-
- {/* scenes end */} - {/* news start */} -
-
-

- 3DStreet in the News -

-
-
-
-
- -
-
- The San Francisco Standard -
-
-

- Introducing the ‘Burrito Plan,’ One Way to Safety on Valencia Street -

-
- -
-
-

- There is no enforcement against vehicles blocking bike lanes, even - across the street from the Mission police station. -

-

- What if I told you I have come up with a solution that is better - for bikes and businesses? -

-
- - Read the full article - -
-
-
-
- -
-
- The Philadelphia Inquirer -
-
-

- Philadelphia needs to manage the return of the car as the pandemic - subsides -

-
- -
-
-

- So far, the message to motorists seems to be: C’mon back. But - Philadelphia needs to retain the public space clawed back from the - automobile during the pandemic. -

-
- - Original article (paywall) - -
-
-
-
- {/* news end */} - {/* Get in touch start */} -
-
-

- Connect with Us -

-
-
- -
-
-

Join our Discord server

-

- Be part of the community. Take a look at how we work on projects. We - share ideas and would love to hear yours. -

- - Join 3DStreet Discord - - - - - - - - - - - -
- (If invite expired, email us below.) -
-
/
-

Contribute on GitHub

-

- See the 3DStreet core viewer source code and help make it better. -

- - 3DStreet GitHub Repo - - - - - - -
-
-
-
- {/* Get in touch end */} - {/* footer start */} -
- Copyright © {new Date().getFullYear()} 3DStreet LLC. 3DStreet is trademark of 3DStreet LLC. -
- {/* footer end */} - - - ); -} diff --git a/src/pages/index.module.css b/src/pages/index.module.css deleted file mode 100644 index 9f71a5da..00000000 --- a/src/pages/index.module.css +++ /dev/null @@ -1,23 +0,0 @@ -/** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. - */ - -.heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -@media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/src/plugins/blog-plugin.js b/src/plugins/blog-plugin.js new file mode 100644 index 00000000..97ee5bff --- /dev/null +++ b/src/plugins/blog-plugin.js @@ -0,0 +1,56 @@ +const blogPluginExports = require("@docusaurus/plugin-content-blog"); + +const defaultBlogPlugin = blogPluginExports.default; + +async function blogPluginExtended(...pluginArgs) { + const blogPluginInstance = await defaultBlogPlugin(...pluginArgs); + + return { + // Add all properties of the default blog plugin so existing functionality is preserved + ...blogPluginInstance, + /** + * Override the default `contentLoaded` hook to access blog posts data + */ + contentLoaded: async function (data) { + // Get the 4 latest blog posts + const recentPosts = [...data.content.blogPosts].splice(0, 4); + + async function createRecentPostModule(blogPost, index) { + return await data.actions.createData( + `home-page-recent-post-metadata-${index}.json`, + JSON.stringify({ + title: blogPost.metadata.title, + description: blogPost.metadata.description, + authors: blogPost.metadata.authors.reverse(), + imageURL: blogPost.metadata.frontMatter.image, + blogURL: blogPost.metadata.permalink + }) + ); + } + + data.actions.addRoute({ + // Add route for the home page + path: "/", + exact: true, + + // The component to use for the "Home" page route + component: "@site/src/components/Home/index.js", + + // These are the props that will be passed to our "Home" page component + modules: { + recentPosts: await Promise.all( + recentPosts.map(createRecentPostModule) + ), + }, + }); + + // Call the default overridden `contentLoaded` implementation + return blogPluginInstance.contentLoaded(data); + }, + }; +} + +module.exports = { + ...blogPluginExports, + default: blogPluginExtended, +}; diff --git a/static/css/legacy-styles.css b/static/css/legacy-styles.css deleted file mode 100644 index 75818ce8..00000000 --- a/static/css/legacy-styles.css +++ /dev/null @@ -1,680 +0,0 @@ -@charset "UTF-8"; -/* ------------------------------------------------------------------- -[Master Default Stylesheet] ------------------------------------------------------------------- - -[Table of contents] -1. body -2. typography -3. header -4. banner -5. scenes -6. news -7. Get in touch -8. footer -9. responsive -*/ - - -/*---------------------------------------------------------------- -1. body start -----------------------------------------------------------------*/ - -*, *::before, *::after{ - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -:root{ - --color-enabled : #4818D1; - --color-hovered : #3E11BC; - --color-pressed : #3913A6; -} - -body{ - margin: 0; - padding: 0; - font-family: 'Inter', sans-serif; - background-color: #323232; - font-size: 16px; - line-height: 1.5; -} - -a{ - text-decoration: none; -} -img{ - vertical-align: middle; -} -input, textarea, select, button{ - font-family: inherit; -} - -.st_container{ - max-width: 1188px; - margin: 0 auto; - padding: 0 24px; -} -/*---------------------------------------------------------------- -1. body end -----------------------------------------------------------------*/ - -/*---------------------------------------------------------------- -2. typography start -----------------------------------------------------------------*/ -/* heading start */ -.h-1{ - font-size: 64px; - line-height: 1.5; - font-weight: 600; - margin: 0; -} -.h-2{ - font-size: 62px; - line-height: 1.2; - font-weight: 600; - margin: 0; -} -/* heading end */ - -/* title start */ -.title-1{ - margin: 0; - font-size: 32px; - line-height: 39px; - font-weight: 500; - color: #323232; -} -.title-2{ - margin: 0; - font-size: 24px; - line-height: 36px; - font-weight: 500; - color: #323232; -} -.title-3{ - margin: 0; - font-size: 16px; - line-height: 19px; - font-weight: 400; - color: #323232; -} -/* title end */ - -/* button start */ -.button{ - background-color: var(--color-enabled); - color: #ffffff; - cursor: pointer; - border: none; - outline: none; - font-weight: 500; - display: inline-block; -} -.button:hover{ - background-color: var(--color-hovered); - color: #F3F3F3; -} -.button:active{ - background-color: var(--color-pressed); - color: #C3C3C3; -} -.button-b1{ - padding: 24px 32px; - border-radius: 12px; - font-size: 20px; - line-height: 24px; -} -.button-b2{ - padding: 19px 43px; - border-radius: 12px; - font-size: 18px; - line-height: 22px; -} -.button-b3{ - padding: 20px 36.5px; - border-radius: 12px; - font-size: 16px; - line-height: 19px; -} -.button-icon{ - display: inline-flex; - align-items: center; - justify-content: center; - gap: 12px; - padding: 17.5px 56px; - border-radius: 12px; - font-size: 16px; - line-height: 19px; -} -.button-icon > span{ - display: inline-flex; - width: 24px; - height: 24px; - align-items: center; - justify-content: center; -} -.button-white{ - color: var(--color-enabled); - background-color: #ffffff; -} -.button-white:hover{ - color: #784FEB; - background-color: #ffffff; -} -.button-white.button-icon:hover svg path{ - fill: #784FEB; -} -.button-white:active{ - color: #A588F8; - background-color: #ffffff; -} -.button-white.button-icon:active svg path{ - fill: #A588F8; -} -/* button end */ - -/* section start */ -.st_section{ - padding : 80px 0; -} -.st_section_heading{ - margin-bottom: 65px; -} -.st_section_white{ - background-color: #ffffff; -} -/* section end */ - -/* divider start */ -.st_divider{ - font-size:32px; - color: rgba(255, 255, 255, 0.3); - margin: 70px 0; -} -/* divider end */ - -.color-white{ - color: #ffffff; -} -.color-dark{ - color: #323232; -} -.text-left{ text-align: left; } -.text-center{ text-align: center; } -.text-right{ text-align: right; } -.text-italic{font-style: italic;} -/*---------------------------------------------------------------- -2. typography end -----------------------------------------------------------------*/ - -/*---------------------------------------------------------------- -3. header start -----------------------------------------------------------------*/ -.st_header_wrapper{ - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 999; - transition: all 0.2s; -} -.st_header_dark .st_header_wrapper{ - background-color: #323232; -} -.st_header_wrapper .st_header_inner{ - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 0; -} -.st_header_nav{ - flex: 1; -} -.st_header_nav > ul{ - list-style: none; - padding: 0; - margin: 0; - text-align: center; -} -.st_header_nav > ul > li{ - display: inline-block; -} -.st_header_nav > ul > li > a{ - display: inline-block; - color: #ffffff; - padding: 10.5px 22px; - font-size: 18px; -} -.st_header_button .button{ - padding: 14px 24px; -} -/*---------------------------------------------------------------- -3. header end -----------------------------------------------------------------*/ - -/*---------------------------------------------------------------- -4. banner start -----------------------------------------------------------------*/ -.st_banner_wrapper{ - height: 100vh; - background-image: url('/img/legacy-website/banner.jpg'); - display: grid; - align-items:center; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; -} -.st_banner_wrapper .st_container{ - padding: 30vh 0 20vh; -} -.st_banner_wrapper h1{ - max-width: 1000px; - margin: 0 auto; - margin-bottom: 60px; -} -/*---------------------------------------------------------------- -4. banner end -----------------------------------------------------------------*/ - - -/*---------------------------------------------------------------- -5. scenes start -----------------------------------------------------------------*/ -.st_scene_list{ - display: grid; - grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); - grid-gap: 30px 24px; - background-image: url("/img/scenes/scenes_grid_bg.svg"); - background-size: 100% 100%; - padding: 24px; -} -.st_scene_list .st_scene_item{ - position: relative; - padding-bottom: 30px; -} -.st_scene_list .st_scene_item::before{ - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 1px; - opacity: 0.3; - background-image: linear-gradient(to right, transparent, #C4C4C4, transparent); -} -.st_scene_list .st_scene_item:nth-last-child(1), -.st_scene_list .st_scene_item:nth-last-child(2), -.st_scene_list .st_scene_item:nth-last-child(3){ - padding-bottom: 0; -} -.st_scene_list .st_scene_item:nth-last-child(1)::before, -.st_scene_list .st_scene_item:nth-last-child(2)::before, -.st_scene_list .st_scene_item:nth-last-child(3)::before{ - display: none; -} -.st_scene_list .st_scene_item .st_scene_image{ - position: relative; - overflow: hidden; -} -.st_scene_list .st_scene_item .st_scene_image img{ - width: 100%; - transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); -} -.st_scene_list .st_scene_item .st_scene_image .st_scene_overlay{ - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 20px; - display: grid; - align-items: flex-end; - justify-content: flex-end; - transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); -} -.st_scene_list .st_scene_item:hover .st_scene_image .st_scene_overlay{ - background-color: rgba(94, 66, 165, 0.80); -} -.st_scene_launch{ - display: inline-flex; - align-items: center; - gap: 15px; -} -.st_scene_launch > .st_scene_launch_text{ - font-size: 18px; - color: #ffffff; - opacity: 0; - visibility: hidden; - transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); - transform: translateX(-10px); -} -.st_scene_item:hover .st_scene_launch > .st_scene_launch_text{ - opacity: 1; - visibility: visible; - transform: translateX(0px); -} -.st_scene_launch > .st_scene_launch_icon{ - width: 40px; - height: 40px; - border-radius: 40px; - background-color: rgba(0,0,0,0.7); - display: flex; - align-items: center; - justify-content: center; -} -.st_scene_launch > .st_scene_launch_icon svg{ - transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); - transform: rotate(-45deg); -} -.st_scene_item:hover .st_scene_launch > .st_scene_launch_icon svg{ - transform: rotate(0deg); -} -.st_scene_item:hover .st_scene_launch > .st_scene_launch_icon{ - background-color: transparent; -} - -.st_scene_details p{ - margin: 0; - margin-top: 15px; - color: #D1D1DD; -} -.st_scene_details h3{ - margin: 0; - margin-top: 15px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} - -.st_scene_show_more{ - display: none; - align-items: center; - gap: 10px; - color: #ffffff; - font-size: 18px; - cursor: pointer; - margin-top: 10px; -} -/*---------------------------------------------------------------- -5. scenes end -----------------------------------------------------------------*/ - -/*---------------------------------------------------------------- -6. news start -----------------------------------------------------------------*/ -.st_news_list{ - display: grid; - grid-template-columns: repeat(auto-fill, minmax(calc(50% - 20px), 1fr)); - gap: 20px; -} -.st_news_item{ - padding: 40px; - background-image: url('/img/news/news_item_bg_top.svg'), url('/img/news/news_item_bg_bottom.svg'); - background-size: 100% , 100%; - background-repeat: no-repeat, no-repeat; - background-position: top center , bottom center; -} -.st_news_item .st_news_head{ - display: grid; - grid-template-columns: 77px auto; - align-items: center; - gap: 20px; -} -.st_news_item .st_news_head > .st_news_head_avatar{ - width: 77px; -} -.st_news_item .st_news_head > .st_news_head_avatar > img{ - width: 77px; - height: 77px; - border-radius: 77px; - object-fit: contain; -} -.st_news_item .st_news_head > .st_news_head_name > span{ - display: block; -} -.st_news_item > .st_news_image{ - overflow: hidden; - margin-bottom: 20px; -} -.st_news_item > .st_news_image > img{ - width: 100%; - transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); -} -.st_news_item .title-1{ - margin: 20px 0px 40px; -} -.st_news_item > .st_news_content{ - min-height: 124px; -} -.st_news_item > .st_news_content > p{ - margin: 0; - margin-bottom: 16px; - color: #6A6A6A; - font-size: 16px; -} -.st_news_item .button{ - margin-top: 20px; -} -/*---------------------------------------------------------------- -6. news end -----------------------------------------------------------------*/ - -/*---------------------------------------------------------------- -7. Get in touch start -----------------------------------------------------------------*/ -.st_section_connect{ - background-color: #5E42A5; - position: relative; - z-index: 1; -} -.st_connect_wrapper{ - display: grid; - grid-template-columns: 50% 50%; -} -.st_connect_wrapper h3{ - margin-bottom: 20px; -} -.st_connect_wrapper p{ - color: #D1D1DD; - font-size: 20px; -} -.st_connect_wrapper .button.button-icon{ - padding: 17.5px 16px; - min-width: 239px; -} -.st_connect_wrapper .st_connect_twitter{ - padding-right: 80px; -} -.st_connect_wrapper .st_connect_twitter img{ - width: 100%; - margin-bottom: 45px; -} -.st_connect_wrapper .st_connect_discordGithub{ - padding-left: 80px; -} -.st_connect_wrapper .st_connect_discordGithub:before{ - content: ""; - position: absolute; - top: 0; - left: 50%; - right: 0; - bottom: 0; - background-color: #2B224F; - z-index: -1; -} -.st_connect_wrapper .st_connect_discordGithub .button-icon:hover svg path{ - fill: inherit; - stroke: #784FEB; -} -.st_connect_wrapper .st_connect_discordGithub .button-icon:active svg path{ - fill: inherit; - stroke: #A588F8; -} -/*---------------------------------------------------------------- -7. Get in touch end -----------------------------------------------------------------*/ - -/*---------------------------------------------------------------- -8. footer end -----------------------------------------------------------------*/ -.st_footer{ - padding: 40px 15px; -} -/*---------------------------------------------------------------- -8. footer end -----------------------------------------------------------------*/ - -/*---------------------------------------------------------------- -9. responsive start -----------------------------------------------------------------*/ -@media (max-width: 1200px){ - .h-1{ - font-size: 44px; - } -} -@media (max-width: 768px){ - .h-1{ - font-size: 38px; - } - .h-2{ - font-size: 38px; - } - .title-1{ - font-size: 20px; - line-height: inherit; - } - .title-2{ - font-size: 18px; - line-height: inherit; - } - .button-b1{ - font-size: 16px; - padding: 16px 24px; - } - .button-b2{ - font-size: 16px; - padding: 12px 24px; - } - .st_header_wrapper{ - background-color: rgba(50, 50, 50, 0.70); - } - .st_header_nav{ - display: none; - } - .st_header_logo img{ - max-width: 126px; - } - .st_banner_wrapper{ - height: auto; - } - .st_connect_wrapper, - .st_news_list, - .st_scene_list{ - grid-template-columns : 100%; - } - .st_scene_list{ - background-image: none; - } - .st_connect_wrapper .st_connect_twitter{ - padding: 0; - } - .st_connect_wrapper .st_connect_discordGithub{ - padding: 0; - margin-top: 88px; - } - .st_connect_wrapper .st_connect_discordGithub:before{ - top: 54.5%; - left: 0; - } - .st_connect_wrapper p{ - font-size: 16px; - } - .st_connect_wrapper{ - text-align: center; - } - .st_divider{ - margin: 30px 0; - } - .st_section_heading{ - margin-bottom: 43px; - } - .st_news_item{ - padding: 20px; - } - .st_news_item .st_news_head{ - grid-template-columns: 40px auto; - gap: 18px; - } - .st_news_item .st_news_head > .st_news_head_avatar{ - width: 40px; - } - .st_news_item .st_news_head > .st_news_head_avatar > img{ - width: 40px; - height: 40px; - } - .st_news_item .title-1{ - margin: 20px 0px; - } - .st_scene_list .st_scene_item:nth-last-child(1)::before, - .st_scene_list .st_scene_item:nth-last-child(2)::before, - .st_scene_list .st_scene_item:nth-last-child(3)::before{ - display: block; - } - .st_scene_list .st_scene_item:nth-last-child(1), - .st_scene_list .st_scene_item:nth-last-child(2), - .st_scene_list .st_scene_item:nth-last-child(3) { - padding-bottom: 100px; - } - .st_scene_show_more{ - display: inline-flex; - } - .st_scene_list .st_scene_item{ - padding-bottom: 100px; - } - .st_scene_list .st_scene_item .st_scene_image{ - position: initial; - } - .st_scene_list .st_scene_item:hover .st_scene_image .st_scene_overlay{ - background-color: transparent; - } - .st_scene_list .st_scene_item .st_scene_image .st_scene_overlay{ - top: auto; - padding: 0; - bottom: 25px; - justify-content: flex-start; - } - .st_scene_list .st_scene_item .st_scene_image{ - position: initial; - } - .st_scene_launch > .st_scene_launch_text{ - opacity: 1; - visibility: visible; - transform: none; - cursor: pointer; - width: 160px; - height: 50px; - border-radius: 12px; - background-color: #ffffff; - color: #373737; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - font-weight: 500; - } - .st_scene_launch > .st_scene_launch_icon{ - display: none; - } - .st_connect_wrapper .button.button-icon{ - padding: 13.5px 16px; - min-width: 255px; - } -} -/*---------------------------------------------------------------- -9. responsive end -----------------------------------------------------------------*/ - diff --git a/static/img/undraw_docusaurus_mountain.svg b/static/img/undraw_docusaurus_mountain.svg index af961c49..f928cd79 100644 --- a/static/img/undraw_docusaurus_mountain.svg +++ b/static/img/undraw_docusaurus_mountain.svg @@ -46,17 +46,17 @@ - - - - - - - - - - - + + + + + + + + + + + @@ -69,10 +69,10 @@ - + - + @@ -88,7 +88,7 @@ - + @@ -117,7 +117,7 @@ - + @@ -131,14 +131,14 @@ - + - + @@ -162,10 +162,10 @@ - - - - + + + + diff --git a/static/img/undraw_docusaurus_react.svg b/static/img/undraw_docusaurus_react.svg index 94b5cf08..7141ed7f 100644 --- a/static/img/undraw_docusaurus_react.svg +++ b/static/img/undraw_docusaurus_react.svg @@ -39,17 +39,17 @@ - - - - - - - - - - - + + + + + + + + + + + @@ -62,10 +62,10 @@ - + - + @@ -81,7 +81,7 @@ - + @@ -110,7 +110,7 @@ - + @@ -124,14 +124,14 @@ - + - + @@ -155,10 +155,10 @@ - - - - + + + + diff --git a/static/img/undraw_docusaurus_tree.svg b/static/img/undraw_docusaurus_tree.svg index d9161d33..6f90a24e 100644 --- a/static/img/undraw_docusaurus_tree.svg +++ b/static/img/undraw_docusaurus_tree.svg @@ -20,21 +20,21 @@ - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/static/img/website/arrow_ellipse.png b/static/img/website/arrow_ellipse.png new file mode 100644 index 00000000..24b85980 Binary files /dev/null and b/static/img/website/arrow_ellipse.png differ diff --git a/static/img/legacy-website/banner.jpg b/static/img/website/banner.jpg similarity index 100% rename from static/img/legacy-website/banner.jpg rename to static/img/website/banner.jpg diff --git a/static/img/website/blog-avatar.png b/static/img/website/blog-avatar.png new file mode 100644 index 00000000..91757297 Binary files /dev/null and b/static/img/website/blog-avatar.png differ diff --git a/static/img/website/blog-preview.png b/static/img/website/blog-preview.png new file mode 100644 index 00000000..37bab53f Binary files /dev/null and b/static/img/website/blog-preview.png differ diff --git a/static/img/website/blog_bg.png b/static/img/website/blog_bg.png new file mode 100644 index 00000000..fc0512b8 Binary files /dev/null and b/static/img/website/blog_bg.png differ diff --git a/static/img/website/feature-collab.jpg b/static/img/website/feature-collab.jpg new file mode 100644 index 00000000..f21adea9 Binary files /dev/null and b/static/img/website/feature-collab.jpg differ diff --git a/static/img/website/feature-model-library.jpg b/static/img/website/feature-model-library.jpg new file mode 100644 index 00000000..2a96e47b Binary files /dev/null and b/static/img/website/feature-model-library.jpg differ diff --git a/static/img/website/feature-open.jpg b/static/img/website/feature-open.jpg new file mode 100644 index 00000000..4b046541 Binary files /dev/null and b/static/img/website/feature-open.jpg differ diff --git a/static/img/website/feature-preview.png b/static/img/website/feature-preview.png new file mode 100644 index 00000000..a390ff76 Binary files /dev/null and b/static/img/website/feature-preview.png differ diff --git a/static/img/website/feature-simple-tool.jpg b/static/img/website/feature-simple-tool.jpg new file mode 100644 index 00000000..81896dc6 Binary files /dev/null and b/static/img/website/feature-simple-tool.jpg differ diff --git a/static/img/website/grid_2.png b/static/img/website/grid_2.png new file mode 100644 index 00000000..9c0a748f Binary files /dev/null and b/static/img/website/grid_2.png differ diff --git a/static/img/website/grid_3.png b/static/img/website/grid_3.png new file mode 100644 index 00000000..983338dc Binary files /dev/null and b/static/img/website/grid_3.png differ diff --git a/static/img/website/grid_4.png b/static/img/website/grid_4.png new file mode 100644 index 00000000..8428a9b0 Binary files /dev/null and b/static/img/website/grid_4.png differ diff --git a/static/img/website/header_ellipse.png b/static/img/website/header_ellipse.png new file mode 100644 index 00000000..c3da54ed Binary files /dev/null and b/static/img/website/header_ellipse.png differ diff --git a/static/img/website/socials_icon_1.png b/static/img/website/socials_icon_1.png new file mode 100644 index 00000000..27fc760b Binary files /dev/null and b/static/img/website/socials_icon_1.png differ diff --git a/static/img/website/socials_icon_10.png b/static/img/website/socials_icon_10.png new file mode 100644 index 00000000..119c4107 Binary files /dev/null and b/static/img/website/socials_icon_10.png differ diff --git a/static/img/website/socials_icon_2.png b/static/img/website/socials_icon_2.png new file mode 100644 index 00000000..e02e64ac Binary files /dev/null and b/static/img/website/socials_icon_2.png differ diff --git a/static/img/website/socials_icon_3.png b/static/img/website/socials_icon_3.png new file mode 100644 index 00000000..6cbfa169 Binary files /dev/null and b/static/img/website/socials_icon_3.png differ diff --git a/static/img/website/socials_icon_4.png b/static/img/website/socials_icon_4.png new file mode 100644 index 00000000..6094f698 Binary files /dev/null and b/static/img/website/socials_icon_4.png differ diff --git a/static/img/website/socials_icon_5.png b/static/img/website/socials_icon_5.png new file mode 100644 index 00000000..6c832979 Binary files /dev/null and b/static/img/website/socials_icon_5.png differ diff --git a/static/img/website/socials_icon_6.png b/static/img/website/socials_icon_6.png new file mode 100644 index 00000000..cd3f3e5d Binary files /dev/null and b/static/img/website/socials_icon_6.png differ diff --git a/static/img/website/socials_icon_7.png b/static/img/website/socials_icon_7.png new file mode 100644 index 00000000..4da99703 Binary files /dev/null and b/static/img/website/socials_icon_7.png differ diff --git a/static/img/website/socials_icon_8.png b/static/img/website/socials_icon_8.png new file mode 100644 index 00000000..ff236297 Binary files /dev/null and b/static/img/website/socials_icon_8.png differ diff --git a/static/img/website/socials_icon_9.png b/static/img/website/socials_icon_9.png new file mode 100644 index 00000000..acfde532 Binary files /dev/null and b/static/img/website/socials_icon_9.png differ diff --git a/static/img/website/st_hero_bottom_grid.png b/static/img/website/st_hero_bottom_grid.png new file mode 100644 index 00000000..0dbe5110 Binary files /dev/null and b/static/img/website/st_hero_bottom_grid.png differ diff --git a/static/img/website/st_hero_grid.png b/static/img/website/st_hero_grid.png new file mode 100644 index 00000000..c2c9ac3c Binary files /dev/null and b/static/img/website/st_hero_grid.png differ diff --git a/static/img/website/trusted-comp1.png b/static/img/website/trusted-comp1.png new file mode 100644 index 00000000..d8a48181 Binary files /dev/null and b/static/img/website/trusted-comp1.png differ diff --git a/static/img/website/trusted-comp2.png b/static/img/website/trusted-comp2.png new file mode 100644 index 00000000..e3060d70 Binary files /dev/null and b/static/img/website/trusted-comp2.png differ diff --git a/static/img/website/trusted-comp3.png b/static/img/website/trusted-comp3.png new file mode 100644 index 00000000..14ea5096 Binary files /dev/null and b/static/img/website/trusted-comp3.png differ diff --git a/static/img/website/trusted-comp4.png b/static/img/website/trusted-comp4.png new file mode 100644 index 00000000..a031001c Binary files /dev/null and b/static/img/website/trusted-comp4.png differ diff --git a/static/video/3d-streets-overview.mp4 b/static/video/3d-streets-overview.mp4 new file mode 100644 index 00000000..84b7a922 Binary files /dev/null and b/static/video/3d-streets-overview.mp4 differ