阿超 > scopedb官网首页

scopedb官网首页

2025-02-18

前端

我来到这个世界，为了看看太阳和蓝色的地平线。——《城门开》

https://github.com/scopedb/scopedb-site/pull/32

最近忙着给scopedb做了一个最简单的官网首页

这里说到一些细节吧，首先是适配移动端或者说小尺寸屏幕，这里在没有移动端对应UI设计图的情况下，我们采取pc的布局，因此字体单位使用的vw

然后是这张图片，未来可能会改为带动画的，效果会比较惊艳和抢眼

首页tsx如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
/**
 * 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 {

        }
    }
}

整个编写过程还是挺有意思的