-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #93 from illacloud/feat/update-pricing
Feat/update pricing
- Loading branch information
Showing
37 changed files
with
2,018 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| .techBtn { | ||
| @apply flex items-center justify-center w-full py-[10px] px-[32px] rounded-[8px] font-[500] text-[16px] leading-[28px] cursor-pointer text-white-01; | ||
| @apply bg-tech-purple-03 hover:bg-tech-purple-04 active:bg-tech-purple-02 hover:text-white-01 hover:no-underline; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { FC } from "react" | ||
| import style from "./index.module.css" | ||
| import Link from "@docusaurus/Link" | ||
| import clsx from "clsx" | ||
| import { useUtmParams } from "@site/src/hooks/useUtmParams" | ||
|
|
||
| interface TechButtonProps { | ||
| btnText: string | ||
| link?: string | ||
| customClass?: string | ||
| handleClick?: () => void | ||
| } | ||
|
|
||
| const TechButton: FC<TechButtonProps> = ({ | ||
| btnText, | ||
| link, | ||
| customClass, | ||
| handleClick, | ||
| }) => { | ||
| const getUtmParams = useUtmParams() | ||
| return ( | ||
| <Link | ||
| to={getUtmParams(link)} | ||
| className={clsx("hover:no-underline", customClass)} | ||
| onClick={handleClick} | ||
| > | ||
| <span className={style.techBtn}>{btnText}</span> | ||
| </Link> | ||
| ) | ||
| } | ||
| export default TechButton |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| import { useCallback, useEffect, useRef } from "react" | ||
|
|
||
| export const useHomePaintBg = (canvasRef, containerRef) => { | ||
| const requestId = useRef(null) | ||
| const cacheWidth = useRef(containerRef.current?.clientWidth) | ||
| const init = useCallback(() => { | ||
| const canvas = canvasRef.current | ||
| const ctx = canvas.getContext("2d") | ||
| const interval = 56 | ||
| const dropColor = "rgba(255, 255, 255, 1)" | ||
| let dropSpeed = 3 | ||
| let dropAcceleration = 0.002 | ||
|
|
||
| canvas.width = containerRef.current?.clientWidth | ||
| canvas.height = containerRef.current?.clientHeight | ||
|
|
||
| const drawGrid = () => { | ||
| ctx.strokeStyle = "rgba(255, 255, 255, 0.1)" | ||
|
|
||
| for (let y = 0; y <= canvas.height; y += interval) { | ||
| ctx.beginPath() | ||
| ctx.moveTo(0, y) | ||
| ctx.lineTo(canvas.width, y) | ||
| ctx.stroke() | ||
| } | ||
|
|
||
| for (let x = 0; x <= canvas.width; x += interval) { | ||
| ctx.beginPath() | ||
| ctx.moveTo(x, 0) | ||
| ctx.lineTo(x, canvas.height) | ||
| ctx.stroke() | ||
| } | ||
| } | ||
|
|
||
| const drawDrop = (drop) => { | ||
| const gradient = ctx.createLinearGradient( | ||
| drop.x, | ||
| drop.y, | ||
| drop.x, | ||
| drop.y + 40, | ||
| ) | ||
| gradient.addColorStop(1, dropColor) | ||
| gradient.addColorStop(0, "rgba(255, 255, 255, 0)") | ||
| ctx.strokeStyle = gradient | ||
| ctx.beginPath() | ||
| ctx.moveTo(drop.x, drop.y) | ||
| ctx.lineTo(drop.x, drop.y + 80) | ||
| ctx.stroke() | ||
| } | ||
|
|
||
| const drops = [ | ||
| { x: interval * 4, y: -20 }, | ||
| { x: interval * 8, y: -100 }, | ||
| { x: interval * 12, y: -70 }, | ||
| { x: interval * 16, y: -50 }, | ||
| { x: interval * 20, y: -110 }, | ||
| { x: interval * 24, y: -20 }, | ||
| { x: interval * 28, y: -100 }, | ||
| { x: interval * 32, y: -70 }, | ||
| { x: interval * 36, y: -50 }, | ||
| ] | ||
|
|
||
| const animate = () => { | ||
| ctx.clearRect(0, 0, canvas.width, canvas.height) | ||
| drawGrid() | ||
| if (canvas.width > 390) { | ||
| for (let i = 0; i < drops.length; i++) { | ||
| const drop = drops[i] | ||
| drawDrop(drop) | ||
|
|
||
| drop.y += dropSpeed | ||
| dropSpeed -= dropAcceleration | ||
| if (dropSpeed <= 2) { | ||
| dropSpeed = 2 | ||
| } | ||
| if (drop.y > canvas.height) { | ||
| drop.y = -20 | ||
| dropSpeed = 3 | ||
| } | ||
| } | ||
| requestId.current = requestAnimationFrame(animate) | ||
| } | ||
| } | ||
| requestId.current = animate() | ||
| }, [canvasRef]) | ||
|
|
||
| useEffect(() => { | ||
| const item = containerRef.current | ||
| const observer = new ResizeObserver((entries) => { | ||
| const { width } = entries[0].contentRect | ||
| if ( | ||
| width === cacheWidth.current || | ||
| Math.abs(width - cacheWidth.current) < 10 | ||
| ) | ||
| return | ||
| cacheWidth.current = width | ||
| requestId.current && cancelAnimationFrame(requestId.current) | ||
| init() | ||
| }) | ||
| observer.observe(item) | ||
| init() | ||
| return () => { | ||
| if (observer) { | ||
| observer.unobserve(item) | ||
| } | ||
| } | ||
| }, [containerRef, init]) | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| requestId.current && cancelAnimationFrame(requestId.current) | ||
| } | ||
| }, []) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| .cardListTitle { | ||
| @apply flex flex-row items-center py-[8px] gap-[8px] font-[600] text-[16px] leading-[24px]; | ||
| } | ||
|
|
||
| .cardListIcon { | ||
| @apply h-[16px] w-[16px] self-start flex-none text-tech-purple-03; | ||
| } | ||
|
|
||
| .cardListContent { | ||
| @apply flex py-[4px] flex-row items-center gap-[8px] font-[400] text-[14px] leading-[18px]; | ||
| } | ||
|
|
||
| .lineThroughStyle { | ||
| @apply text-white-04 line-through ml-[24px]; | ||
| } | ||
|
|
||
| .doubt { | ||
| @apply cursor-pointer w-[16px] h-[16px] ml-[8px] align-middle; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React, { FC, MouseEvent } from "react" | ||
| import clsx from "clsx" | ||
| import style from "./index.module.css" | ||
| import DoubtIcon from "@site/static/img/pricing/doubt.svg" | ||
| import PriceTipIcon from "@site/static/img/public/priceTip.svg" | ||
|
|
||
| interface CardListProps { | ||
| name: string | ||
| values: { | ||
| text: string | ||
| tip: string | ||
| hasLineThrough?: boolean | ||
| whiteThroughLine?: boolean | ||
| }[] | ||
| mouseLeave: () => void | ||
| mouseOver: ( | ||
| e: MouseEvent, | ||
| value: string, | ||
| index: number, | ||
| isBound?: boolean, | ||
| ) => void | ||
| index: number | ||
| } | ||
|
|
||
| export const CardList: FC<CardListProps> = ({ | ||
| name, | ||
| values, | ||
| mouseLeave, | ||
| mouseOver, | ||
| index, | ||
| }) => { | ||
| return ( | ||
| <div className="w-full"> | ||
| <p className={style.cardListTitle}>{name}</p> | ||
| {values.map(({ text, tip, hasLineThrough, whiteThroughLine }, i) => { | ||
| return ( | ||
| <p className={style.cardListContent} key={`${text}${i}`}> | ||
| {text && !hasLineThrough && ( | ||
| <PriceTipIcon className={style.cardListIcon} /> | ||
| )} | ||
| <span | ||
| className={clsx( | ||
| hasLineThrough && style.lineThroughStyle, | ||
| whiteThroughLine && "line-through", | ||
| )} | ||
| > | ||
| {text} | ||
| {!hasLineThrough && tip && ( | ||
| <> | ||
| <span | ||
| className={clsx(style.doubt, "inline-block lg:hidden")} | ||
| onMouseOver={(e) => { | ||
| mouseOver(e, tip, index, true) | ||
| }} | ||
| onMouseLeave={mouseLeave} | ||
| > | ||
| <DoubtIcon className="h-[16px] w-[16px]" /> | ||
| </span> | ||
| <span | ||
| className={clsx(style.doubt, "hidden lg:inline-block")} | ||
| onMouseOver={(e) => { | ||
| mouseOver(e, tip, index) | ||
| }} | ||
| onMouseLeave={mouseLeave} | ||
| > | ||
| <DoubtIcon className="h-[16px] w-[16px]" /> | ||
| </span> | ||
| </> | ||
| )} | ||
| </span> | ||
| </p> | ||
| ) | ||
| })} | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.