diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml index 1d156d8d4..863707a8d 100644 --- a/.github/workflows/dev.yml +++ b/.github/workflows/dev.yml @@ -4,47 +4,49 @@ name: CI # Controls when the workflow will run on: - # Triggers the workflow on push request events but only for the main branch - push: - branches: [dev] + # Triggers the workflow on push request events but only for the main branch + push: + branches: [dev] - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: - # This workflow contains a single job called "build" - build: - # The type of runner that the job will run on - runs-on: ubuntu-latest - - # Steps represent a sequence of tasks that will be executed as part of the job - steps: - # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - - name: Check out latest code - uses: actions/checkout@v2 - - # Grab the required version of NodeJS - - name: Set Node.js - uses: actions/setup-node@v3 - with: - node-version: "18.17.0" - - # Install all the Node dependencies for Gatsby, using your package.json file. - - name: Install Dependencies - run: npm install --legacy-peer-deps - - # Speaks for itself no? - - name: Build Gatsby Site - run: npm run build - - # This was the hardest part for me to figure out - see article for more details - - name: Install Deployment SSH Key - uses: shimataro/ssh-key-action@v2 - with: - key: ${{secrets.deploy_key}} - known_hosts: ${{secrets.known_hosts}} - - # Finally, deploy it to your very own server - - name: Deploy To Live - run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_dev}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_dev}} + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - name: Check out latest code + uses: actions/checkout@v2 + + # Grab the required version of NodeJS + - name: Set Node.js + uses: actions/setup-node@v3 + with: + node-version: "18.17.0" + + # Install all the Node dependencies for Gatsby, using your package.json file. + - name: Install Dependencies + run: npm install --legacy-peer-deps + + # Speaks for itself no? + - name: Build Gatsby Site + run: npm run build + env: + GATSBY_RECAPTCHA_SITE_KEY: ${{ secrets.GATSBY_RECAPTCHA_SITE_KEY }} + + # This was the hardest part for me to figure out - see article for more details + - name: Install Deployment SSH Key + uses: shimataro/ssh-key-action@v2 + with: + key: ${{secrets.deploy_key}} + known_hosts: ${{secrets.known_hosts}} + + # Finally, deploy it to your very own server + - name: Deploy To Live + run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_dev}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_dev}} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 1408165da..b8c371ab0 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,47 +4,49 @@ name: CI # Controls when the workflow will run on: - # Triggers the workflow on push request events but only for the main branch - push: - branches: [main] + # Triggers the workflow on push request events but only for the main branch + push: + branches: [main] - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # A workflow run is made up of one or more jobs that can run sequentially or in parallel jobs: - # This workflow contains a single job called "build" - build: - # The type of runner that the job will run on - runs-on: ubuntu-latest - - # Steps represent a sequence of tasks that will be executed as part of the job - steps: - # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it - - name: Check out latest code - uses: actions/checkout@v2 - - # Grab the required version of NodeJS - - name: Set Node.js - uses: actions/setup-node@v3 - with: - node-version: "18.17.0" - - # Install all the Node dependencies for Gatsby, using your package.json file. - - name: Install Dependencies - run: npm install --legacy-peer-deps - - # Speaks for itself no? - - name: Build Gatsby Site - run: npm run build - - # This was the hardest part for me to figure out - see article for more details - - name: Install Deployment SSH Key - uses: shimataro/ssh-key-action@v2 - with: - key: ${{secrets.deploy_key}} - known_hosts: ${{secrets.known_hosts}} - - # Finally, deploy it to your very own server - - name: Deploy To Live - run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_main}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_main}} + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it + - name: Check out latest code + uses: actions/checkout@v2 + + # Grab the required version of NodeJS + - name: Set Node.js + uses: actions/setup-node@v3 + with: + node-version: "18.17.0" + + # Install all the Node dependencies for Gatsby, using your package.json file. + - name: Install Dependencies + run: npm install --legacy-peer-deps + + # Speaks for itself no? + - name: Build Gatsby Site + run: npm run build + env: + GATSBY_RECAPTCHA_SITE_KEY: ${{ secrets.GATSBY_RECAPTCHA_SITE_KEY }} + + # This was the hardest part for me to figure out - see article for more details + - name: Install Deployment SSH Key + uses: shimataro/ssh-key-action@v2 + with: + key: ${{secrets.deploy_key}} + known_hosts: ${{secrets.known_hosts}} + + # Finally, deploy it to your very own server + - name: Deploy To Live + run: rsync -avzh --delete -e 'ssh' public/ --rsync-path='mkdir -p ${{secrets.target_dir_main}} && rsync' ${{secrets.ssh_user}}@${{secrets.ssh_host}}:${{secrets.target_dir_main}} diff --git a/.gitignore b/.gitignore index 3ac05bf65..d0e9d4806 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ public/ node_modules/ .vscode/ .DS_Store -.env package-lock.json .idea/ +.env.development +.env.production \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 614a5fe90..0eec55683 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,3 +1,7 @@ +require("dotenv").config({ + path: `.env.${process.env.NODE_ENV}`, +}); + module.exports = { siteMetadata: { title: `The first modular blockchain network`, diff --git a/package.json b/package.json index c8ed77c96..e730a24ca 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "qs": "^6.11.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-google-recaptcha": "^3.1.0", "react-helmet": "^6.1.0", "react-in-viewport": "^1.0.0-alpha.30", "react-lottie-player": "^1.5.5", diff --git a/src/components/footer.js b/src/components/footer.js index 1760a2ad8..73bfe031d 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -1,12 +1,9 @@ -import * as React from "react"; +import React from "react"; import { Link } from "gatsby"; -import addToMailchimp from "gatsby-plugin-mailchimp"; +import SignUp from "./modals/signUp"; // import FooterBox from "../components/footer-box"; import FooterBox2 from "../components/footer-box-2"; -import ReactModal from "react-modal"; - -ReactModal.setAppElement("#___gatsby"); const navigation = { column1: { @@ -96,187 +93,86 @@ const navigation = { }, }; -class Footer extends React.Component { - constructor(props) { - super(props); - - this.state = { - email: "", - listFields: { - "group[57543]": "1", - }, - isModalOpen: false, - popupTitle: "", - msg: "", - }; - } - handleModalOpen = (event) => { - this.setState({ isModalOpen: true }); - document.body.style.overflow = "hidden"; - }; - - handleModalClose = (event) => { - this.setState({ isModalOpen: false }); - document.body.style.overflow = "unset"; - }; - - mailchimp(url) { - addToMailchimp(this.state.email, this.state.listFields, url) // listFields are optional if you are only capturing the email address. - .then((data) => { - this.setState({ msg: data.msg }); - if (data.result === "error" && data.msg.includes("is already subscribed")) { - this.setState({ success: true }); - this.setState({ isModalOpen: true }); - this.setState({ popupTitle: "Thank you!" }); - this.setState({ msg: "Thank you for subscribing!" }); - } else { - if (data.result === "success") { - this.setState({ success: true }); - this.setState({ isModalOpen: true }); - this.setState({ popupTitle: "Thank you!" }); - this.setState({ msg: this.state.msg }); - } else { - this.setState({ isModalOpen: true }); - this.setState({ popupTitle: "Error" }); - } - } - //console.log(data) - }) - .catch(() => {}); - } - - _handleSubmit = (e) => { - e.preventDefault(); - const listFields = {}; - - listFields["group[57543][1]"] = 1; - - this.setState( - (prevState) => ({ - listFields, - }), - () => { - if (this.state.email) { - this.mailchimp("https://celestia.us6.list-manage.com/subscribe/post?u=cde2461ba84f5279fff352829&id=8d165e36d3"); - } - } - ); - }; - - change = (e) => { - e.preventDefault(); - this.setState({ email: e.target.value }); - }; +const Footer = (props) => { + return ( + + ); +}; export default Footer; diff --git a/src/components/modals/signUp.js b/src/components/modals/signUp.js index df110ac9e..7273f3232 100644 --- a/src/components/modals/signUp.js +++ b/src/components/modals/signUp.js @@ -1,152 +1,107 @@ -import * as React from "react"; +import React, { useState, useRef } from "react"; import addToMailchimp from "gatsby-plugin-mailchimp"; -import Success from "./success"; +import ReactModal from "react-modal"; +import ReCAPTCHA from "react-google-recaptcha"; -export default class SignUp extends React.Component { - constructor(props) { - super(props); +ReactModal.setAppElement("#___gatsby"); - this.state = { - email: "", - developer: this.props.modalType === "developer" ? true : false, - operator: this.props.modalType === "operator" ? true : false, - newsletter: true, - success: false, - popupTitle: "Thank you", - msg: "", - }; - } +const SignUp = (props) => { + const [email, setEmail] = useState(""); + const [listFields, setListFields] = useState({ "group[57543]": "1" }); + const [isModalOpen, setIsModalOpen] = useState(false); + const [popupTitle, setPopupTitle] = useState("Thank you"); + const [msg, setMsg] = useState(""); + const [captchaError, setCaptchaError] = useState(""); - mailchimp(url) { - addToMailchimp(this.state.email, this.state.listFields, url) // listFields are optional if you are only capturing the email address. + const siteKey = process.env.GATSBY_RECAPTCHA_SITE_KEY; + const [token, setToken] = useState(null); + const reCaptchaRef = useRef(null); + + const handleChange = (e) => { + setEmail(e.target.value); + }; + + const onReCAPTCHAChange = (token) => { + setToken(token); + setCaptchaError(""); + }; + + const asyncScriptOnLoad = () => { + console.log("reCAPTCHA script loaded"); + }; + + const mailchimp = (url) => { + addToMailchimp(email, listFields, url) .then((data) => { - this.setState({ msg: data.msg }); + setMsg(data.msg); if (data.result === "error" && data.msg.includes("is already subscribed")) { - this.setState({ success: true }); - this.setState({ popupTitle: "Thank you!" }); - this.setState({ msg: "Thank you for subscribing!" }); + setPopupTitle("Thank you!"); + setMsg("Thank you for subscribing!"); + setIsModalOpen(true); } else { - if (data.result === "success") { - this.setState({ success: true }); - this.setState({ popupTitle: "Thank you!" }); - this.setState({ msg: this.state.msg }); - } else { - this.setState({ popupTitle: "Error" }); - } + setPopupTitle(data.result === "success" ? "Thank you!" : "Error"); + setIsModalOpen(true); } - //console.log(data) }) .catch(() => {}); - } + }; - _handleSubmit = (e) => { - e.preventDefault(); - const listFields = {}; + const handleModalClose = () => { + setIsModalOpen(false); + }; - if (this.state.newsletter) { - listFields["group[57543][1]"] = 1; - } - if (this.state.developer) { - listFields["group[57543][2]"] = 2; + const handleSubmit = async (e) => { + e.preventDefault(); + if (!token) { + setCaptchaError("Please complete the reCAPTCHA challenge!"); // Set captcha error message + return; } - if (this.state.operator) { - listFields["group[57543][4]"] = 4; + const updatedListFields = { ...listFields, "group[57543][1]": 1 }; + setListFields(updatedListFields); + if (email) { + mailchimp("https://celestia.us6.list-manage.com/subscribe/post?u=cde2461ba84f5279fff352829&id=8d165e36d3"); } - - this.setState( - (prevState) => ({ - listFields, - }), - () => { - if (this.state.email) { - this.mailchimp("https://celestia.us6.list-manage.com/subscribe/post?u=cde2461ba84f5279fff352829&id=8d165e36d3"); - } - } - ); }; - change = (e) => { - e.preventDefault(); - this.setState({ [e.target.id]: e.target.value }); - }; - changeCheckbox = (e) => { - this.setState({ [e.target.id]: e.target.checked }); - }; - render() { - return ( -
- {this.state.msg ? ( - - ) : ( -
-
-

Sign up to be the first to try our limited-access developer beta or validate on our testnet.

-
this._handleSubmit(e)}> -
- - this.change(e)} /> -
-
- -
-
-
- this.changeCheckbox(e)} - /> - -
-
-
-
- this.changeCheckbox(e)} - /> - -
-
-
-
-
- -
-
-
- this.changeCheckbox(e)} - /> - -
-
-
-
-
- -
-
+ + return ( +
+ +
+

{popupTitle}

+
+ +
+ +
+
+
+ + {captchaError &&
{captchaError}
} +
+
-
- )} + + +
- ); - } -} +
+ ); +}; + +export default SignUp; diff --git a/src/components/modules/banner.js b/src/components/modules/banner.js index b42765f83..4232a594d 100644 --- a/src/components/modules/banner.js +++ b/src/components/modules/banner.js @@ -1,46 +1,51 @@ -import * as React from "react" +import * as React from "react"; // import Image from "../imageComponent"; export default class Banner extends React.Component { - constructor() { - super(); - this.state = { - banner : true - } - } - closeBanner = () => { - const self = this; - document.getElementById("banner").classList.add("hide"); - setTimeout(function (){ - localStorage.setItem('modular-fellows-banner', 'true') - self.setState({banner:false}) - },600); - }; + constructor() { + super(); + this.state = { + banner: true, + }; + } + closeBanner = () => { + const self = this; + document.getElementById("banner").classList.add("hide"); + setTimeout(function () { + localStorage.setItem("modular-fellows-banner", "true"); + self.setState({ banner: false }); + }, 600); + }; - componentDidMount() { - if (localStorage.getItem('modular-fellows-banner')) { - this.setState({banner:false}) - } - } + componentDidMount() { + if (localStorage.getItem("modular-fellows-banner")) { + this.setState({ banner: false }); + } + } - render() { + render() { + return this.state.banner === true ? ( +
+
+ +
+
+
+
+ The first Celestia hackathon is live! Infinite Space Bazaar ends May 17 + {/*
☄️
*/} +
- return this.state.banner === true ?
-
-
-
- {/*
- {'Modular -
*/} -
Celestia Genesis Drop is live!
✨
- - -
- -
- -
-
-
: '' - } + +
+ +
+ +
+
+
+ ) : ( + "" + ); + } } diff --git a/src/datas/glossary/data.js b/src/datas/glossary/data.js index 01c9dcc62..0a94f696c 100644 --- a/src/datas/glossary/data.js +++ b/src/datas/glossary/data.js @@ -92,7 +92,7 @@ export const glossaries = [ { url: "data-availability-layer", title: "Data availability layer", - text: "A blockchain that provides for other types of chains, like rollups.", + text: "A blockchain that provides data availability for other types of chains, like rollups.", }, { url: "data-throughput", diff --git a/src/images/build/conduit.png b/src/images/build/conduit.png index e58d583ae..fbb423adf 100644 Binary files a/src/images/build/conduit.png and b/src/images/build/conduit.png differ diff --git a/src/images/ecosystem/conduit.png b/src/images/ecosystem/conduit.png index 895c69b45..7f9b39d68 100644 Binary files a/src/images/ecosystem/conduit.png and b/src/images/ecosystem/conduit.png differ diff --git a/src/pages/index.js b/src/pages/index.js index 4c8e9792f..20639dd53 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,5 +1,4 @@ -import React, { useState } from "react"; -import ReactModal from "react-modal"; +import React from "react"; import Layout from "../components/layout"; import { Link } from "gatsby"; @@ -13,7 +12,6 @@ import { exploreCelestia } from "../datas/home/explore-celestia"; import { socialChannels } from "../datas/home/social-channels"; import BackersSection from "../components/sections/backers-sections"; -import SignUp from "../components/modals/signUp"; import Image from "../components/imageComponent"; import CommunityItem from "../components/modules/community-item"; @@ -26,21 +24,8 @@ import lottiAnim1 from "../anim/trans-anim-1.json"; import lottiAnim2 from "../anim/trans-anim-2.json"; const IndexPage = () => { - const [isModalOpen, setIsModalOpen] = useState(false); - const [modalType] = useState(""); const enableBackers = false; - // const handleModalOpen = (event) => { - // setModalType(event.target.id); - // setIsModalOpen(true); - // document.body.style.overflow = "hidden"; - // }; - - const handleModalClose = (event) => { - setIsModalOpen(false); - document.body.style.overflow = "unset"; - }; - return ( @@ -260,14 +245,6 @@ const IndexPage = () => {
- -
- - -
-
); diff --git a/src/pages/markdown-pages/what-is-da/What is data availability.md b/src/pages/markdown-pages/what-is-da/What is data availability.md index e558fc05f..b0832fb35 100644 --- a/src/pages/markdown-pages/what-is-da/What is data availability.md +++ b/src/pages/markdown-pages/what-is-da/What is data availability.md @@ -11,7 +11,7 @@ title: "What is data availability?" - + What’s stopping crypto applications from becoming accessible to everyday people? diff --git a/src/scss/modules/header.scss b/src/scss/modules/header.scss index b5e8418c4..07afe4df5 100644 --- a/src/scss/modules/header.scss +++ b/src/scss/modules/header.scss @@ -1,511 +1,525 @@ @import "../hamburgers"; -header{ - height:126px; - padding:30px 0; - //position:fixed; - top:0; - width:100%; - left:0; - z-index:9999; - background-color: rgba(255, 255, 255, 0); - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - - position:sticky; - top:0; - - @include media-breakpoint-down(md) { - height:80px; - padding:10px 0; - } - - &.banner-show{ - top:87px; - } - - .hamburger{ - border:none; - float:left; - background:black; - border-radius:5px; - padding:8px 7px; - width:30px; - height:30px; - position: relative; - z-index:101; - display:none; - - .hamburger-inner{ - top:0; - } - - @include media-breakpoint-down(lg) { - display:block; - } - - .hamburger-box{ - width:16px; - height:12px; - margin-top:1px; - display:block; - - span{ - - background-color:white; - width:16px; - height:2px; - - &:before, &:after{ - background-color:white; - width:16px; - height:2px; - } - - &:before{ - top:6px; - } - - &:after{ - top:12px; - } - - } - } - - &.is-active { - .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{ - background:white; - } - - .hamburger-box{ - margin-top:-6px; - } - - .hamburger-inner{ - &:after{ - top:20px - } - } - } - - - } - - .blurry{ - position:absolute; - left:0; - top:0; - width:100%; - height:100%; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - background-color: rgba(255, 255, 255, 0); - opacity:0; - z-index:0; - } - - &.blur:not(.menu-opened){ - padding:10px 0; - height:80px; - .blurry{ - -webkit-backdrop-filter: blur(20px); - backdrop-filter: blur(20px); - background-color: rgba(255, 255, 255, 0.8); - opacity:1; - } - - .logo{ - width:170px; - } - - .submenu{ - padding:15px 10px; - } - - nav{ - ul{ - li{ - font-size:14px; - padding:16px; - - .submenu{ - ul{ - li{ - padding:10px 16px; - } - } - } - - @include media-breakpoint-down(lg) { - font-size:24px; - padding:20px 12px; - } - - &:hover{ - .submenu{ - top:50px; - } - } - } - } - } - } - - .container{ - z-index:1; - position:relative; - } - - .logo{ - float:left; - margin-top:5px; - width:220px; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - position:relative; - - @include media-breakpoint-down(xl) { - width:200px; - } - - img{ - width:100%; - } - } - - nav{ - float:right; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - - ul{ - list-style:none; - - li{ - float:left; - padding:20px 15px; - font-family: $ruberoid; - font-weight:500; - font-size: 18px; - color: #000000; - letter-spacing: 0.22px; - text-align: right; - line-height: 23px; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - - .hasSubmenu{ - cursor:pointer; - } - - @include media-breakpoint-down(md) { - opacity:0; - transition-delay: 0ms; - transition-duration:200ms; - } - - - a{ - text-decoration:none; - - &:hover{ - color:inherit; - } - - &.active{ - border-bottom:2px solid black; - } - } - - i{ - font-size:12px; - margin-left:5px; - margin-right:-10px; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - display:inline-block; - transform:rotate(0deg); - } - - .submenu{ - border-radius: 10px; - padding:15px 25px; - max-width:360px; - position:absolute; - transition:600ms opacity cubic-bezier(0.83, 0, 0.17, 1), 600ms padding cubic-bezier(0.83, 0, 0.17, 1); - opacity:0; - top:-560px; - right:10px; - - background: rgba(249, 249, 249, .95); - - @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { - background-color: rgba(255, 255, 255,.7); - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - } - - @include media-breakpoint-down(lg) { - background:none; - position: relative; - padding:0px 25px; - top:20px; - transform:none; - opacity:1; - max-height:0; - overflow:hidden; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - - ul{ - margin-top:0px; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - } - } - - ul{ - list-style: none; - padding-left:0; - - li{ - padding:10px 0; - border-bottom: 1px solid rgba(0, 0, 0,.07); - display:block; - float:none; - text-align:left; - - &:last-child{ - border:none; - } - - .subtitle{ - font-family: $ruberoid; - font-weight: 500; - font-size: 12px; - color: #777777; - letter-spacing: 0; - line-height:1.25em; - } - - .title{ - font-family: $ruberoid; - font-weight: 600; - font-size: 14px; - color: #000000; - letter-spacing: 0; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - } - - .icon{ - background: #000000; - width:32px; - height:32px; - border-radius: 50%; - text-align:center; - transition:600ms all cubic-bezier(0.83, 0, 0.17, 1); - - img{ - width:24px; - height:100%; - } - } - - &:hover{ - .title{ - color:$purple; - } - .icon{ - background:$purple; - } - } - } - } - } - - @include media-breakpoint-down(xl) { - padding:20px 12px; - font-size:16px; - - i{ - font-size:10px; - margin-left:2px; - } - } - - - &:hover{ - i{ - transform:rotate(180deg); - } - - .submenu{ - opacity:1; - top:60px; - min-width:300px; - - @include media-breakpoint-down(md) { - top:15px; - } - - } - } - - &:hover, &:focus{ - .submenu{ - max-height:600px; - top:60px; - padding:15px 25px; - - @include media-breakpoint-down(lg) { - top:15px; - } - } - } - &:nth-last-child(2){ - .submenu{ - right:0; - } - } - &:nth-last-child(3){ - .submenu{ - right:0; - } - } - } - } - } - - @include media-breakpoint-down(lg) { - - .logo{ - margin:10px auto 0; - display:block; - float:none; - width:180px !important; - z-index:101; - } - - nav{ - top:-200vh; - left:0; - height:100vh; - position:fixed; - width:100%; - -webkit-backdrop-filter: blur(10px); - backdrop-filter: blur(10px); - background-color: rgba(255, 255, 255, .7); - z-index:100; - - ul{ - margin-top:130px; - - li{ - float:none; - font-size: 24px; - letter-spacing: 0.3px; - line-height: 23px; - text-align:left; - - i{ - font-size:12px; - } - } - } - } - - &.menu-opened{ - nav{ - top:0; - ul{ - li{ - opacity: 1; - transition-delay:400ms; - } - } - } - } - } - - @include media-breakpoint-down(md) { - - .logo{ - width:140px !important; - } - } +header { + height: 126px; + padding: 30px 0; + //position:fixed; + top: 0; + width: 100%; + left: 0; + z-index: 9999; + background-color: rgba(255, 255, 255, 0); + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + + position: sticky; + top: 0; + + @include media-breakpoint-down(md) { + height: 80px; + padding: 10px 0; + } + + &.banner-show { + top: 87px; + } + + .hamburger { + border: none; + float: left; + background: black; + border-radius: 5px; + padding: 8px 7px; + width: 30px; + height: 30px; + position: relative; + z-index: 101; + display: none; + + .hamburger-inner { + top: 0; + } + + @include media-breakpoint-down(lg) { + display: block; + } + + .hamburger-box { + width: 16px; + height: 12px; + margin-top: 1px; + display: block; + + span { + background-color: white; + width: 16px; + height: 2px; + + &:before, + &:after { + background-color: white; + width: 16px; + height: 2px; + } + + &:before { + top: 6px; + } + + &:after { + top: 12px; + } + } + } + + &.is-active { + .hamburger-inner, + .hamburger-inner:after, + .hamburger-inner:before { + background: white; + } + + .hamburger-box { + margin-top: -6px; + } + + .hamburger-inner { + &:after { + top: 20px; + } + } + } + } + + .blurry { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + background-color: rgba(255, 255, 255, 0); + opacity: 0; + z-index: 0; + } + + &.blur:not(.menu-opened) { + padding: 10px 0; + height: 80px; + .blurry { + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); + background-color: rgba(255, 255, 255, 0.8); + opacity: 1; + } + + .logo { + width: 170px; + } + + .submenu { + padding: 15px 10px; + } + + nav { + ul { + li { + font-size: 14px; + padding: 16px; + + .submenu { + ul { + li { + padding: 10px 16px; + } + } + } + + @include media-breakpoint-down(lg) { + font-size: 24px; + padding: 20px 12px; + } + + &:hover { + .submenu { + top: 50px; + } + } + } + } + } + } + + .container { + z-index: 1; + position: relative; + } + + .logo { + float: left; + margin-top: 5px; + width: 220px; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + position: relative; + + @include media-breakpoint-down(xl) { + width: 200px; + } + + img { + width: 100%; + } + } + + nav { + float: right; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + + ul { + list-style: none; + + li { + float: left; + padding: 20px 15px; + font-family: $ruberoid; + font-weight: 500; + font-size: 18px; + color: #000000; + letter-spacing: 0.22px; + text-align: right; + line-height: 23px; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + + .hasSubmenu { + cursor: pointer; + } + + @include media-breakpoint-down(md) { + opacity: 0; + transition-delay: 0ms; + transition-duration: 200ms; + } + + a { + text-decoration: none; + + &:hover { + color: inherit; + } + + &.active { + border-bottom: 2px solid black; + } + } + + i { + font-size: 12px; + margin-left: 5px; + margin-right: -10px; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + display: inline-block; + transform: rotate(0deg); + } + + .submenu { + border-radius: 10px; + padding: 15px 25px; + max-width: 360px; + position: absolute; + transition: 600ms opacity cubic-bezier(0.83, 0, 0.17, 1), 600ms padding cubic-bezier(0.83, 0, 0.17, 1); + opacity: 0; + top: -560px; + right: 10px; + + background: rgba(249, 249, 249, 0.95); + + @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) { + background-color: rgba(255, 255, 255, 0.7); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + } + + @include media-breakpoint-down(lg) { + background: none; + position: relative; + padding: 0px 25px; + top: 20px; + transform: none; + opacity: 1; + max-height: 0; + overflow: hidden; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + + ul { + margin-top: 0px; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + } + } + + ul { + list-style: none; + padding-left: 0; + + li { + padding: 10px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.07); + display: block; + float: none; + text-align: left; + + &:last-child { + border: none; + } + + .subtitle { + font-family: $ruberoid; + font-weight: 500; + font-size: 12px; + color: #777777; + letter-spacing: 0; + line-height: 1.25em; + } + + .title { + font-family: $ruberoid; + font-weight: 600; + font-size: 14px; + color: #000000; + letter-spacing: 0; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + } + + .icon { + background: #000000; + width: 32px; + height: 32px; + border-radius: 50%; + text-align: center; + transition: 600ms all cubic-bezier(0.83, 0, 0.17, 1); + + img { + width: 24px; + height: 100%; + } + } + + &:hover { + .title { + color: $purple; + } + .icon { + background: $purple; + } + } + } + } + } + + @include media-breakpoint-down(xl) { + padding: 20px 12px; + font-size: 16px; + + i { + font-size: 10px; + margin-left: 2px; + } + } + + &:hover { + i { + transform: rotate(180deg); + } + + .submenu { + opacity: 1; + top: 60px; + min-width: 300px; + + @include media-breakpoint-down(md) { + top: 15px; + } + } + } + + &:hover, + &:focus { + .submenu { + max-height: 600px; + top: 60px; + padding: 15px 25px; + + @include media-breakpoint-down(lg) { + top: 15px; + } + } + } + &:nth-last-child(2) { + .submenu { + right: 0; + } + } + &:nth-last-child(3) { + .submenu { + right: 0; + } + } + } + } + } + + @include media-breakpoint-down(lg) { + .logo { + margin: 10px auto 0; + display: block; + float: none; + width: 180px !important; + z-index: 101; + } + + nav { + top: -200vh; + left: 0; + height: 100vh; + position: fixed; + width: 100%; + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + background-color: rgba(255, 255, 255, 0.7); + z-index: 100; + + ul { + margin-top: 130px; + + li { + float: none; + font-size: 24px; + letter-spacing: 0.3px; + line-height: 23px; + text-align: left; + + i { + font-size: 12px; + } + } + } + } + + &.menu-opened { + nav { + top: 0; + ul { + li { + opacity: 1; + transition-delay: 400ms; + } + } + } + } + } + + @include media-breakpoint-down(md) { + .logo { + width: 140px !important; + } + } } - -.banner{ - background-color: rgba(255,255,255,0.3); - box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; - backdrop-filter: blur(50px); - padding:25px 0; - color: #000000; - font-family: $ruberoid; - font-size: 18px; - font-weight: bold; - letter-spacing: 0.23px; - line-height: 26px; - z-index:100; - position:relative; - top:8px; - left:10px; - width:100%; - text-align:center; - overflow: hidden; - border-radius: 10px; - width: calc(100% - 20px); - background: linear-gradient(90deg, rgba(150, 50, 238, 0.50) 0%, rgba(241, 177, 123, 0.50) 35.42%, rgba(135, 204, 233, 0.50) 66.15%, rgba(172, 124, 209, 0.60) 99.48%); - background-size: 300% 300%; - animation: gradient 10s ease infinite; - filter: brightness(1.3); - @include transition(500ms all ease-in-out); - - .w-80{ - width:80%; - margin:auto; - } - - @keyframes gradient { - 0% { - background-position: 100% 50%; - } - 50% { - background-position: 0% 50%; - } - 100% { - background-position: 100% 50%; - } - } - - // @include media-breakpoint-down(md) { - // background:url(../images/modular-summit.svg) no-repeat scroll center left rgba(255,255,255,0.3); - // background-size:180px; - // } - - &.hide{ - margin-top:-100px; - } - - img{ - width:180px; - position:absolute; - top:-55px; - right:0; - } - - .container{ - position:relative; - } - - .close-banner{ - position:absolute; - top:14px; - font-size:12px; - right:0; - cursor:pointer; - @include media-breakpoint-down(md) { - top:14px; - } - - @include media-breakpoint-down(sm) { - top:4px; - } - } +.banner { + background-color: rgba(255, 255, 255, 0.2); + box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; + backdrop-filter: blur(30px); + padding: 12px 0; + color: #000000; + font-family: $ruberoid; + font-size: 18px; + font-weight: bold; + letter-spacing: 0.23px; + line-height: 26px; + z-index: 100; + position: relative; + top: 0px; + left: 0px; + width: 100%; + text-align: center; + overflow: hidden; + width: 100%; + background-size: 300% 300%; + filter: brightness(1.3); + @include transition(500ms all ease-in-out); + + .w-80 { + width: 80%; + margin: auto; + } + + @keyframes gradient { + 0% { + background-position: 100% 50%; + } + 50% { + background-position: 0% 50%; + } + 100% { + background-position: 100% 50%; + } + } + + // @include media-breakpoint-down(md) { + // background:url(../images/modular-summit.svg) no-repeat scroll center left rgba(255,255,255,0.3); + // background-size:180px; + // } + + &.hide { + margin-top: -100px; + } + + img { + width: 180px; + position: absolute; + top: -55px; + right: 0; + } + + .container { + position: relative; + } + + .close-banner { + position: absolute; + top: 18px; + right: 18px !important; + font-size: 12px; + right: 0; + cursor: pointer; + @include media-breakpoint-down(md) { + top: 4px; + right: 10px !important; + } + } + + .banner-text { + text-wrap: pretty; + font-size: 16px; + @include media-breakpoint-down(sm) { + font-size: 14px; + line-height: 1.35em; + } + .emoji { + font-size: 32px; + display: inline-block; + transform: translateY(4px); + @include media-breakpoint-down(sm) { + font-size: 24px; + } + } + } + .button-simple { + font-size: 14px; + padding: 10px 20px; + @include media-breakpoint-down(sm) { + font-size: 12px; + padding: 8px 16px; + } + } } diff --git a/src/scss/sections/home-hero-section.scss b/src/scss/sections/home-hero-section.scss index cc4df6cec..6fbaa5ee1 100644 --- a/src/scss/sections/home-hero-section.scss +++ b/src/scss/sections/home-hero-section.scss @@ -6,7 +6,7 @@ // padding-top: 120px; // padding-bottom: 180px; height: 90vh; - max-height: 932px; + max-height: 600px; display: flex; align-items: center; padding: 0px; diff --git a/static/article-og.png b/static/article-og.png new file mode 100644 index 000000000..6efccdd89 Binary files /dev/null and b/static/article-og.png differ