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 */}
+
+
+
+
+
+
+ {
+ location.href = "";
+ }}
+ />
+
+
+ {
+ location.href = "/blog/";
+ }}
+ />
+
+
+ {
+ location.href = "/docs/";
+ }}
+ />
+
+
+
+
+
{
+ location.href = "https://3dstreet.app";
+ }}
+ />
+
+ {
+ location.href = "https://3dstreet.app";
+ }}
+ />
+
+
+
+
+ {
+ location.href = "";
+ }}
+ />
+
+
+ {
+ location.href = "/docs/";
+ }}
+ />
+
+
+ {
+ location.href = "/docs/";
+ }}
+ />
+
+
+
+
+
+
+
+ {/* 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
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+ {/* 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.
+
+
+
{
+ location.href = "https://3dstreet.app";
+ }}
+ />
+
+
+
+
+
+
+
+
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.
+
+
+
{
+ location.href = "https://3dstreet.app";
+ }}
+ />
+
+
+
+
+
+
+
+
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.
+
+
+
{
+ location.href = "https://3dstreet.app";
+ }}
+ />
+
+
+
+
+
+
+
+
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.
+
+
+
{
+ location.href = "https://3dstreet.app";
+ }}
+ />
+
+
+
+
+
+
+
+ {/* BLOG SECTION */}
+
+
+
+
+
Latest blog posts
+
+ {/* Latest blog posts associated with 3DStreet */}
+
+
+
+
{
+ location.href = "/blog/";
+ }}
+ />
+
+
+
+ {/* 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.
+
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+
Contribute together on GitHub
+
+ See 3DStreet Core and Editor source code and help make it
+ better.
+
+
+
+
+
+ 3DStreet GitHub Repo
+
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* START SECTION */}
+
+ Ready to reimagine a safer greener world?
+ {
+ location.href = "https://3dstreet.app";
+ }}
+ />
+
+
+ {/* FOOTER SECTION */}
+
+
+ {footerLinks.map(({ title, items }, idx) => (
+
+
{title}
+
+ {items.map(({ label, to, href }, idx) => (
+
+
+ {label}
+
+
+ ))}
+
+
+ ))}
+
+
+
+
+ ©2024 3DStreet LLC. 3DStreet is a registered trademark of 3DStreet
+ LLC.
+
+
+
+ >
+ );
+}
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 (
+ onClick(e)}
+ disabled={disabled}
+ type={type}
+ className={clsx(
+ styles.wrapper,
+ styles[`variant-${variant}`],
+ isActive && styles.active,
+ disabled && styles.disabled,
+ className
+ )}
+ >
+ {icon && {icon}
}
+ {label}
+
+ );
+};
+
+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 (
+ (
+
+ )}
+ />
+ );
+};
+
+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 (
-
- );
-}
-
-export default function Home() {
- const {siteConfig} = useDocusaurusContext();
- // return (
- //
- //
- //
- //
- //
- //
- // );
-
- return (
- <>
-
-
-
- 3DStreet - open-source 3d street editor for safer streets
-
-
-
-
-
- {/* header start */}
-
- {/* header end */}
- {/* banner start */}
-
- {/* banner end */}
- {/* scenes start */}
-
-
-
- 3DStreet Scene Gallery
-
-
-
-
-
- {/* 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
-
-
-
-
- {/* 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