[WIP] - Auction Landing page UI

package.json

@@ -18,6 +18,8 @@
     "@emotion/styled": "^11",
     "@ethersproject/web": "^5.4.0",
     "@synthetixio/synpress": "^1.2.0",
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-slick": "^0.23.9",
     "@walletconnect/web3-provider": "^1.6.5",
     "awesome-debounce-promise": "^2.1.0",
     "axios": "^0.21.1",

src/app/components/copy-string/CopyString.style.tsx

@@ -0,0 +1,10 @@
+import { BoxProps } from '@chakra-ui/react';
+
+export const CopyWrapperStyle: BoxProps = {
+  borderRadius: '10px',
+  padding: '6px 8px',
+  _hover: {
+    bg: 'rgba(0, 0, 0, 0.05)',
+  }
+}
+

src/app/components/copy-string/CopyString.tsx

@@ -0,0 +1,35 @@
+import { Box, Image, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import copyIcon from "@assets/images/copy1.svg";
+import * as styles from './CopyString.style';
+
+interface ICopyStringProps {
+  str: string;
+}
+
+export const CopyString = ({ str }: ICopyStringProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleOnCopy = () => {
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  }
+
+  return (
+    <CopyToClipboard text={str} onCopy={handleOnCopy}>
+      <Box display='flex' alignItems='center' cursor='pointer' gap={1} {...styles.CopyWrapperStyle}>
+        <Image
+          src={copyIcon}
+          alt="Copy to clipboard icon"
+          boxSize='20px'
+        />
+        <Text fontSize='12px' lineHeight='18px' fontWeight={500} color='rgba(0, 0, 0, 0.5)'>
+          {copied ? 'Copied!' : 'Copy URL'}
+        </Text>
+      </Box>
+    </CopyToClipboard>
+  );
+};

src/app/components/copy-string/index.ts

@@ -0,0 +1 @@
+export * from './CopyString';

src/app/components/index.ts

@@ -6,6 +6,7 @@ export * from './checkbox';
 export * from './circular-progress';
 export * from './collection-approve';
 export * from './collection-preview';
+export * from './copy-string';
 export * from './currency-input';
 export * from './currency-select';
 export * from './date-time-picker';

src/app/modules/auctions/index.ts

@@ -0,0 +1 @@
+export * from './pages';

src/app/modules/auctions/pages/active-auction-landing-page/ActiveAuctionLandingPage.tsx

@@ -0,0 +1,17 @@
+import { Box } from '@chakra-ui/react';
+import { OpenGraph } from '@app/components';
+import { ActionSection, CreatorSection, HeroSection, TiersSection } from './components';
+
+export const ActiveAuctionLandingPage = () => {
+
+  return (
+    <Box layerStyle={'StoneBG'}>
+      {/* TODO - set open graph correctly */}
+      {/* <OpenGraph title={'Universe Minting - Products - Auction House'} /> */}
+      <HeroSection />
+      <TiersSection />
+      <CreatorSection />
+      <ActionSection />
+    </Box>
+  );
+};

src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/ActionSection.styles.tsx

@@ -0,0 +1,28 @@
+import { BoxProps, ButtonProps, ContainerProps, HeadingProps, TextProps } from '@chakra-ui/react';
+
+export const WrapperStyle: BoxProps = {
+  bg: 'linear-gradient(103.48deg, rgba(240, 233, 57, 0.16) 0%, rgba(254, 176, 254, 0.16) 49.86%, rgba(66, 164, 255, 0.16) 100%)',
+  padding: '44px 0',
+};
+
+export const ContainerStyle: ContainerProps = {
+  alignItems: 'center',
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'space-between',
+  margin: '0 auto',
+  maxW: '1110px',
+  padding: { base: '0 20px', xl: '0' },
+};
+
+export const HeadingStyle: HeadingProps = {
+  fontSize: '20px',
+  lineHeight: '24px',
+  fontWeight: 600,
+  marginBottom: { base: '20px', md: '0' },
+};
+
+export const ButtonStyle: ButtonProps = {
+  boxShadow: 'lg',
+  w: { base: '100%', md: 'fit-content' },
+};

src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/ActionSection.tsx

@@ -0,0 +1,22 @@
+import { Box, Button, Container, Heading } from '@chakra-ui/react';
+import { useCallback } from 'react';
+
+import * as styles from './ActionSection.styles';
+
+export const ActionSection = () => {
+
+  const handlePlaceBid = useCallback(() => {
+    // TODO - BE implementation
+  }, []);
+
+  return (
+    <Box {...styles.WrapperStyle}>
+      <Container {...styles.ContainerStyle}>
+        <Heading {...styles.HeadingStyle}>Bid to win 1 of 3 NFT bundles</Heading>
+        <Button {...styles.ButtonStyle} onClick={handlePlaceBid}>
+          Place a bid
+        </Button>
+      </Container>
+    </Box>
+  );
+};

src/app/modules/auctions/pages/active-auction-landing-page/components/action-section/index.ts

@@ -0,0 +1 @@
+export * from './ActionSection';

src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/CreatorSection.styles.tsx

@@ -0,0 +1,39 @@
+import { BoxProps, ButtonProps, ContainerProps, HeadingProps } from "@chakra-ui/react";
+
+export const WrapperStyle: BoxProps = {
+  bg: '#fff',
+  padding: { base: '10px 0 60px 0', lg: '20px 0 120px 0' },
+};
+
+export const ContainerStyle: ContainerProps = {
+  margin: '0 auto',
+  maxW: '1110px',
+  padding: { base: '0 20px', xl: '0' },
+};
+
+export const HeadingStyle: HeadingProps = {
+  fontSize: {
+    lg: '32px',
+    md: '26px',
+    base: '20px',
+  },
+  lineHeight: {
+    lg: '40px',
+    md: '32px',
+    base: '24px',
+  },
+  fontWeight: 600,
+  marginBottom: '8px',
+};
+
+export const SocialButtonStyle: ButtonProps = {
+  padding: '8px',
+  _hover: {
+    bg: 'rgba(0, 0, 0, .04)'
+  },
+  sx: {
+    '.chakra-button__icon': {
+      margin: '0'
+    }
+  }
+};

src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/CreatorSection.tsx

@@ -0,0 +1,43 @@
+import { Box, Button, Container, Heading, Image, Text } from "@chakra-ui/react";
+
+import * as styles from './CreatorSection.styles';
+import React from "react";
+import CreatorAvatarImage from '@assets/images/_MOCK_AUCTION_CREATOR2.png';
+import twitterIcon from "@assets/images/icons_twitter.svg";
+import instagramIcon from '@assets/images/instagram-outlined.svg';
+
+export const CreatorSection = () => {
+
+  return (
+    <Box {...styles.WrapperStyle}>
+      <Container {...styles.ContainerStyle}>
+        <Box display="flex" alignItems={{ base: 'flex-start', md: 'center' }} flexDirection={{ base: 'column', md: 'row' }} gap={{ base: 6, md: 12 }} my={4} fontWeight={700}>
+          <Image
+            src={CreatorAvatarImage}
+            alt={'User'}
+            borderRadius={'12px'}
+            boxSize={{ base: '70px', md: '200px' }}
+          />
+          <Box>
+            <Heading {...styles.HeadingStyle}>About Justin 3LAU</Heading>
+            <Text fontSize="16px" lineHeight="24px" fontWeight={400} color="rgba(0, 0, 0, 0.6)">Cras vel eget vitae quis scelerisque arcu ut. Tristique velit nec sed sit massa. Odio molestie velit purus at blandit. Lacus, fusce imperdiet velit augue neque tincidunt diam fringilla in. Natoque ipsum ipsum eget pellentesque. Magna felis, praesent ornare tincidunt nunc.</Text>
+            <Box display="flex" gap={2} mt={4}>
+              <Button
+                variant="simpleOutline"
+                leftIcon={<Image src={instagramIcon} alt="Arrow" />}
+                mr={1}
+                {...styles.SocialButtonStyle}
+              />
+              <Button
+                variant="simpleOutline"
+                leftIcon={<Image src={twitterIcon} alt="Arrow" />}
+                mr={1}
+                {...styles.SocialButtonStyle}
+              />
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};

src/app/modules/auctions/pages/active-auction-landing-page/components/creator-section/index.ts

@@ -0,0 +1 @@
+export * from './CreatorSection';