scopedb官网首页

import React from "react";
import styles from './index.module.css';
import Layout from "@theme/Layout";
import clsx from "clsx";

function HomepageBanner(): React.JSX.Element {
  return (
    <div className={styles.scopeBanner}>
      <div className={styles.scopeBannerContent}>
        <div className={styles.scopeBannerFeature}>10x Performance, 0.1x Cost, 100x More Elastic</div>
        <h1 className={styles.scopeBannerTitle}>
          <span className={styles.scopeBannerBrand}>The Future</span> of Cloud Data Management
        </h1>
        <div className={styles.scopeBannerIntro}>
          ScopeDB is a database that runs directly on top of any commodity object storage,
          unleashing the power of cloud elasticity and workload isolation.
          It is designed explicitly for data workloads with massive writes, any-scale reads,
          and flexible schema.
        </div>
        <div className={styles.scopeBtns}>
          <a href="/contact" className={clsx(styles.scopeBtn, styles.scopeBtnPrimary)}>Book a Demo</a>
          <a href="/blog/manage-observability-data-in-petabytes" className={styles.scopeBtn}>Read More</a>
        </div>
      </div>
      <div className={styles.scopeBannerImgView}>
        <img src="/homepage/homepage-hero.png" className={styles.scopeBannerImg} alt="hero"/>
      </div>
    </div>
  );
}

export default function Home(): React.JSX.Element {
  return (
    <Layout
      description="ScopeDB is a database built directly on top of S3 and unleashes the power of cloud elasticity and workload isolation.">
      <HomepageBanner/>
    </Layout>
  );
}

/**
 * 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;
}

.scopeBtns {
    display: flex;
    justify-content: left;
    gap: 10px;
    margin-top: 20px;;
}

.scopeBtn {
    padding: 6px 16px;
    border-radius: 10px;
    margin: 5px 5px 5px;
    background: white;
    color: #5b5b5b;
    border: 1px solid rgba(215, 215, 215);
    font-family: Poppins, sans-serif;
    transition: all .25s;
    cursor: pointer;
    font-size: 1vw;
    white-space: nowrap;
}

.scopeBtnPrimary {
    background: rgb(73 64 60);
    color: white;
    border: none;
}

.scopeBtn:hover {
    color: #5b5b5b;
    text-decoration: none;
    box-shadow: 0 10px 20px -10px rgba(215, 215, 215);
    transform: translateY(-3px);
}

.scopeBtnPrimary:hover {
    color: white;
    text-decoration: none;
    box-shadow: 0 10px 20px -10px rgb(73 64 60);
    transform: translateY(-3px);
}

@media (min-width: 997px) {
    .scopeBanner {
        padding-left: var(--global-padding);
    }
}

@media (max-width: 996px) {
    .scopeBanner {
        padding-left: calc(var(--global-padding) / 2);
    }
}


.scopeBanner {
    overflow: hidden;
    display: flex;
    justify-content: center;

    .scopeBannerContent {
        margin-top: 15%;

        .scopeBannerFeature {
            font-size: 2.3vw;
        }

        .scopeBannerTitle {
            font-size: 4.6vw;

            .scopeBannerBrand {
                color: rgba(0, 115, 213);
            }
        }

        .scopeBannerIntro {
            font-size: 1.2vw;
        }

    }

    .scopeBannerImgView {
        height: 100%;
        width: 100vw;

        .scopeBannerImg {

        }
    }
}