feat: 添加首页模板
This commit is contained in:
landaiqing
BIN
src/assets/images/test/1011.jpg
Normal file
BIN
src/assets/images/test/1011.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/images/test/332.jpg
Normal file
BIN
src/assets/images/test/332.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/assets/images/test/430.jpg
Normal file
BIN
src/assets/images/test/430.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/assets/images/test/47.jpg
Normal file
BIN
src/assets/images/test/47.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/images/test/526.jpg
Normal file
BIN
src/assets/images/test/526.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
src/assets/images/test/535.jpg
Normal file
BIN
src/assets/images/test/535.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@@ -1,17 +1,4 @@
|
|||||||
:root {
|
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
|
||||||
// 滚动条整体部分
|
// 滚动条整体部分
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
/* latin-ext */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Bebas Neue';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2');
|
|
||||||
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
|
||||||
}
|
|
||||||
/* latin */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Bebas Neue';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
font-display: swap;
|
|
||||||
src: url(https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
|
|
||||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
||||||
}
|
|
||||||
@@ -1,41 +1,39 @@
|
|||||||
//@import url('./fonts.less');
|
//*,
|
||||||
|
//*:after,
|
||||||
*,
|
//*:before {
|
||||||
*:after,
|
// box-sizing: border-box;
|
||||||
*:before {
|
//}
|
||||||
box-sizing: border-box;
|
//
|
||||||
}
|
//html {
|
||||||
|
// color-scheme: light only;
|
||||||
html {
|
//}
|
||||||
color-scheme: light only;
|
//
|
||||||
}
|
//body {
|
||||||
|
// display: flex;
|
||||||
body {
|
// place-items: center;
|
||||||
display: flex;
|
// justify-content: center;
|
||||||
place-items: center;
|
// min-height: 100vh;
|
||||||
justify-content: center;
|
// touch-action: none;
|
||||||
min-height: 100vh;
|
// font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
|
||||||
touch-action: none;
|
// padding: 1rem;
|
||||||
font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
|
// background-image: url("@/assets/images/background.png");
|
||||||
padding: 1rem;
|
//}
|
||||||
background-image: url("@/assets/images/background.png");
|
//
|
||||||
}
|
//body::before {
|
||||||
|
// --line: color-mix(in lch, canvasText 25%, transparent);
|
||||||
body::before {
|
// --size: 60px;
|
||||||
--line: color-mix(in lch, canvasText 25%, transparent);
|
// content: "";
|
||||||
--size: 60px;
|
// height: 100vh;
|
||||||
content: "";
|
// width: 100vw;
|
||||||
height: 100vh;
|
// position: fixed;
|
||||||
width: 100vw;
|
// background:
|
||||||
position: fixed;
|
// linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size),
|
||||||
background:
|
// linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
|
||||||
linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size),
|
// //-webkit-mask: linear-gradient(-15deg, transparent 60%, white);
|
||||||
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
|
// mask: linear-gradient(-15deg, transparent 60%, white);
|
||||||
//-webkit-mask: linear-gradient(-15deg, transparent 60%, white);
|
// top: 0;
|
||||||
mask: linear-gradient(-15deg, transparent 60%, white);
|
// z-index: -1;
|
||||||
top: 0;
|
//}
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
article {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
@@ -1,9 +1,9 @@
|
|||||||
import React, { useEffect } from 'react'
|
import React, { useEffect } from 'react'
|
||||||
import './index.less'
|
import styles from './index.module.less'
|
||||||
import { gsap } from 'gsap'
|
import { gsap } from 'gsap'
|
||||||
const BlurCard: React.FC = () => {
|
const BlurCard: React.FC = () => {
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const UPDATE = ({ x, y}) => {
|
const UPDATE = ({ x, y }: { x: any; y: any }) => {
|
||||||
gsap.set(document.documentElement, {
|
gsap.set(document.documentElement, {
|
||||||
'--x': gsap.utils.mapRange(0, window.innerWidth, -1, 1, x),
|
'--x': gsap.utils.mapRange(0, window.innerWidth, -1, 1, x),
|
||||||
'--y': gsap.utils.mapRange(0, window.innerHeight, -1, 1, y),
|
'--y': gsap.utils.mapRange(0, window.innerHeight, -1, 1, y),
|
||||||
@@ -18,12 +18,12 @@ const BlurCard: React.FC = () => {
|
|||||||
<img src='https://assets.codepen.io/605876/osaka-sky.jpeg' alt='' />
|
<img src='https://assets.codepen.io/605876/osaka-sky.jpeg' alt='' />
|
||||||
<h3>Osaka</h3>
|
<h3>Osaka</h3>
|
||||||
<img src='https://assets.codepen.io/605876/osaka-tower.png' alt='' />
|
<img src='https://assets.codepen.io/605876/osaka-tower.png' alt='' />
|
||||||
<div className='blur'>
|
<div className={styles.blur}>
|
||||||
<img src='https://assets.codepen.io/605876/osaka.jpeg' alt='' />
|
<img src='https://assets.codepen.io/605876/osaka.jpeg' alt='' />
|
||||||
<div></div>
|
<div></div>
|
||||||
-->
|
-->
|
||||||
</div>
|
</div>
|
||||||
<div className='content'>
|
<div className={styles.content}>
|
||||||
<p>
|
<p>
|
||||||
<svg
|
<svg
|
||||||
xmlns='http://www.w3.org/2000/svg'
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
@@ -36,9 +36,9 @@ const BlurCard: React.FC = () => {
|
|||||||
d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM4.575 15.6a8.25 8.25 0 0 0 9.348 4.425 1.966 1.966 0 0 0-1.84-1.275.983.983 0 0 1-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453 1.453 0 0 1 2.328-.377L16.5 15h.628a2.25 2.25 0 0 1 1.983 1.186 8.25 8.25 0 0 0-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.575 15.6Z'
|
d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM4.575 15.6a8.25 8.25 0 0 0 9.348 4.425 1.966 1.966 0 0 0-1.84-1.275.983.983 0 0 1-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453 1.453 0 0 1 2.328-.377L16.5 15h.628a2.25 2.25 0 0 1 1.983 1.186 8.25 8.25 0 0 0-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.575 15.6Z'
|
||||||
clipRule='evenodd'></path>
|
clipRule='evenodd'></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span>Osaka Castle</span>
|
<span>GuGong GuGong</span>
|
||||||
</p>
|
</p>
|
||||||
<p>Osaka, China</p>
|
<p>GuGong, China</p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</>
|
</>
|
||||||
|
|||||||
819
src/components/HomeIndex/index.less
Normal file
819
src/components/HomeIndex/index.less
Normal file
@@ -0,0 +1,819 @@
|
|||||||
|
//*,
|
||||||
|
//*:after,
|
||||||
|
//*:before {
|
||||||
|
// box-sizing: border-box;
|
||||||
|
//}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--border: hsl(0 0% 80%);
|
||||||
|
--card: hsl(0 0% 98%);
|
||||||
|
--element: hsl(0 0% 90%);
|
||||||
|
--accent: hsl(240 38% 60%);
|
||||||
|
--panel: hsl(240 38% 98%);
|
||||||
|
}
|
||||||
|
|
||||||
|
//html {
|
||||||
|
// color-scheme: light only;
|
||||||
|
//}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
|
||||||
|
Helvetica, Arial, sans-serif, system-ui;
|
||||||
|
timeline-scope: --scroller;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
--size: 60px;
|
||||||
|
--line: hsl(0 0% 0% / 0.15);
|
||||||
|
content: '';
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
position: fixed;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
var(--line) 1px,
|
||||||
|
transparent 1px var(--size)
|
||||||
|
)
|
||||||
|
50% 50% / var(--size) var(--size),
|
||||||
|
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
|
||||||
|
var(--size) var(--size);
|
||||||
|
-webkit-mask: linear-gradient(-15deg, transparent 30%, white);
|
||||||
|
mask: linear-gradient(-15deg, transparent 30%, white);
|
||||||
|
top: 0;
|
||||||
|
transform-style: flat;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
min-height: 200vh;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 1rem;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(3rem, 4.5vw + 1rem, 10rem);
|
||||||
|
width: 20ch;
|
||||||
|
max-width: 100vw;
|
||||||
|
font-weight: 800;
|
||||||
|
text-wrap: balance;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 span {
|
||||||
|
color: hsl(260 80% 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(1.5rem, 3vw + 1rem, 8rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.25rem;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
width: 80ch;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav button {
|
||||||
|
width: 44px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
z-index: 3;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroller {
|
||||||
|
position: relative;
|
||||||
|
min-height: 200vh;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
view-timeline: --scroller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
max-width: 75%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero a {
|
||||||
|
color: canvas;
|
||||||
|
background: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
font-weight: bold;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero a::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: hsl(0 0% 100% / 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero a:is(:hover, :focus-visible)::after {
|
||||||
|
background: hsl(0 0% 100% / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
width: clamp(320px, 50vw, 750px);
|
||||||
|
/* width: 680px;*/
|
||||||
|
max-width: calc(100vw - 2rem);
|
||||||
|
border-radius: 18px;
|
||||||
|
border: 2px solid var(--accent);
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: repeat(6, 60px);
|
||||||
|
gap: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
box-shadow: 0 32px 32px rgba(23,22,24,.04),0 16px 16px rgba(23,22,24,.04),0 8px 8px rgba(23,22,24,.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroller .panel {
|
||||||
|
background: var(--panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*@media (max-width: 768px) {
|
||||||
|
.panel {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
|
||||||
|
.panel__row {
|
||||||
|
container-type: size;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
--span: max(45vw, 260px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroller .panel div {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticker .panel {
|
||||||
|
border-color: transparent;
|
||||||
|
background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card wizardry */
|
||||||
|
:root {
|
||||||
|
--entity-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100cqh;
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow:
|
||||||
|
0 3px 4px rgba(23,22,24,.04),
|
||||||
|
0 1px 2px rgba(23,22,24,.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__column {
|
||||||
|
width: 100cqh;
|
||||||
|
height: 100cqh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__column:last-of-type {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__avatar {
|
||||||
|
height: var(--entity-size);
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background: var(--element);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__avatar * {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 100%;
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.image svg {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
.card__avatar img {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--one .card__column:first-of-type,
|
||||||
|
.card--four .card__column:first-of-type,
|
||||||
|
.card--two .card__column:first-of-type {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.card__content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__details {
|
||||||
|
height: 100cqh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 58cqi;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__dummy .text {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--one .card__dummy,
|
||||||
|
.card--four .card__dummy {
|
||||||
|
padding-left: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--one .card__dummy .text:first-of-type,
|
||||||
|
.card--four .card__dummy .text:first-of-type {
|
||||||
|
width: 85%;
|
||||||
|
}
|
||||||
|
.card--one .card__dummy .text:last-of-type,
|
||||||
|
.card--four .card__dummy .text:last-of-type {
|
||||||
|
width: 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__dummy {
|
||||||
|
height: 160cqh;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
height: 0.8rem;
|
||||||
|
background: var(--element);
|
||||||
|
border-radius: 100px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
height: var(--entity-size);
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background: var(--element);
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__company {
|
||||||
|
height: var(--entity-size);
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background: var(--element);
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.youtube {
|
||||||
|
background: #FF0000;
|
||||||
|
}
|
||||||
|
.slack {
|
||||||
|
background: #4A154B;
|
||||||
|
}
|
||||||
|
.headspace {
|
||||||
|
background: #F47D31;
|
||||||
|
}
|
||||||
|
.alexa {
|
||||||
|
background: #00CAFF;
|
||||||
|
}
|
||||||
|
.messenger {
|
||||||
|
background: #00B2FF;
|
||||||
|
}
|
||||||
|
.notion {
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
.paypal {
|
||||||
|
background: #003087;
|
||||||
|
}
|
||||||
|
.password {
|
||||||
|
background: #3B66BC;
|
||||||
|
}
|
||||||
|
.bluesky {
|
||||||
|
background: #0285FF;
|
||||||
|
}
|
||||||
|
.calendly {
|
||||||
|
background: #006BFF;
|
||||||
|
}
|
||||||
|
.instagram {
|
||||||
|
background: #E4405F;
|
||||||
|
}
|
||||||
|
.x {
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(.image, .card__company) path {
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.card__content div:*/
|
||||||
|
|
||||||
|
|
||||||
|
.card__company svg {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animations */
|
||||||
|
.card--one {
|
||||||
|
--x: calc(var(--span) * -1);
|
||||||
|
--y: -10%;
|
||||||
|
--r: -8deg;
|
||||||
|
--h: 160%;
|
||||||
|
--w: max(55cqi, 320px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--two {
|
||||||
|
--x: calc(var(--span) * -1);
|
||||||
|
--y: -30%;
|
||||||
|
--r: 6deg;
|
||||||
|
--h: 300%;
|
||||||
|
--w: max(55cqi, 330px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--three {
|
||||||
|
--x: calc(var(--span) * 1);
|
||||||
|
--y: -50%;
|
||||||
|
--r: 15deg;
|
||||||
|
--h: 360%;
|
||||||
|
--w: max(30cqi, 220px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--four {
|
||||||
|
--x: calc(var(--span) * 1);
|
||||||
|
--y: 10%;
|
||||||
|
--r: 10deg;
|
||||||
|
--h: 160%;
|
||||||
|
--w: max(55cqi, 320px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--five {
|
||||||
|
--x: calc(var(--span) * -1);
|
||||||
|
--y: -45%;
|
||||||
|
--r: -20deg;
|
||||||
|
--h: 525%;
|
||||||
|
--w: max(30cqi, 160px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--six {
|
||||||
|
--x: calc(var(--span) * 1);
|
||||||
|
--y: -30%;
|
||||||
|
--r: -5deg;
|
||||||
|
--h: 400%;
|
||||||
|
--w: max(45cqi, 305px);
|
||||||
|
}
|
||||||
|
@supports (animation-timeline: scroll()) {
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
-webkit-animation: grow both linear;
|
||||||
|
animation: grow both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__avatar img {
|
||||||
|
-webkit-animation: fade-in both linear;
|
||||||
|
animation: fade-in both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fade-in {
|
||||||
|
0%, 50% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in {
|
||||||
|
0%, 50% { opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.password svg {
|
||||||
|
-webkit-animation: fade-in both linear;
|
||||||
|
animation: fade-in both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card__content {
|
||||||
|
-webkit-animation: slide both linear;
|
||||||
|
animation: slide both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--one .card__avatar,
|
||||||
|
.card--four .card__avatar {
|
||||||
|
--s: 2;
|
||||||
|
transform-origin: 0 50%;
|
||||||
|
-webkit-animation: morph both linear;
|
||||||
|
animation: morph both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--two .card__avatar {
|
||||||
|
-webkit-animation: shrink both linear;
|
||||||
|
animation: shrink both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--two .card__column:last-of-type,
|
||||||
|
.card--three .card__column:last-of-type,
|
||||||
|
.card--five .card__column:last-of-type {
|
||||||
|
-webkit-animation: slide both linear;
|
||||||
|
animation: slide both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--six .card__column:last-of-type .card__company {
|
||||||
|
-webkit-animation: cta-morph both linear, color-in both linear;
|
||||||
|
animation: cta-morph both linear, color-in both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--five .card__dummy,
|
||||||
|
.card--six .card__dummy {
|
||||||
|
-webkit-animation: expand both linear;
|
||||||
|
animation: expand both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
-webkit-animation: morph both linear;
|
||||||
|
animation: morph both linear;
|
||||||
|
animation-timeline: --scroller;
|
||||||
|
animation-range: entry 0% exit 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes cta-morph {
|
||||||
|
0%, 30% {
|
||||||
|
translate: -1rem 0;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cta-morph {
|
||||||
|
0%, 30% {
|
||||||
|
translate: -1rem 0;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes color-in {
|
||||||
|
0%, 50% {
|
||||||
|
background: var(--element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes color-in {
|
||||||
|
0%, 50% {
|
||||||
|
background: var(--element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes expand {
|
||||||
|
0%, 30% {
|
||||||
|
width: var(--w, 26cqi);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes expand {
|
||||||
|
0%, 30% {
|
||||||
|
width: var(--w, 26cqi);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes shrink {
|
||||||
|
0%, 30% {
|
||||||
|
width: calc(var(--w) - 2rem);
|
||||||
|
border-radius: 12px;
|
||||||
|
height: calc(300cqh - 2rem);
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
height: var(--entity-size);
|
||||||
|
width: var(--entity-size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes shrink {
|
||||||
|
0%, 30% {
|
||||||
|
width: calc(var(--w) - 2rem);
|
||||||
|
border-radius: 12px;
|
||||||
|
height: calc(300cqh - 2rem);
|
||||||
|
}
|
||||||
|
85% {
|
||||||
|
height: var(--entity-size);
|
||||||
|
width: var(--entity-size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@-webkit-keyframes grow {
|
||||||
|
0% {
|
||||||
|
translate: var(--x, 0) var(--y, 0);
|
||||||
|
height: var(--h, 100%);
|
||||||
|
rotate: var(--r, 0);
|
||||||
|
width: var(--w, 10cqi);
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
rotate: var(--r, 0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
rotate: 0deg;
|
||||||
|
height: var(--h, 100%);
|
||||||
|
width: calc(var(--w, 10cqi));
|
||||||
|
translate: 0 var(--y, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes grow {
|
||||||
|
0% {
|
||||||
|
translate: var(--x, 0) var(--y, 0);
|
||||||
|
height: var(--h, 100%);
|
||||||
|
rotate: var(--r, 0);
|
||||||
|
width: var(--w, 10cqi);
|
||||||
|
}
|
||||||
|
15% {
|
||||||
|
rotate: var(--r, 0);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
rotate: 0deg;
|
||||||
|
height: var(--h, 100%);
|
||||||
|
width: calc(var(--w, 10cqi));
|
||||||
|
translate: 0 var(--y, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes morph {
|
||||||
|
0% {
|
||||||
|
scale: var(--s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes morph {
|
||||||
|
0% {
|
||||||
|
scale: var(--s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes slide {
|
||||||
|
0%,
|
||||||
|
30% {
|
||||||
|
translate: 0 -100cqh;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
translate: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide {
|
||||||
|
0%,
|
||||||
|
30% {
|
||||||
|
translate: 0 -100cqh;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
translate: 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.card--one .card__avatar,
|
||||||
|
.card--four .card__avatar {
|
||||||
|
--s: 2;
|
||||||
|
transform-origin: 0 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--two .card__avatar {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 4;
|
||||||
|
left: 1rem;
|
||||||
|
width: var(--entity-size);
|
||||||
|
max-width: calc(100cqi - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--two .card__column:last-of-type,
|
||||||
|
.card--three .card__column:last-of-type,
|
||||||
|
.card--five .card__column:last-of-type {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--six .card__column:last-of-type {
|
||||||
|
align-self: start;
|
||||||
|
width: auto;
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
.card--six .card__column:last-of-type .card__company {
|
||||||
|
border-radius: 100px;
|
||||||
|
width: var(--entity-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--three .card__dummy,
|
||||||
|
.card--five .card__dummy,
|
||||||
|
.card--six .card__dummy {
|
||||||
|
width: 30cqi;
|
||||||
|
min-width: 220px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 100%;
|
||||||
|
height: 260%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--five .card__dummy {
|
||||||
|
height: 425%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--six .card__dummy {
|
||||||
|
height: 280%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--three .text:last-of-type {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--five .card__dummy,
|
||||||
|
.card--six .card__dummy {
|
||||||
|
gap: 1rem;
|
||||||
|
width: 34cqi;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--six .card__dummy {
|
||||||
|
--w: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card--six .grid__panel {
|
||||||
|
aspect-ratio: 2 / 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrap {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5rem;
|
||||||
|
max-width: 65%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-wrap :first-child { width: 100%; }
|
||||||
|
.text-wrap :last-child { width: 80%; }
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 0.75rem;
|
||||||
|
width: calc(100% - 4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid__panel {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
background: var(--element);
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta {
|
||||||
|
height: var(--entity-size);
|
||||||
|
width: 60%;
|
||||||
|
background: var(--accent);
|
||||||
|
border-radius: 100px;
|
||||||
|
scale: 0;
|
||||||
|
--s: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
translate: 0 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring--over {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring--over img {
|
||||||
|
-webkit-clip-path: inset(50% 0 0 0);
|
||||||
|
clip-path: inset(50% 0 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ring img {
|
||||||
|
filter: hue-rotate(30deg);
|
||||||
|
width: 100%;
|
||||||
|
min-width: 700px;
|
||||||
|
max-width: 1400px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
translate: -50% -50%;
|
||||||
|
-o-object-fit: cover;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bear-link {
|
||||||
|
color: canvasText;
|
||||||
|
width: 48px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
:where(.x-link, .bear-link):is(:hover, :focus-visible) {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.bear-link svg {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
600
src/components/HomeIndex/index.tsx
Normal file
600
src/components/HomeIndex/index.tsx
Normal file
@@ -0,0 +1,600 @@
|
|||||||
|
import React, { useEffect } from 'react'
|
||||||
|
import { gsap } from 'gsap'
|
||||||
|
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||||
|
import './index.less'
|
||||||
|
const HomeIndex: React.FC = () => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!CSS.supports('animation-timeline: scroll()')) {
|
||||||
|
// const SPAN = 'max(45vw, 260px)';
|
||||||
|
const CONFIG = [
|
||||||
|
{
|
||||||
|
x: () => {
|
||||||
|
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||||
|
},
|
||||||
|
y: -10,
|
||||||
|
r: -8,
|
||||||
|
h: 160,
|
||||||
|
w: (el: any) => {
|
||||||
|
return Math.max(320, el.parentNode.offsetWidthi * 0.55)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
x: () => {
|
||||||
|
return Math.max(260, window.innerWidth * 0.45)
|
||||||
|
},
|
||||||
|
y: -50,
|
||||||
|
r: 15,
|
||||||
|
h: 360,
|
||||||
|
w: (el: any) => {
|
||||||
|
return Math.max(220, el.parentNode.offsetWidth * 0.3)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
x: () => {
|
||||||
|
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||||
|
},
|
||||||
|
y: -30,
|
||||||
|
r: 6,
|
||||||
|
h: 300,
|
||||||
|
w: (el: any) => {
|
||||||
|
return Math.max(330, el.parentNode.offsetWidth * 0.55)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
x: () => {
|
||||||
|
return Math.max(260, window.innerWidth * 0.45) * 1
|
||||||
|
},
|
||||||
|
y: -30,
|
||||||
|
r: -5,
|
||||||
|
h: 400,
|
||||||
|
w: (el: any) => {
|
||||||
|
return Math.max(305, el.parentNode.offsetWidth * 0.45)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
x: () => {
|
||||||
|
return Math.max(260, window.innerWidth * 0.45) * -1
|
||||||
|
},
|
||||||
|
y: -45,
|
||||||
|
r: -20,
|
||||||
|
h: 525,
|
||||||
|
w: (el: any) => {
|
||||||
|
return Math.max(160, el.parentNode.offsetWidth * 0.3)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
x: () => {
|
||||||
|
return Math.max(260, window.innerWidth * 0.45)
|
||||||
|
},
|
||||||
|
y: 10,
|
||||||
|
r: 10,
|
||||||
|
h: 160,
|
||||||
|
w: (el: any) => {
|
||||||
|
return Math.max(320, el.parentNode.offsetWidth * 0.55)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
gsap.registerPlugin(ScrollTrigger)
|
||||||
|
console.info('gsap: ScrollTrigger registered')
|
||||||
|
|
||||||
|
gsap.set('.hero', { position: 'absolute' })
|
||||||
|
|
||||||
|
const cards = document.querySelectorAll('.card')
|
||||||
|
|
||||||
|
for (const [index, card] of [...cards].entries()) {
|
||||||
|
if (CONFIG[index]) {
|
||||||
|
gsap.from(card, {
|
||||||
|
x: CONFIG[index].x,
|
||||||
|
yPercent: CONFIG[index].y,
|
||||||
|
height: `${CONFIG[index].h}%`,
|
||||||
|
rotate: CONFIG[index].r,
|
||||||
|
width: CONFIG[index].w,
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroller',
|
||||||
|
start: 'top bottom',
|
||||||
|
end: 'top 50%',
|
||||||
|
scrub: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
gsap.from(
|
||||||
|
[
|
||||||
|
'.card__content',
|
||||||
|
'.card--two .card__column:last-of-type',
|
||||||
|
'.card--three .card__column:last-of-type',
|
||||||
|
'.card--five .card__column:last-of-type',
|
||||||
|
],
|
||||||
|
|
||||||
|
{
|
||||||
|
y: '-100cqh',
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroller',
|
||||||
|
start: 'top 80%',
|
||||||
|
end: 'top top',
|
||||||
|
scrub: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
gsap.from(['.card__avatar img', '.password svg'], {
|
||||||
|
opacity: 0,
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroller',
|
||||||
|
start: 'top 50%',
|
||||||
|
end: 'top top',
|
||||||
|
scrub: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], {
|
||||||
|
width: (el: any) => el.parentNode.offsetWidth * 0.26,
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroller',
|
||||||
|
start: 'top 80%',
|
||||||
|
end: 'top top',
|
||||||
|
scrub: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
gsap.from(['.card--one .card__avatar', '.card--four .card__avatar'], {
|
||||||
|
scale: 2,
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroller',
|
||||||
|
start: 'top bottom',
|
||||||
|
end: 'top top',
|
||||||
|
scrub: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
gsap.from('.card--two .card__avatar', {
|
||||||
|
width: (el: any) => Math.max(330, el.parentNode.offsetWidth * 0.55) - 32,
|
||||||
|
borderRadius: '12px',
|
||||||
|
height: 'calc(300cqh - 2rem)',
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroller',
|
||||||
|
start: 'top bottom',
|
||||||
|
end: 'top 20%',
|
||||||
|
scrub: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
gsap.from('.card--six .card__column:last-of-type .card__company', {
|
||||||
|
width: 120,
|
||||||
|
x: '-1rem',
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroller',
|
||||||
|
start: 'top bottom',
|
||||||
|
end: 'top 20%',
|
||||||
|
scrub: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
gsap.from('.cta', {
|
||||||
|
scale: 1,
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: '.scroller',
|
||||||
|
start: 'top bottom',
|
||||||
|
end: 'top 20%',
|
||||||
|
scrub: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<nav>
|
||||||
|
<div className='navbar'>
|
||||||
|
<a
|
||||||
|
className='bear-link'
|
||||||
|
href='/login'
|
||||||
|
target='_blank'
|
||||||
|
rel='noreferrer noopener'>
|
||||||
|
<svg
|
||||||
|
className='w-9'
|
||||||
|
viewBox='0 0 969 955'
|
||||||
|
fill='none'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<circle
|
||||||
|
cx='161.191'
|
||||||
|
cy='320.191'
|
||||||
|
r='133.191'
|
||||||
|
stroke='currentColor'
|
||||||
|
strokeWidth='20'></circle>
|
||||||
|
<circle
|
||||||
|
cx='806.809'
|
||||||
|
cy='320.191'
|
||||||
|
r='133.191'
|
||||||
|
stroke='currentColor'
|
||||||
|
strokeWidth='20'></circle>
|
||||||
|
<circle
|
||||||
|
cx='695.019'
|
||||||
|
cy='587.733'
|
||||||
|
r='31.4016'
|
||||||
|
fill='currentColor'></circle>
|
||||||
|
<circle
|
||||||
|
cx='272.981'
|
||||||
|
cy='587.733'
|
||||||
|
r='31.4016'
|
||||||
|
fill='currentColor'></circle>
|
||||||
|
<path
|
||||||
|
d='M564.388 712.083C564.388 743.994 526.035 779.911 483.372 779.911C440.709 779.911 402.356 743.994 402.356 712.083C402.356 680.173 440.709 664.353 483.372 664.353C526.035 664.353 564.388 680.173 564.388 712.083Z'
|
||||||
|
fill='currentColor'></path>
|
||||||
|
<rect
|
||||||
|
x='310.42'
|
||||||
|
y='448.31'
|
||||||
|
width='343.468'
|
||||||
|
height='51.4986'
|
||||||
|
fill='#FF1E1E'></rect>
|
||||||
|
<path
|
||||||
|
fillRule='evenodd'
|
||||||
|
clipRule='evenodd'
|
||||||
|
d='M745.643 288.24C815.368 344.185 854.539 432.623 854.539 511.741H614.938V454.652C614.938 433.113 597.477 415.652 575.938 415.652H388.37C366.831 415.652 349.37 433.113 349.37 454.652V511.741L110.949 511.741C110.949 432.623 150.12 344.185 219.845 288.24C289.57 232.295 384.138 200.865 482.744 200.865C581.35 200.865 675.918 232.295 745.643 288.24Z'
|
||||||
|
fill='currentColor'></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<header>
|
||||||
|
<div className='hero'>
|
||||||
|
<div className='content'>
|
||||||
|
<h1>
|
||||||
|
五 味 子 云 存 储
|
||||||
|
<br />
|
||||||
|
<span>schisandra</span>
|
||||||
|
</h1>
|
||||||
|
<p>Start your journey and join thousands of others.</p>
|
||||||
|
<a href='/login' target='_blank' rel='noreferrer noopener'>
|
||||||
|
Start now
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='sticker'>
|
||||||
|
<div className='content'>
|
||||||
|
<div className='panel'>
|
||||||
|
<div className='panel__row'>
|
||||||
|
<div className='card card--one'>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__avatar'>
|
||||||
|
<img
|
||||||
|
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/526.jpg'
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='card__content'>
|
||||||
|
<div className='card__details'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='image headspace'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Headspace</title>
|
||||||
|
<path d='M23.9711 11.8612c.279 3.8878-1.5272 6.0933-2.6155 7.6357-1.694 1.7856-3.8397 4.2203-9.291 4.3565-4.6237.1827-6.8957-1.8508-8.8034-3.617-2.487-2.7336-3.1366-4.3512-3.261-8.3752-.0118-2.467.9397-4.9292 2.6025-7.0954C4.934 1.4736 8.6408.3699 12.0646.1426c3.5923-.1392 6.4493 1.6723 8.3993 3.624 2.4963 2.632 3.2629 4.8923 3.5054 8.0946Z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='card__dummy'>
|
||||||
|
<div className='text-wrap'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__company alexa'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Amazon Alexa</title>
|
||||||
|
<path d='M12 0C5.37 0 0 5.37 0 12C0 18.09 4.53 23.11 10.4 23.9V21.5A1.59 1.59 0 0 0 9.32 19.97A8.41 8.41 0 0 1 3.6 11.8A8.37 8.37 0 0 1 12.09 3.6A8.4 8.4 0 0 1 20.4 12.31L20.39 12.38A8.68 8.68 0 0 1 20.36 12.76C20.36 12.83 20.35 12.9 20.34 12.96C20.34 13.04 20.33 13.12 20.32 13.19L20.3 13.29C19.27 20.07 10.45 23.87 10.4 23.9C10.92 23.97 11.46 24 12 24C18.63 24 24 18.63 24 12S18.63 0 12 0Z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='panel__row'>
|
||||||
|
<div className='card card--three'>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__avatar'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Google Chrome</title>
|
||||||
|
<path
|
||||||
|
fill='#4285F4'
|
||||||
|
d='M12 0C8.21 0 4.831 1.757 2.632 4.501l3.953 6.848A5.454 5.454 0 0 1 12 6.545h10.691A12 12 0 0 0 12 0zM1.931 5.47A11.943 11.943 0 0 0 0 12c0 6.012 4.42 10.991 10.189 11.864l3.953-6.847a5.45 5.45 0 0 1-6.865-2.29zm13.342 2.166a5.446 5.446 0 0 1 1.45 7.09l.002.001h-.002l-5.344 9.257c.206.01.413.016.621.016 6.627 0 12-5.373 12-12 0-1.54-.29-3.011-.818-4.364zM12 16.364a4.364 4.364 0 1 1 0-8.728 4.364 4.364 0 0 1 0 8.728Z'></path>
|
||||||
|
</svg>
|
||||||
|
<img
|
||||||
|
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/430.jpg'
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='card__dummy'>
|
||||||
|
<div className='text-wrap'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
<div className='cta'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='card__content'>
|
||||||
|
<div className='card__details'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='image youtube'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__company slack'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Slack</title>
|
||||||
|
<path d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='panel__row'>
|
||||||
|
<div className='card card--two'>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__avatar'>
|
||||||
|
<img
|
||||||
|
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/535.jpg'
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='card__content'>
|
||||||
|
<div className='card__details'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='image messenger'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Messenger</title>
|
||||||
|
<path d='M.001 11.639C.001 4.949 5.241 0 12.001 0S24 4.95 24 11.639c0 6.689-5.24 11.638-12 11.638-1.21 0-2.38-.16-3.47-.46a.96.96 0 00-.64.05l-2.39 1.05a.96.96 0 01-1.35-.85l-.07-2.14a.97.97 0 00-.32-.68A11.39 11.389 0 01.002 11.64zm8.32-2.19l-3.52 5.6c-.35.53.32 1.139.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 00-2.61.48z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__company notion'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Notion</title>
|
||||||
|
<path d='M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='panel__row'>
|
||||||
|
<div className='card card--six'>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__avatar'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
style={{ background: `white` }}
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Twilio</title>
|
||||||
|
<path
|
||||||
|
fill='#F22F46'
|
||||||
|
d='M12 0C5.381-.008.008 5.352 0 11.971V12c0 6.64 5.359 12 12 12 6.64 0 12-5.36 12-12 0-6.641-5.36-12-12-12zm0 20.801c-4.846.015-8.786-3.904-8.801-8.75V12c-.014-4.846 3.904-8.786 8.75-8.801H12c4.847-.014 8.786 3.904 8.801 8.75V12c.015 4.847-3.904 8.786-8.75 8.801H12zm5.44-11.76c0 1.359-1.12 2.479-2.481 2.479-1.366-.007-2.472-1.113-2.479-2.479 0-1.361 1.12-2.481 2.479-2.481 1.361 0 2.481 1.12 2.481 2.481zm0 5.919c0 1.36-1.12 2.48-2.481 2.48-1.367-.008-2.473-1.114-2.479-2.48 0-1.359 1.12-2.479 2.479-2.479 1.361-.001 2.481 1.12 2.481 2.479zm-5.919 0c0 1.36-1.12 2.48-2.479 2.48-1.368-.007-2.475-1.113-2.481-2.48 0-1.359 1.12-2.479 2.481-2.479 1.358-.001 2.479 1.12 2.479 2.479zm0-5.919c0 1.359-1.12 2.479-2.479 2.479-1.367-.007-2.475-1.112-2.481-2.479 0-1.361 1.12-2.481 2.481-2.481 1.358 0 2.479 1.12 2.479 2.481z'></path>
|
||||||
|
</svg>
|
||||||
|
<img
|
||||||
|
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/332.jpg'
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='card__dummy'>
|
||||||
|
<div className='text-wrap'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
<div className='grid'>
|
||||||
|
<div className='grid__panel'></div>
|
||||||
|
<div className='grid__panel'></div>
|
||||||
|
<div className='grid__panel'></div>
|
||||||
|
<div className='grid__panel'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='card__content'>
|
||||||
|
<div className='card__details'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='image paypal'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>PayPal</title>
|
||||||
|
<path d='M7.016 19.198h-4.2a.562.562 0 0 1-.555-.65L5.093.584A.692.692 0 0 1 5.776 0h7.222c3.417 0 5.904 2.488 5.846 5.5-.006.25-.027.5-.066.747A6.794 6.794 0 0 1 12.071 12H8.743a.69.69 0 0 0-.682.583l-.325 2.056-.013.083-.692 4.39-.015.087zM19.79 6.142c-.01.087-.01.175-.023.261a7.76 7.76 0 0 1-7.695 6.598H9.007l-.283 1.795-.013.083-.692 4.39-.134.843-.014.088H6.86l-.497 3.15a.562.562 0 0 0 .555.65h3.612c.34 0 .63-.249.683-.585l.952-6.031a.692.692 0 0 1 .683-.584h2.126a6.793 6.793 0 0 0 6.707-5.752c.306-1.95-.466-3.744-1.89-4.906z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__company password'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>1Password</title>
|
||||||
|
<path d='M12 .007C5.373.007 0 5.376 0 11.999c0 6.624 5.373 11.994 12 11.994S24 18.623 24 12C24 5.376 18.627.007 12 .007Zm-.895 4.857h1.788c.484 0 .729.002.914.096a.86.86 0 0 1 .377.377c.094.185.095.428.095.912v6.016c0 .12 0 .182-.015.238a.427.427 0 0 1-.067.137.923.923 0 0 1-.174.162l-.695.564c-.113.092-.17.138-.191.194a.216.216 0 0 0 0 .15c.02.055.078.101.191.193l.695.565c.094.076.14.115.174.162.03.042.053.087.067.137a.936.936 0 0 1 .015.238v2.746c0 .484-.001.727-.095.912a.86.86 0 0 1-.377.377c-.185.094-.43.096-.914.096h-1.788c-.484 0-.726-.002-.912-.096a.86.86 0 0 1-.377-.377c-.094-.185-.095-.428-.095-.912v-6.016c0-.12 0-.182.015-.238a.437.437 0 0 1 .067-.139c.034-.047.08-.083.174-.16l.695-.564c.113-.092.17-.138.191-.194a.216.216 0 0 0 0-.15c-.02-.055-.078-.101-.191-.193l-.695-.565a.92.92 0 0 1-.174-.162.437.437 0 0 1-.067-.139.92.92 0 0 1-.015-.236V6.25c0-.484.001-.727.095-.912a.86.86 0 0 1 .377-.377c.186-.094.428-.096.912-.096z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='panel__row'>
|
||||||
|
<div className='card card--five'>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__avatar'>
|
||||||
|
<svg
|
||||||
|
style={{ background: `white` }}
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Spotify</title>
|
||||||
|
<path
|
||||||
|
fill='#1DB954'
|
||||||
|
d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'></path>
|
||||||
|
</svg>
|
||||||
|
<img
|
||||||
|
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/1011.jpg'
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='card__dummy'>
|
||||||
|
<div className='text-wrap'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
<div className='grid'>
|
||||||
|
<div className='grid__panel'></div>
|
||||||
|
<div className='grid__panel'></div>
|
||||||
|
<div className='grid__panel'></div>
|
||||||
|
<div className='grid__panel'></div>
|
||||||
|
</div>
|
||||||
|
<div className='cta'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='card__content'>
|
||||||
|
<div className='card__details'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='image calendly'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Calendly</title>
|
||||||
|
<path d='M19.655 14.262c.281 0 .557.023.828.064 0 .005-.005.01-.005.014-.105.267-.234.534-.381.786l-1.219 2.106c-1.112 1.936-3.177 3.127-5.411 3.127h-2.432c-2.23 0-4.294-1.191-5.412-3.127l-1.218-2.106a6.251 6.251 0 0 1 0-6.252l1.218-2.106C6.736 4.832 8.8 3.641 11.035 3.641h2.432c2.23 0 4.294 1.191 5.411 3.127l1.219 2.106c.147.252.271.519.381.786 0 .004.005.009.005.014-.267.041-.543.064-.828.064-1.816 0-2.501-.607-3.291-1.306-.764-.676-1.711-1.517-3.44-1.517h-1.029c-1.251 0-2.387.455-3.2 1.278-.796.805-1.233 1.904-1.233 3.099v1.411c0 1.196.437 2.295 1.233 3.099.813.823 1.949 1.278 3.2 1.278h1.034c1.729 0 2.676-.841 3.439-1.517.791-.703 1.471-1.306 3.287-1.301Zm.005-3.237c.399 0 .794-.036 1.179-.11-.002-.004-.002-.01-.002-.014-.073-.414-.193-.823-.349-1.218.731-.12 1.407-.396 1.986-.819 0-.004-.005-.013-.005-.018-.331-1.085-.832-2.101-1.489-3.03-.649-.915-1.435-1.719-2.331-2.395-1.867-1.398-4.088-2.138-6.428-2.138-1.448 0-2.855.28-4.175.841-1.273.543-2.423 1.315-3.407 2.299S2.878 6.552 2.341 7.83c-.557 1.324-.842 2.726-.842 4.175 0 1.448.281 2.855.842 4.174.542 1.274 1.314 2.423 2.298 3.407s2.129 1.761 3.407 2.299c1.324.556 2.727.841 4.175.841 2.34 0 4.561-.74 6.428-2.137a10.815 10.815 0 0 0 2.331-2.396c.652-.929 1.158-1.949 1.489-3.03 0-.004.005-.014.005-.018-.579-.423-1.255-.699-1.986-.819.161-.395.276-.804.349-1.218.005-.009.005-.014.005-.023.869.166 1.692.506 2.404 1.035.685.505.552 1.075.446 1.416C22.184 20.437 17.619 24 12.221 24c-6.625 0-12-5.375-12-12s5.37-12 12-12c5.398 0 9.963 3.563 11.471 8.464.106.341.239.915-.446 1.421-.717.529-1.535.873-2.404 1.034.128.716.128 1.45 0 2.166-.387-.074-.782-.11-1.182-.11-4.184 0-3.968 2.823-6.736 2.823h-1.029c-1.899 0-3.15-1.357-3.15-3.095v-1.411c0-1.738 1.251-3.094 3.15-3.094h1.034c2.768 0 2.552 2.823 6.731 2.827Z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__company bluesky'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Bluesky</title>
|
||||||
|
<path d='M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='panel__row'>
|
||||||
|
<div className='card card--four'>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__avatar'>
|
||||||
|
<img
|
||||||
|
src='https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/47.jpg'
|
||||||
|
alt=''
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='card__content'>
|
||||||
|
<div className='card__details'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='image instagram'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>Instagram</title>
|
||||||
|
<path d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='card__dummy'>
|
||||||
|
<div className='text-wrap'>
|
||||||
|
<div className='text'></div>
|
||||||
|
<div className='text'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='card__column'>
|
||||||
|
<div className='card__company x'>
|
||||||
|
<svg
|
||||||
|
role='img'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
xmlns='http://www.w3.org/2000/svg'>
|
||||||
|
<title>X</title>
|
||||||
|
<path d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='scroller'>
|
||||||
|
<div className='content'>
|
||||||
|
<div className='panel'>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='ring ring--under'>
|
||||||
|
<img src='https://assets.codepen.io/605876/portal-ring.png' alt='' />
|
||||||
|
</div>
|
||||||
|
<div className='ring ring--over'>
|
||||||
|
<img src='https://assets.codepen.io/605876/portal-ring.png' alt='' />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>Pretty rad.</h2>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>ʕ•ᴥ•ʔ jhey © 2024</footer>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default HomeIndex
|
||||||
@@ -20,7 +20,7 @@ body {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
//overflow: hidden;
|
//overflow: hidden;
|
||||||
//overflow-x: hidden;
|
//overflow-x: hidden;
|
||||||
background-image: url("@/assets/images/background.png");
|
//background-image: url("@/assets/images/background.png");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@@ -43,7 +43,7 @@ h1,p{
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
max-width: 1500px;
|
max-width: 1510px;
|
||||||
max-height: 670px;
|
max-height: 670px;
|
||||||
background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
|
background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
|
||||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
|
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
|
||||||
|
|||||||
@@ -4,10 +4,11 @@ import NoFound from '@/views/404/404'
|
|||||||
import Login from '@/views/User/Login'
|
import Login from '@/views/User/Login'
|
||||||
import Register from '@/views/User/Register'
|
import Register from '@/views/User/Register'
|
||||||
import home from '@/views/Home/'
|
import home from '@/views/Home/'
|
||||||
|
import Main from '@/views/Main/'
|
||||||
const routes: RouteObject[] = [
|
const routes: RouteObject[] = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
Component: Login,
|
Component: home,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '*',
|
path: '*',
|
||||||
@@ -21,6 +22,14 @@ const routes: RouteObject[] = [
|
|||||||
path: '/home',
|
path: '/home',
|
||||||
Component: home,
|
Component: home,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
Component: Login,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/main',
|
||||||
|
Component: Main,
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
export default routes
|
export default routes
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
*,
|
//*,
|
||||||
*:after,
|
//*:after,
|
||||||
*:before {
|
//*:before {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
}
|
//}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,14 @@
|
|||||||
// import FileSharing from '@/components/FileSharing'
|
// import FileSharing from '@/components/FileSharing'
|
||||||
// import DefaultLayOut from '@/layout/default'
|
// import DefaultLayOut from '@/layout/default'
|
||||||
|
|
||||||
import BlurCard from '@/components/BlurCard'
|
import HomeIndex from '@/components/HomeIndex'
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{/*<DefaultLayOut />*/}
|
{/*<DefaultLayOut />*/}
|
||||||
<BlurCard />
|
{/*<BlurCard />*/}
|
||||||
|
<HomeIndex />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
8
src/views/Main/index.tsx
Normal file
8
src/views/Main/index.tsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
// import DefaultLayOut from '@/layout/default'
|
||||||
|
export default () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/*<DefaultLayOut />*/}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -25,8 +25,8 @@
|
|||||||
box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
|
box-shadow: rgb(0 0 0 / 15%) 0px 2px 15px;
|
||||||
//float: right;
|
//float: right;
|
||||||
height: 550px;
|
height: 550px;
|
||||||
position: relative;
|
|
||||||
padding: 30px 0 30px 0;
|
padding: 30px 0 30px 0;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -24,6 +24,7 @@
|
|||||||
height: 550px;
|
height: 550px;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 30px 0 30px 0;
|
padding: 30px 0 30px 0;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -248,7 +248,7 @@ export default observer(() => {
|
|||||||
注册
|
注册
|
||||||
</Button>
|
</Button>
|
||||||
</Form>
|
</Form>
|
||||||
<a href='/' className={styles.go_to_register}>
|
<a href='/login' className={styles.go_to_register}>
|
||||||
<span>登录</span>
|
<span>登录</span>
|
||||||
</a>
|
</a>
|
||||||
</Space>
|
</Space>
|
||||||
|
|||||||
Reference in New Issue
Block a user