From 1b449dae2bc1548e4e3f51666ad9517c8416f352 Mon Sep 17 00:00:00 2001 From: rasguy92 Date: Mon, 6 Nov 2023 11:19:31 +0700 Subject: [PATCH] feat: section one mobile done --- src/assets/icons/VersusIcon.tsx | 71 +++++ src/assets/icons/index.ts | 1 + .../landing-hero-left-widget-mobile-image.png | Bin 0 -> 11354 bytes ...landing-hero-right-widget-mobile-image.png | Bin 0 -> 2740 bytes src/components/Dice/animations.ts | 18 ++ src/components/Dice/index.tsx | 16 +- .../LandingHeroPlayerCard/index.tsx | 32 +- src/components/LandingPageHero/index.tsx | 28 ++ .../LandingPageHeroMobile/index.tsx | 29 ++ .../LandingPageHeroSection/index.tsx | 27 +- .../LandingPageHeroSectionMobile/index.tsx | 27 ++ src/components/MainContainer/index.tsx | 2 +- src/components/cards/NFTCard.tsx | 60 ++++ src/components/cards/NFTOrRequestCard.tsx | 68 +++++ .../cards/OfferActionsNFTRectangle.tsx | 36 +++ src/components/cards/RectangleNFTCard.tsx | 26 ++ src/components/cards/index.ts | 11 + src/components/cards/types.ts | 289 ++++++++++++++++++ src/containers/LandingPage/index.tsx | 9 +- tailwind.config.cjs | 3 +- 20 files changed, 721 insertions(+), 32 deletions(-) create mode 100644 src/assets/icons/VersusIcon.tsx create mode 100644 src/assets/images/landing-hero-left-widget-mobile-image.png create mode 100644 src/assets/images/landing-hero-right-widget-mobile-image.png create mode 100644 src/components/LandingPageHero/index.tsx create mode 100644 src/components/LandingPageHeroMobile/index.tsx create mode 100644 src/components/LandingPageHeroSectionMobile/index.tsx create mode 100644 src/components/cards/NFTCard.tsx create mode 100644 src/components/cards/NFTOrRequestCard.tsx create mode 100644 src/components/cards/OfferActionsNFTRectangle.tsx create mode 100644 src/components/cards/RectangleNFTCard.tsx create mode 100644 src/components/cards/index.ts create mode 100644 src/components/cards/types.ts diff --git a/src/assets/icons/VersusIcon.tsx b/src/assets/icons/VersusIcon.tsx new file mode 100644 index 0000000..c356312 --- /dev/null +++ b/src/assets/icons/VersusIcon.tsx @@ -0,0 +1,71 @@ +import * as React from "react" +import { SVGProps } from "react" +const SvgComponent = (props: SVGProps) => ( + + + + + + + + + + + + + + + + + + + +) +export default SvgComponent diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 87ec865..b514d30 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -33,3 +33,4 @@ export { default as RestartIcon } from './RestartIcon'; export { default as DownloadIcon } from './DownloadIcon'; export { default as XIcon } from './XIcon' export { default as TelegramIcon } from './TelegramIcon' +export { default as VersusIcon } from './VersusIcon' diff --git a/src/assets/images/landing-hero-left-widget-mobile-image.png b/src/assets/images/landing-hero-left-widget-mobile-image.png new file mode 100644 index 0000000000000000000000000000000000000000..a2a51e9b459de2adbea949d30fe27156014419e6 GIT binary patch literal 11354 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 literal 0 HcmV?d00001 diff --git a/src/assets/images/landing-hero-right-widget-mobile-image.png b/src/assets/images/landing-hero-right-widget-mobile-image.png new file mode 100644 index 0000000000000000000000000000000000000000..d9f6c0c5e0415224f95657a14a00aeb25089f7b6 GIT binary patch literal 2740 zcmV;l3QP5gP)NmUe8X(|Yc_P!hQWYNAHjd-lomIJj**aYuCAfT0`j^9EQO9H z5JGmBl}vs_w%HFRf*IsEHH)C5F=TIf>E!RoLR_e8dL589KxbGGAuY>dhD4;*L<0A? zT%D-<=z?tLI!2?UtPCRo0}KzyLQoNMkpX;m^(ub3XSZyZl$PU(vMm@1NRWyQ(BXnC zWGL=lci2rark9k`YGLNSR~airb8`c#w{MYcha(r&&(*+cwIWl|T@xo{Y>wzp`?YJZ z+LRnIc3d7ZjS(RPtJXgKwYXGwVbF8(@+aW#wcpaDWzMA# zO^pqB|Gl$FC!e-7%iCZ~np}i6_pE~!=&p$qhBZgL^N(8Eh20f(oaG1}=x{o5l-9Hi zwBIT_I~z-HU!FEMHLODX?d_vzZfXRtu*Tq@|L|McX2Y>n3m2zN2;DVtf~Gmb=k?M; z_}>r&QQmjEdyy&ld|teJ>Le_dY?FZVKDIJv|5p zgHh*r-0pC$vCsw&YxFQ!!NzJx4Cam!VN^DO$w;D(yId}~BgUY^H*U7UXo>IE(v@yx zq)3j{3bQ#iR~S=>E!(PDytvHH>aDnRu`cSI6Sc=^>-e~AFJEyd*4?*Wwi~b1)U@qJgV=rV@jSe>iDKj+puTPOG8d~$JU>* zsaLZ7$fJ*=e8$(13NeKUsm%z5ru0V?MR{XH7Q&1`VDN%I>htKcGG|4?gfGYq2&kSdbD8=f;; zXrZZ8M{QNxsk@3_M)5>KLgeR<58F0da{gBm{SZ6rWByGQ#31d8XoM6{TGkNw4J3<& z?wU9up&aqrD=(v=L3yj&uU~`Cjj--ydE0y>OF}}lwY73Rq&eKM=M$o* zyBkA6cTJq2T05e&dza3x}Mp+NdT(Vc}#fyW{J!eUT0Xy>)PZGMD3QeXPEzGTc%* z^utSWmPY_Lw8M_a6@5TP&f%*&)^NPp}ci$!bb=; zIV3dBoeIny6%;7JZDYpVtjX$SK3^~tPoesX27SwoHfpj?0t>BqeA7l%VqYt6osE}& z^*pp9NXyQ8>W&0a{YOPpJfXWLPSAX!N~HT^y_TUsv_yz>M+JrPV{TK0xgWn@klj&G zkdRKdp{Z+P1cHHZ;My}keF81bO$lGi+|i3KRfqRejjoG_mzD`lEnT5nD#SFcbi-Ve z<~icVz%_zoN%zC=4}0{Y21^ZTE`&Sq#awC8DA7KlXfe#RT^2g*qZO=RUnR>g`O)JY z`dn)ZO*a(u=cj1~;#A&*AT&c$*VOCp#q+0LfH$C&5gpF|hgP#_?scbs5>QfbDTIsG za9w>in`4r1QS3G|b1TUSG1l_M^{jwyODyVMb9C3l3EVH7RohN*#jWImf*c7u$`v>D zF)eKOHVvFRellHxBTFfi5B!gy!>^pzq~0n+s>8hy*L}*yV6No{eM7=#Lu@xS<0dKW zj(*(;T*-j>^}1`~gp69#uZ6m(n#+o9r+5D2sROq||M)3^(D$cyfAZZZ!$C#~;iR>x z!>!7Lokbgc4;Bq9#QOIPXiL0PmkV^)#0lKwh{}Sw$hRv&S|7H3h~^Guy}g+e9jGXD zM4g{cyGM+91Luf)DhPT8=&(E8;KZeCJ>U^;gs7lG%$}eGX?1yB5kic@hWW|;+kv|$ z4t(6{32-Zf?wUA(`@&lC`5<*Ule&i3bLIb4oJnvmgy_76z$a}U zrlO8}1G*4HhK)h^lMWu|_kqVkFC#cX7lIRXAvi%7f)jKhI6)RdB1mkxVx6==KpGVx z1gQo(!-fcPpDaYskKMHS(+C~SktC^RW@)i9nQ_jX;!Xl-86+IUup%KmuS?=!>$?v& zmo80P&5W|*jqGE>E$hMgu$eKY?Kf%9%LCHwEsCcqUN)R*K}n70000 { + const ctx = gsap.context(() => { + roll(); + }, diceRef); + return () => ctx.revert(); + }); } \ No newline at end of file diff --git a/src/components/Dice/index.tsx b/src/components/Dice/index.tsx index c9d906a..a995b25 100644 --- a/src/components/Dice/index.tsx +++ b/src/components/Dice/index.tsx @@ -1,11 +1,21 @@ +import { SVGProps } from 'react'; import { DiceContainer } from './types'; import WegaDice from './images/WegaDice'; import "twin.macro"; -export const Dice: React.FC<{ diceRef: any }> = ({ diceRef }: { diceRef: any }) => { +type DiceProps = { + diceRef: any; + svgProps?: SVGProps; +} & React.Attributes & React.AllHTMLAttributes + +export const Dice: React.FC = ({ + diceRef, + svgProps, + ...props +}: DiceProps) => { return ( - - + + ) } diff --git a/src/components/LandingHeroPlayerCard/index.tsx b/src/components/LandingHeroPlayerCard/index.tsx index d202c73..533300e 100644 --- a/src/components/LandingHeroPlayerCard/index.tsx +++ b/src/components/LandingHeroPlayerCard/index.tsx @@ -3,6 +3,8 @@ import leftAvatarSource from '../../assets/images/hero-left-player-image.png'; import rightAvatarSource from '../../assets/images/hero-right-player-image.png'; import leftWidget from '../../assets/images/hero-left-widget.png'; import rightWidget from '../../assets/images/hero-right-widget.png'; +import rightWidgetImage from '../../assets/images/landing-hero-right-widget-mobile-image.png'; +import leftWidgetImage from '../../assets/images/landing-hero-left-widget-mobile-image.png'; import { PlayerCardContainer, @@ -29,7 +31,33 @@ export const LeftPlayerCard = () => { left-wager - Launch the app to start + {/* Launch the app to start */} + + ) +} +export const LeftPlayerCardMobile = () => { + return ( + +
+ #392 + BAYC + 38.1 ETH + (~73.00 USD) +
+ left-wager + + ) +} +export const RightPlayerCardMobile = () => { + return ( + + left-wager +
+ #392 + Noun + 38.0 ETH + (~73.200 USD) +
) } @@ -51,7 +79,7 @@ export const RightPlayerCard = () => { right-wager - Awaiting opponent + {/* Awaiting opponent */} ) } diff --git a/src/components/LandingPageHero/index.tsx b/src/components/LandingPageHero/index.tsx new file mode 100644 index 0000000..fb5e1f2 --- /dev/null +++ b/src/components/LandingPageHero/index.tsx @@ -0,0 +1,28 @@ +import { useRef } from 'react'; +import { PlayGameContainer } from "../LandingPageHeroSection/types"; +import { Dice } from "../Dice"; +import { useRoll, useAutoRoll } from "../Dice/animations"; +import { LeftPlayerCard, RightPlayerCard } from "../LandingHeroPlayerCard"; +import Button from "../Button"; +import { SectionHeader } from '../../common/Section/types'; +import 'twin.macro'; + +const LandingPageHero = () => { + const diceRef = useRef(null); + const triggerDice = useRoll(diceRef); + useAutoRoll(diceRef); + + return ( <> + +
+ + + +
+ + + Play multiple P2P betting games with your NFTs. ) +} +export default LandingPageHero; \ No newline at end of file diff --git a/src/components/LandingPageHeroMobile/index.tsx b/src/components/LandingPageHeroMobile/index.tsx new file mode 100644 index 0000000..3c12bc5 --- /dev/null +++ b/src/components/LandingPageHeroMobile/index.tsx @@ -0,0 +1,29 @@ +import { useRef } from 'react'; +import { Dice } from "../Dice"; +import { useAutoRoll } from "../Dice/animations"; +import { LeftPlayerCardMobile, RightPlayerCardMobile} from "../LandingHeroPlayerCard"; +import Button from "../Button"; + +import { VersusIcon } from '../../assets/icons'; +import 'twin.macro'; + +const LandingPageHeroMobile = () => { + const diceRef = useRef(null); + useAutoRoll(diceRef); + + return ( +
+ +
+ + +
+ + +
+ ) +} +export default LandingPageHeroMobile; \ No newline at end of file diff --git a/src/components/LandingPageHeroSection/index.tsx b/src/components/LandingPageHeroSection/index.tsx index eedafd3..d1e716d 100644 --- a/src/components/LandingPageHeroSection/index.tsx +++ b/src/components/LandingPageHeroSection/index.tsx @@ -1,19 +1,10 @@ -import { useRef } from 'react'; import Section from "../../common/Section" -import { SectionHeaderContainer, SectionHeaderTitleLarge, SectionHeader } from "../../common/Section/types" -import { PlayGameContainer } from './types' -import { LeftPlayerCard, RightPlayerCard } from '../LandingHeroPlayerCard'; +import { SectionHeaderContainer, SectionHeaderTitleLarge } from "../../common/Section/types" import { FloatingOrbs } from '../../common/FloatingOrbs'; -import Button from "../Button"; -import { Dice } from "../Dice"; -import { useRoll } from "../Dice/animations"; -import { useMediaQuery } from '../../hooks'; +import LandingPageHero from '../LandingPageHero'; import 'twin.macro'; const LandingPageHeroSection = () => { - const diceRef = useRef(null); - const triggerDice = useRoll(diceRef); - const { isMobile } = useMediaQuery(); return ( <> @@ -23,21 +14,11 @@ const LandingPageHeroSection = () => { hdr={ - {isMobile ? "Your NFTs’ Playground" : "Your NFTs’ Favourite Playground"}. + {"Your NFTs’ Favourite Playground"}. }> - -
- - - -
- - - Play multiple P2P betting games with your NFTs. + ) diff --git a/src/components/LandingPageHeroSectionMobile/index.tsx b/src/components/LandingPageHeroSectionMobile/index.tsx new file mode 100644 index 0000000..f110ef1 --- /dev/null +++ b/src/components/LandingPageHeroSectionMobile/index.tsx @@ -0,0 +1,27 @@ +import Section from "../../common/Section" +import { SectionHeaderContainer, SectionHeaderTitleLarge, SectionHeader } from "../../common/Section/types" +import { FloatingOrbs } from '../../common/FloatingOrbs'; +import 'twin.macro'; +import LandingPageHeroMobile from "../LandingPageHeroMobile"; + +const LandingPageHeroSectionMobile = () => { + return ( + <> + +
+ + {"Your NFTs’ Playground"}. + + Play multiple P2P betting games with your NFTs. + + }> + +
+ + ) +} +export default LandingPageHeroSectionMobile; \ No newline at end of file diff --git a/src/components/MainContainer/index.tsx b/src/components/MainContainer/index.tsx index 6c6025d..58ffcba 100644 --- a/src/components/MainContainer/index.tsx +++ b/src/components/MainContainer/index.tsx @@ -3,7 +3,7 @@ import 'twin.macro'; const MainContainer: React.FC = ({ children, ...rest }: MainPropsContainerProps) => { return ( -
+
{children}
) diff --git a/src/components/cards/NFTCard.tsx b/src/components/cards/NFTCard.tsx new file mode 100644 index 0000000..c648d33 --- /dev/null +++ b/src/components/cards/NFTCard.tsx @@ -0,0 +1,60 @@ +import { + NFTProps, + CardWrapper, + RequestProps +} from './types'; +import { SVGComponent } from '../svg'; +import { Link } from 'react-router-dom'; +import { TransactionState } from '../../listing' + +export type NFTCardProps = { + listButton?: boolean; + tradeButton?: boolean; + offersButton?: boolean; + listed?: boolean; + isOfferMaker?: boolean; + nft: NFTProps, + request?: RequestProps; +} + +const NFTCard: React.FC = ({ + offersButton, + isOfferMaker, + listButton, + request, + listed, + tradeButton, + nft, +}) => { + return ( + +
+ + { /* add banner that shows if an nft is listed or unlisted */} +
+
+
{nft.nftName}
+
price: {nft.ethPrice} ETH
+
+ { + listButton && !listed && +
+ + + +
+ } + { + tradeButton && request && request.state === TransactionState.OPEN && + + + + } + + ) +} +export default NFTCard; diff --git a/src/components/cards/NFTOrRequestCard.tsx b/src/components/cards/NFTOrRequestCard.tsx new file mode 100644 index 0000000..12abdb8 --- /dev/null +++ b/src/components/cards/NFTOrRequestCard.tsx @@ -0,0 +1,68 @@ +import {type NFTProps, RequestProps, NFTCardProps, NFTCardWrapper } from '../cards' +import {Link} from 'react-router-dom' +import {TransactionState} from '../../listing' +import {SVGComponent} from '../svg'; +import { + useAccount +} from 'wagmi'; +import { + parseIntFromBignumber +} from '../../../utils' + +const NFTOrRequestCard = (props: NFTProps | RequestProps) => { + + const { + tradeButton, + withdrawButton, + offersButton, + listButton, + depositButton, + } = props as NFTCardProps; + + const { address } = useAccount(); + const rProps = props as RequestProps; + const mProps = props as NFTProps; + + return ( + +
+ +
+
+
{props.nftName}
+
price: {mProps.ethPrice} ETH
+
+ { + (offersButton || withdrawButton || tradeButton || listButton || depositButton) && +
+ { + offersButton && rProps.ownerAgainst?.toLowerCase() === address?.toLowerCase() && + + + + } + { + tradeButton && rProps && Number(rProps?.state) === TransactionState.OPEN && + + + + } + { + listButton && mProps && + + + + } +
+ } + + ) +} + +export default NFTOrRequestCard; \ No newline at end of file diff --git a/src/components/cards/OfferActionsNFTRectangle.tsx b/src/components/cards/OfferActionsNFTRectangle.tsx new file mode 100644 index 0000000..1ff3143 --- /dev/null +++ b/src/components/cards/OfferActionsNFTRectangle.tsx @@ -0,0 +1,36 @@ +import { SVGComponent } from '../svg'; +import { OfferBarNFTNameOrPriceETH } from '../../offers/types'; +import { + NFTProps, + OfferActionNFTRectangleGradientWrapper, + OfferActionNFTRectangleBigNFTDetailWrapper, + OfferActionsNFTRectangleBigNFTName, + OfferActionsNFTRectangleBigCollectionName, + OfferActionsNFTRectangleBigOwner, + OfferActionsNFTRectangleTraits, +} from './types'; +import {miniWalletAddress} from '../../../utils' + + +interface OfferActionsNFTRectangleProps { + yours?: boolean; + nft: NFTProps; +} + +const OfferActionsNFTRectangle: React.FC = (props) => { + return props ? ( + + + + {props.nft.nftName} + Price: {props.nft.ethPrice} ETH + Collection: {miniWalletAddress(props.nft.nftAddress as `0x${string}`)} + Owner: {miniWalletAddress(props.nft.owner as `0x${string}`)} + Traits: + + + ) + : <> +} + +export default OfferActionsNFTRectangle; diff --git a/src/components/cards/RectangleNFTCard.tsx b/src/components/cards/RectangleNFTCard.tsx new file mode 100644 index 0000000..593cfc4 --- /dev/null +++ b/src/components/cards/RectangleNFTCard.tsx @@ -0,0 +1,26 @@ +import { RectangleNFTCardWrapper, RectangleNFTCardProps } from './types'; +import { SVGComponent } from '../../common/svg'; +import { RequestProps, NFTProps } from '../../common/cards'; +import { shortenHexString } from '../../../utils' + +const RectangleNFTCard = (props: RectangleNFTCardProps) => { + // should display the nft select with selected squares (yours) + // theirs display the nft from listedNFTs + + return props.nft && ( + +
{props.yours ? "Your asset" : "Their asset"}
+
+ +
+
{ props.nft.nftName }
+
{ (props.nft.ethPrice && String(props.nft.ethPrice).concat(' ETH')) || '1.00 ETH'}
+
Collection: { shortenHexString(props.nft.nftAddress as `0x${string}`, 5)}
+
Owner: {props.yours ? "You" : shortenHexString(props.nft.owner as `0x${string}`, 5) }
+
+
+ + ) +} + +export default RectangleNFTCard; diff --git a/src/components/cards/index.ts b/src/components/cards/index.ts new file mode 100644 index 0000000..08cb089 --- /dev/null +++ b/src/components/cards/index.ts @@ -0,0 +1,11 @@ +export { + RectangleNFTCardWrapper, + NFTCardWrapper, + RequestCardsContainer, + SwapIconWrapper +} from './types' +export type { RequestProps, NFTCardProps, NFTProps } from './types' +export { default as NFTOrRequestCard } from './NFTOrRequestCard' +export { default as RectangleNFTCard } from './RectangleNFTCard' +export { default as OfferActionsNFTRectangle } from './OfferActionsNFTRectangle' +export { default as NFTCard } from './NFTCard' \ No newline at end of file diff --git a/src/components/cards/types.ts b/src/components/cards/types.ts new file mode 100644 index 0000000..077fbad --- /dev/null +++ b/src/components/cards/types.ts @@ -0,0 +1,289 @@ +import styled from 'styled-components'; +import { BigNumber } from 'ethers'; +import {TransactionState} from '../../listing' +import {OfferState} from '../../trade' + +// export const Colors = { +// [TransactionState.OPEN]: '#F26D21', +// [TransactionState.APPROVED]: '#787878', +// [TransactionState.READY]: '#E62700', +// [TransactionState.CLOSED]: '#151515' +// } + +// export const BadgeText = { +// [TransactionState.OPEN]: 'OPEN', +// [TransactionState.APPROVED]: 'APPROVED', +// [TransactionState.READY]: 'READY', +// [TransactionState.CLOSED]: 'CLOSED' +// } + +export type NFTCardProps = { + tradeButton?: boolean; + withdrawButton?: boolean; + offersButton?: boolean; + listButton?: boolean; + depositButton?: boolean; + svgString?: string; + imgUrl?: string; + ethPrice: number; + transferId: string | any; +} + + +export type RequestProps = { + state: TransactionState; + nftAgainst: string | `0x${string}`; + tokenIdAgainst: number | BigNumber; + ownerAgainst: string | `0x${string}`; + nftFor: string | `0x${string}`; + tokenIdFor: number | BigNumber; + ownerFor: string | `0x${string}`; + deadline: number | BigNumber; + transactionId: string; + nftName: string; + nonce: number | BigNumber; + ts?: number; + id?: string; + offerState: OfferState; + creator?: `0x${string}`; + shouldSync?: boolean; +} & NFTCardProps + +export type NFTProps = { + tokenId: number | BigNumber; + nftAddress: string | `0x${string}`; + owner: string; + nftName: string; + approved?: boolean | undefined | Promise; + id: string; +} & NFTCardProps + +export const CardWrapper = styled.article` + background-color: #2A2A2A; + width: 22.5%; + padding: 0rem; + & header { + height: 226px; + margin-left: 0rem; + margin-right: 0rem; + padding: 0rem; + position: relative; + margin-bottom: 0rem; + & > div { + padding: 1rem; + border-radius: 5px 5px 0px 0px; + width: 100%; + height: 100%; + } + } + & > div, footer { + padding: 10px 15px; + } + & footer { + margin: 0rem; + background-color: inherit; + button { + justify-content: center; + max-width: unset; + width: 100%; + } + a { + &:hover { + text-decoration: unset; + } + } + } +` + +export const NFTCardWrapper = styled.article` + background-color: #2A2A2A; + width: 22.5%; + padding: 0rem; + & header { + height: 226px; + margin-left: 0rem; + margin-right: 0rem; + padding: 0rem; + position: relative; + margin-bottom: 0rem; + & > div { + padding: 1rem; + border-radius: 5px 5px 0px 0px; + width: 100%; + height: 100%; + } + } + & > div, footer { + padding: 10px 15px; + } + & footer { + margin: 0rem; + background-color: inherit; + button { + justify-content: center; + max-width: unset; + width: 100%; + } + a { + &:hover { + text-decoration: unset; + } + } + } +` + +export const RequestCardsContainer = styled.div` + display: flex; + flex-flow: row wrap; + gap: 2rem; + justify-content: start; + summary { + padding: 16px; + } +` + +export interface RectangleNFTCardProps { + yours: boolean; + nft: NFTProps; +} + +export const RectangleNFTCardWrapper = styled.div` + display:flex; + flex-direction:column; + text-align: left; + width: 100%; + margin-top: 1rem; + + & > h6:first-child { + margin-bottom: 0.25rem; + } + & div.information { + display:flex; + flex-direction:row; + width: 100%; + margin-bottom: 1rem; + border: 1px solid #9A9A9A; + border-radius: 10px; + padding: 12px; + background-color: #3F3F3F; + h6 { + margin: unset; + margin-bottom: 0.25rem; + } + > div:first-child { + margin-right: 0.5rem; + width: 100px; + height: 100px; + svg { + width: 100%; + } + padding: 5px; + background-color: #787878; + border-radius:5px; + } + & > div.details { + display:flex; + flex-direction: column; + padding: 2px; + } + } +` +interface SwapIconWrapperProps { + width?: string; +} + +export const SwapIconWrapper = styled.div` + --swap-icon-default-width: 40px; + width: ${({ width }) => width || "var(--swap-icon-default-width)" }; +` + +export const OfferActionNFTRectangleGradientWrapper = styled.div` +display: flex; +align-items: center; +width: 100%; +min-width: 473px; +margin: auto; +gap: 0px 20px; + +position: relative; +padding: 12px 12px; +box-sizing: border-box; + +--border: 2px; +background: #505050; +background-clip: padding-box; +border: solid var(--border) transparent; +border-radius: 1em; + +&:before { + content: ''; + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + z-index: -1; + margin: calc(-1 * var(--border)); + border-radius: inherit; + background: linear-gradient(to right, #e68572, #8246e2); +} +> div.image-wrapper { + border-radius: 5px; + background-color: rgb(120, 120, 120); + width: 200px; + height: 200px; +} +` + +export const OfferActionNFTRectangleBigNFTDetailWrapper = styled.div` + align-self: flex-start; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 15px 0px; +` + +export const OfferActionsNFTRectangleBigNFTName = styled.span` + color: #FDFDFD; + text-align: center; + leading-trim: both; + text-edge: cap; + font-family: League Spartan; + font-size: 21px; + font-style: normal; + font-weight: 400; + line-height: 19px; +` + +export const OfferActionsNFTRectangleBigCollectionName = styled.span` + color: #FDFDFD; + text-align: center; + leading-trim: both; + text-edge: cap; + font-family: League Spartan; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 15px; +` + +export const OfferActionsNFTRectangleBigOwner = styled.span` + color: #FDFDFD; + text-align: center; + leading-trim: both; + text-edge: cap; + font-family: League Spartan; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 15px; +` + +export const OfferActionsNFTRectangleTraits = styled.span` + color: #FDFDFD; + text-align: center; + leading-trim: both; + text-edge: cap; + font-family: League Spartan; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 15px; +` diff --git a/src/containers/LandingPage/index.tsx b/src/containers/LandingPage/index.tsx index 6243ac4..e5ace9e 100644 --- a/src/containers/LandingPage/index.tsx +++ b/src/containers/LandingPage/index.tsx @@ -1,18 +1,25 @@ import React from 'react' import { Helmet } from 'react-helmet-async' import LandingPageHeroSection from '../../components/LandingPageHeroSection'; +import LandingPageHeroSectionMobile from '../../components/LandingPageHeroSectionMobile'; import LandingPagePlaySection from '../../components/LandingPagePlaySection'; import LandingPageWagerTypeSection from '../../components/LandingPageWagerTypeSection'; import LandingPageOwnTheYardSection from '../../components/LandingPageOwnTheYardSection'; import MainContainer from '../../components/MainContainer'; +import { useMediaQuery } from '../../hooks'; const LandingPage = () => { + const { isMobile } = useMediaQuery(); return ( <> Wega - + { + isMobile ? + : + + } diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 605ee4d..7a1ae45 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -50,8 +50,7 @@ export default { }, boxShadow: { 'wega-nav': '0rem -3.5rem 1.5rem 5rem #151515', - // box-shadow: 0rem -3.5rem 1.5rem 5rem var(--background-color); - + 'primary-button': '0px 10.74153px 16.52542px 0px rgba(0, 0, 0, 0.30)' }, animation: { 'rotate-orbs': 'rotate-orbs 10s linear 5s infinite',