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 {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light only;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
touch-action: none;
|
||||
font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
|
||||
padding: 1rem;
|
||||
background-image: url("@/assets/images/background.png");
|
||||
}
|
||||
|
||||
body::before {
|
||||
--line: color-mix(in lch, canvasText 25%, transparent);
|
||||
--size: 60px;
|
||||
content: "";
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
background:
|
||||
linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size),
|
||||
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
|
||||
//-webkit-mask: linear-gradient(-15deg, transparent 60%, white);
|
||||
mask: linear-gradient(-15deg, transparent 60%, white);
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
//*,
|
||||
//*:after,
|
||||
//*:before {
|
||||
// box-sizing: border-box;
|
||||
//}
|
||||
//
|
||||
//html {
|
||||
// color-scheme: light only;
|
||||
//}
|
||||
//
|
||||
//body {
|
||||
// display: flex;
|
||||
// place-items: center;
|
||||
// justify-content: center;
|
||||
// min-height: 100vh;
|
||||
// touch-action: none;
|
||||
// font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
|
||||
// padding: 1rem;
|
||||
// background-image: url("@/assets/images/background.png");
|
||||
//}
|
||||
//
|
||||
//body::before {
|
||||
// --line: color-mix(in lch, canvasText 25%, transparent);
|
||||
// --size: 60px;
|
||||
// content: "";
|
||||
// height: 100vh;
|
||||
// width: 100vw;
|
||||
// position: fixed;
|
||||
// background:
|
||||
// linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size),
|
||||
// linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
|
||||
// //-webkit-mask: linear-gradient(-15deg, transparent 60%, white);
|
||||
// mask: linear-gradient(-15deg, transparent 60%, white);
|
||||
// top: 0;
|
||||
// z-index: -1;
|
||||
//}
|
||||
|
||||
article {
|
||||
width: 600px;
|
||||
@@ -1,9 +1,9 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import './index.less'
|
||||
import styles from './index.module.less'
|
||||
import { gsap } from 'gsap'
|
||||
const BlurCard: React.FC = () => {
|
||||
useEffect(() => {
|
||||
const UPDATE = ({ x, y}) => {
|
||||
const UPDATE = ({ x, y }: { x: any; y: any }) => {
|
||||
gsap.set(document.documentElement, {
|
||||
'--x': gsap.utils.mapRange(0, window.innerWidth, -1, 1, x),
|
||||
'--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='' />
|
||||
<h3>Osaka</h3>
|
||||
<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='' />
|
||||
<div></div>
|
||||
-->
|
||||
</div>
|
||||
<div className='content'>
|
||||
<div className={styles.content}>
|
||||
<p>
|
||||
<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'
|
||||
clipRule='evenodd'></path>
|
||||
</svg>
|
||||
<span>Osaka Castle</span>
|
||||
<span>GuGong GuGong</span>
|
||||
</p>
|
||||
<p>Osaka, China</p>
|
||||
<p>GuGong, China</p>
|
||||
</div>
|
||||
</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;
|
||||
//overflow: hidden;
|
||||
//overflow-x: hidden;
|
||||
background-image: url("@/assets/images/background.png");
|
||||
//background-image: url("@/assets/images/background.png");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
padding: 20px;
|
||||
@@ -43,7 +43,7 @@ h1,p{
|
||||
border-radius: 10px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: 1500px;
|
||||
max-width: 1510px;
|
||||
max-height: 670px;
|
||||
background: linear-gradient(180deg, #e0e9fd 0%, #e9ecf1 90%);
|
||||
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 Register from '@/views/User/Register'
|
||||
import home from '@/views/Home/'
|
||||
import Main from '@/views/Main/'
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
path: '/',
|
||||
Component: Login,
|
||||
Component: home,
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
@@ -21,6 +22,14 @@ const routes: RouteObject[] = [
|
||||
path: '/home',
|
||||
Component: home,
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
Component: Login,
|
||||
},
|
||||
{
|
||||
path: '/main',
|
||||
Component: Main,
|
||||
},
|
||||
]
|
||||
|
||||
export default routes
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
//*,
|
||||
//*:after,
|
||||
//*:before {
|
||||
// box-sizing: border-box;
|
||||
//}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
// import FileSharing from '@/components/FileSharing'
|
||||
// import DefaultLayOut from '@/layout/default'
|
||||
|
||||
import BlurCard from '@/components/BlurCard'
|
||||
import HomeIndex from '@/components/HomeIndex'
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<div>
|
||||
{/*<DefaultLayOut />*/}
|
||||
<BlurCard />
|
||||
{/*<BlurCard />*/}
|
||||
<HomeIndex />
|
||||
</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;
|
||||
//float: right;
|
||||
height: 550px;
|
||||
position: relative;
|
||||
padding: 30px 0 30px 0;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
height: 550px;
|
||||
position: relative;
|
||||
padding: 30px 0 30px 0;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -248,7 +248,7 @@ export default observer(() => {
|
||||
注册
|
||||
</Button>
|
||||
</Form>
|
||||
<a href='/' className={styles.go_to_register}>
|
||||
<a href='/login' className={styles.go_to_register}>
|
||||
<span>登录</span>
|
||||
</a>
|
||||
</Space>
|
||||
|
||||
Reference in New Issue
Block a user