feat: css animation

src/components/stateless/AlternatingText/index.module.less

@@ -3,6 +3,10 @@
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
+  background: linear-gradient(to right, #000000, #0f9b0f);
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
+  font-size: 20px;
   font-weight: 700;
 }
 

src/components/stateless/AutoLink/index.jsx

@@ -1,16 +1,23 @@
 import React from 'react'
+import styles from './index.module.less'
+
 const AutoLink = ({ text }) => {
   const delimiter =
     /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi
 
   return (
     <>
-      {text.split(delimiter).map((word) => {
+      {text.split(delimiter).map((word, index) => {
         const match = word.match(delimiter)
         if (match) {
           const url = match[0]
           return (
-            <a target="_blank" href={url.startsWith('http') ? url : `http://${url}`}>
+            <a
+              key={index}
+              className={styles.squiggle}
+              target="_blank"
+              href={url.startsWith('http') ? url : `http://${url}`}
+            >
               {url}
             </a>
           )

src/components/stateless/AutoLink/index.module.less

@@ -0,0 +1,13 @@
+a.squiggle {
+  background-image: linear-gradient(to bottom, #0087ca 0%, #0087ca 100%);
+  background-position: 0 100%;
+  background-repeat: repeat-x;
+  background-size: 1px 1px;
+  color: inherit;
+  text-decoration: none;
+}
+
+a.squiggle:hover {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-15px);}}%3C/style%3E%3Cpath fill='none' stroke='%230087ca' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
+  background-size: auto 2px;
+}

src/components/stateless/AvatarCard/index.jsx

@@ -0,0 +1,16 @@
+import react from 'react'
+import styles from './index.module.less'
+const AvatarCard = ({ avatar, text }) => {
+  return (
+    <div className={styles.avatarCard}>
+      <div className={styles.card}>
+        <figure>
+          <img alt="" src={avatar} />
+        </figure>
+        <p className={styles.content}>{text}</p>
+      </div>
+    </div>
+  )
+}
+
+export default AvatarCard

src/components/stateless/AvatarCard/index.module.less

@@ -0,0 +1,47 @@
+.avatarCard {
+  .card {
+    width: 350px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f3f1fe;
+    border-radius: 10px;
+    margin: 8px;
+    margin-top: 100px;
+  }
+
+  .card figure {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    margin-top: -60px;
+    position: relative;
+  }
+
+  .card figure::before {
+    content: '';
+    border-radius: inherit;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translate(-50%, -50%);
+    border: 1rem solid #fff;
+    box-shadow: 0 1px #fff;
+  }
+
+  .card figure img {
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .card .content {
+    text-align: center;
+    margin: 2rem;
+    line-height: 1.5;
+    color: #101010;
+  }
+}

src/components/stateless/IsometricCard/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import styles from './index.module.less'
+const IsometricCard = ({ text }) => {
+  return (
+    <div className={styles.isometricCard}>
+      <p>{text}</p>
+    </div>
+  )
+}
+
+export default IsometricCard

src/components/stateless/IsometricCard/index.module.less

@@ -0,0 +1,38 @@
+.isometricCard {
+  margin: 0 100px;
+  transform: rotateX(51deg) rotateZ(43deg);
+  transform-style: preserve-3d;
+  will-change: transform;
+  width: 240px;
+  height: 320px;
+  background: #070221;
+  border-radius: 2rem;
+  box-shadow:
+    1px 1px 0 1px #f9f9fb,
+    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
+    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
+  transition:
+    0.4s ease-in-out transform,
+    0.3s ease-in-out box-shadow;
+  color: #fff;
+}
+
+.isometricCard:hover {
+  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
+  box-shadow:
+    1px 1px 0 1px #f9f9fb,
+    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
+    54px 54px 28px -10px rgba(34, 33, 81, 0.15);
+}
+
+.isometricCard {
+  display: flex;
+  align-items: center;
+}
+
+.isometricCard p {
+  margin: 0 36px;
+  text-align: center;
+  font-size: 20px;
+  line-height: 1.4;
+}

src/components/stateless/LazyLoadImage/index.module.less

@@ -39,6 +39,18 @@
   box-sizing: border-box;
   max-width: 100%;
 }
+
+.hoverRotate img::before {
+  content: 'Sorry, this image is unavailable.';
+  display: block;
+  margin-bottom: 8px;
+}
+
+.hoverRotate img::after {
+  content: '(url: ' attr(src) ')';
+  display: block;
+  font-size: 12px;
+}
 .hoverRotate:hover img {
   transform: scale(1.3) rotate(5deg);
 }

src/components/stateless/LineBordered/index.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './index.module.less'
+
+const LineBordered = ({ text }) => {
+  return <span className={styles.lineBordered}>{text}</span>
+}
+
+export default LineBordered