From c59d85990e5c6b92121bb769f568697605717b46 Mon Sep 17 00:00:00 2001 From: Rodolfo Hansen Date: Sat, 19 Oct 2024 17:18:22 +0200 Subject: [PATCH] Founder's Sale on hold --- src/assets/images/nft-cards/nft-1.svg | 9 - src/assets/images/nft-cards/nft-2.svg | 9 - src/assets/images/nft-cards/nft-3.svg | 12 -- src/assets/images/nft-cards/nft-4.svg | 9 - src/assets/images/nft-cards/nft-5.svg | 9 - src/assets/images/nft-cards/nft-6.svg | 9 - src/assets/images/nft-infos/light.svg | 13 -- src/assets/images/nft-infos/resources.svg | 37 ---- src/assets/images/nft-infos/star.svg | 19 -- src/components/App.tsx | 1 - src/components/founder-sale/Counter.tsx | 120 ----------- src/components/founder-sale/NFTButton.tsx | 81 ------- src/components/founder-sale/NFTDetails.tsx | 87 -------- src/components/founder-sale/NFTSlider.tsx | 71 ------- .../founder-sale/modal/FounderModal.tsx | 96 --------- .../modal/FounderModalContent.tsx | 200 ------------------ src/components/founder-sale/modal/styles.css | 132 ------------ src/components/founder-sale/styles.css | 66 ------ 18 files changed, 980 deletions(-) delete mode 100644 src/assets/images/nft-cards/nft-1.svg delete mode 100644 src/assets/images/nft-cards/nft-2.svg delete mode 100644 src/assets/images/nft-cards/nft-3.svg delete mode 100644 src/assets/images/nft-cards/nft-4.svg delete mode 100644 src/assets/images/nft-cards/nft-5.svg delete mode 100644 src/assets/images/nft-cards/nft-6.svg delete mode 100644 src/assets/images/nft-infos/light.svg delete mode 100644 src/assets/images/nft-infos/resources.svg delete mode 100644 src/assets/images/nft-infos/star.svg delete mode 100644 src/components/founder-sale/Counter.tsx delete mode 100644 src/components/founder-sale/NFTButton.tsx delete mode 100644 src/components/founder-sale/NFTDetails.tsx delete mode 100644 src/components/founder-sale/NFTSlider.tsx delete mode 100644 src/components/founder-sale/modal/FounderModal.tsx delete mode 100644 src/components/founder-sale/modal/FounderModalContent.tsx delete mode 100644 src/components/founder-sale/modal/styles.css delete mode 100644 src/components/founder-sale/styles.css diff --git a/src/assets/images/nft-cards/nft-1.svg b/src/assets/images/nft-cards/nft-1.svg deleted file mode 100644 index 7e20663..0000000 --- a/src/assets/images/nft-cards/nft-1.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/images/nft-cards/nft-2.svg b/src/assets/images/nft-cards/nft-2.svg deleted file mode 100644 index 0576182..0000000 --- a/src/assets/images/nft-cards/nft-2.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/images/nft-cards/nft-3.svg b/src/assets/images/nft-cards/nft-3.svg deleted file mode 100644 index 2ec25a6..0000000 --- a/src/assets/images/nft-cards/nft-3.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/images/nft-cards/nft-4.svg b/src/assets/images/nft-cards/nft-4.svg deleted file mode 100644 index ca56cc6..0000000 --- a/src/assets/images/nft-cards/nft-4.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/images/nft-cards/nft-5.svg b/src/assets/images/nft-cards/nft-5.svg deleted file mode 100644 index e4fd4cd..0000000 --- a/src/assets/images/nft-cards/nft-5.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/images/nft-cards/nft-6.svg b/src/assets/images/nft-cards/nft-6.svg deleted file mode 100644 index 6ac91a1..0000000 --- a/src/assets/images/nft-cards/nft-6.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/images/nft-infos/light.svg b/src/assets/images/nft-infos/light.svg deleted file mode 100644 index a63d946..0000000 --- a/src/assets/images/nft-infos/light.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/src/assets/images/nft-infos/resources.svg b/src/assets/images/nft-infos/resources.svg deleted file mode 100644 index cca4f57..0000000 --- a/src/assets/images/nft-infos/resources.svg +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/nft-infos/star.svg b/src/assets/images/nft-infos/star.svg deleted file mode 100644 index 0fe263c..0000000 --- a/src/assets/images/nft-infos/star.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/src/components/App.tsx b/src/components/App.tsx index 27c1d38..6de28f2 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -8,7 +8,6 @@ const App = () => ( } /> - } /> } /> diff --git a/src/components/founder-sale/Counter.tsx b/src/components/founder-sale/Counter.tsx deleted file mode 100644 index a8447a0..0000000 --- a/src/components/founder-sale/Counter.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { useMediaQuery } from '@mui/material'; -import { maxWidth840 } from 'components/rwd/detectMobile'; -import { ChangeEvent } from 'react'; -import styled from 'styled-components'; - -import { colors } from 'theme'; - -import { motion } from 'framer-motion'; -import { transition, transformVariant } from 'constants/motionConfig'; -import PlusIcon from '../../assets/icons/plus.svg'; -import MinusIcon from '../../assets/icons/minus.svg'; - -interface Props { - value: number; - handleIncrement: () => void; - handleDecrement: () => void; - handleChange: (e: ChangeEvent) => void; -} - -export const Counter = ({ value, handleIncrement, handleDecrement, handleChange }: Props) => { - const isTablet = useMediaQuery(maxWidth840); - - return ( - - - Amount: - - - {isTablet && } - - {!isTablet && } - - - - ); -}; - -const CounterContainer = styled(motion.div)` - display: flex; - gap: 12px; - align-items: center; - - @media (max-width: 840px) { - flex-direction: column; - } -`; - -const StyledLabel = styled.span` - color: ${colors.textTertiary600}; - font-size: 1.5rem; - font-weight: 500; - - transition: 0.5s; - - @media (max-width: 640px) { - font-size: 1rem; - } -`; - -const NumberInput = styled.input` - width: 200px; - height: 56px; - text-align: center; - font-size: 16px; - border: 1px solid #fff; - border-radius: 24px; - background-color: white; - color: ${colors.textTertiary600}; - font-size: 24px; - outline: none; - -moz-appearance: textfield; /* Remove Firefox arrows */ - - ::-webkit-outer-spin-button, - ::-webkit-inner-spin-button { - -webkit-appearance: none; /* Remove Chrome arrows */ - margin: 0; - } - - @media (max-width: 640px) { - height: 42px; - font-size: 18px; - } -`; - -const InputContainer = styled.div` - display: flex; - align-items: center; - gap: 12px; -`; - -const Button = styled.button<{ disabled: boolean }>` - width: 56px; - height: 56px; - border-radius: 50%; - border: 1px solid #ccc; - background-color: ${props => (props.disabled ? 'rgba(255,255,255,0.7)' : 'white')}; - color: black; - opacity: ${props => (props.disabled ? '0.5' : '1')}; - font-size: 32px; - cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; - display: flex; - align-items: center; - justify-content: center; - - @media (max-width: 640px) { - height: 42px; - width: 42px; - } -`; diff --git a/src/components/founder-sale/NFTButton.tsx b/src/components/founder-sale/NFTButton.tsx deleted file mode 100644 index 2ed30fe..0000000 --- a/src/components/founder-sale/NFTButton.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { motion } from 'framer-motion'; -import styled from 'styled-components'; - -import { colors } from 'theme'; -import { transition, transformVariant } from 'constants/motionConfig'; - -interface Props { - value: number; -} - -export const NFTButton = ({ value }: Props) => ( - openPaymentWindow(value)} - > - {`Buy ${value} Fida Founder’s NFT (${countAda(value)} ADA)`} - -); - -const GradientButton = styled(motion.button)` - margin-bottom: 40px; - border: 1px solid ${colors.blue}; - background: ${colors.backgroundGradient}; - color: white; - font-size: 18px; - font-weight: 700; - padding: 10px 20px; - cursor: pointer; - border-radius: 24px; - outline: none; - height: 60px; - width: 365px; - transition: 0.5s; - - &:hover { - opacity: 0.8; - } - - &:focus { - outline: none; - } - - &:active { - opacity: 0.8; - } - - @media (max-width: 840px) { - width: 90%; - font-size: 16px; - } -`; - -const countAda = (count: number) => (count * 500) - ((count - 1) * 50); - -const openPaymentWindow = (value: number) => { - const paymentUrl = `https://pay.nmkr.io/?p=1fe458e78a46451fb812b36ab3fa6f82&c=${value}`; - - const popupWidth = 500; - const popupHeight = 700; - - const wtop = window.top ?? { outerWidth: 400, outerHeight: 400, screenX: 800, screenY: 800 }; - const left = wtop.outerWidth / 2 + wtop.screenX - (popupWidth / 2); - const top = wtop.outerHeight / 2 + wtop.screenY - (popupHeight / 2); - - const popup = window.open(paymentUrl, 'NFT-MAKER PRO Payment Gateway', `popup=1, location=1, width=${popupWidth}, height=${popupHeight}, left=${left}, top=${top}`); - - document.body.style.cssText = 'background: rgba(0, 0, 0, 0.5)'; - - const backgroundCheck = setInterval(() => { - if (popup?.closed) { - clearInterval(backgroundCheck); - // eslint-disable-next-line no-console - console.log('Popup closed'); - - document.body.style.cssText = ''; - } - }, 1000); -}; diff --git a/src/components/founder-sale/NFTDetails.tsx b/src/components/founder-sale/NFTDetails.tsx deleted file mode 100644 index 6efd95f..0000000 --- a/src/components/founder-sale/NFTDetails.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import styled from 'styled-components'; -import { colors } from 'theme'; - -import star from 'assets/images/nft-infos/star.svg'; -import resources from 'assets/images/nft-infos/resources.svg'; -import light from 'assets/images/nft-infos/light.svg'; -import { motion } from 'framer-motion'; - -import { transition, transformVariant } from 'constants/motionConfig'; - -interface InfoProps { - title: string; - description: string; - src: string; -} - -const Details: InfoProps[] = [ - { - title: 'Exclusive Fida Benefits', - description: 'The Fida Founders NFT Collection is designed to offer a suite of benefits that enhance your experience and potential returns within the Fida ecosystem.', - src: star - }, - { - title: 'Tangible NFT Advantages', - description: 'From early access and first-choice policies to fee discounts and beyond, these NFTs provide tangible advantages that can significantly impact your engagement and success.', - src: resources - }, - { - title: 'Invest in Innovation', - description: 'By investing in a Fida Founders NFT, you are not only acquiring a unique digital asset but also contributing to the growth of the most innovative platforms in decentralized insurance.', - src: light - }, -]; - -export const NFTDetails = () => ( - - {Details.map(info => ( - - {info.title} - {info.title} - {info.description} - - ))} - -); - -const DetailsContainer = styled.div` - width: 90%; - display: flex; - flex-direction: row; - justify-content: space-evenly; - margin-top: 40px; - gap: 0; - - @media (max-width: 840px) { - flex-direction: column; - gap: 48px; - } -`; - -const InformationBox = styled(motion.div)` - display: flex; - flex-direction: column; - gap: 24px; - justify-content: start; - align-items: center -`; - -const InformationTitle = styled.p` - font-size: 24px; - text-align: center; - color: white; - font-weight: 700 -`; - -const InformationDescription = styled.p` - font-size: 18px; - text-align: center; - color: ${colors.textTertiary600}; - font-weight: 500 -`; diff --git a/src/components/founder-sale/NFTSlider.tsx b/src/components/founder-sale/NFTSlider.tsx deleted file mode 100644 index 4f7fe81..0000000 --- a/src/components/founder-sale/NFTSlider.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react'; -import { useMediaQuery } from 'react-responsive'; - -import 'swiper/css'; -import 'swiper/css/effect-coverflow'; -import 'swiper/css/navigation'; - -import './styles.css'; - -import { EffectCoverflow, Navigation } from 'swiper/modules'; -import styled from 'styled-components'; - -import nft1 from 'assets/images/nft-cards/nft-1.svg'; -import nft2 from 'assets/images/nft-cards/nft-2.svg'; -import nft3 from 'assets/images/nft-cards/nft-3.svg'; -import nft4 from 'assets/images/nft-cards/nft-4.svg'; -import nft5 from 'assets/images/nft-cards/nft-5.svg'; -import nft6 from 'assets/images/nft-cards/nft-6.svg'; -import nft7 from 'assets/images/nft-cards/nft-7.svg'; - -import { maxWidth640 } from 'components/rwd/detectMobile'; - -export const NFTSlider = () => { - const isMobile = useMediaQuery({ - query: maxWidth640, - }); - - return ( - - - {nfts.map((nft, index) => ( - // eslint-disable-next-line react/no-array-index-key - - nft - - ))} - - - ); -}; - -const NFTSliderContainer = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 100%; - padding: 0; - - @media (max-width: 840px) { - padding: 0; - } -`; - -const nfts = [nft1, nft2, nft3, nft4, nft5, nft6, nft7, nft1, nft2, nft3, nft4, nft5, nft6, nft7, nft1, nft2, nft3, nft4, nft5, nft6, nft7, nft1, nft2, nft3, nft4, nft5, nft6, nft7, nft1, nft2, nft3, nft4, nft5, nft6, nft7, nft1, nft2, nft3, nft4, nft5, nft6, nft7]; diff --git a/src/components/founder-sale/modal/FounderModal.tsx b/src/components/founder-sale/modal/FounderModal.tsx deleted file mode 100644 index f8df626..0000000 --- a/src/components/founder-sale/modal/FounderModal.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import Backdrop from '@mui/material/Backdrop'; -import Modal from '@mui/material/Modal'; -import Fade from '@mui/material/Fade'; -import styled from 'styled-components'; -import { FounderModalContent } from './FounderModalContent'; - -interface Props { - isOpen: boolean; - handleClose: () => void; -} - -export const FounderModal = ({ isOpen, handleClose }: Props) => ( -
- { if (reason !== 'backdropClick') handleClose(); }} - closeAfterTransition - sx={{ - '.MuiBackdrop-root': { - backdropFilter: 'blur(4px)' - } - }} - slots={{ backdrop: Backdrop }} - slotProps={{ - backdrop: { - timeout: 500, - }, - }} - > - - - - X - - - -
-); - -const Container = styled.div` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - max-width: 861px; - height: 70%; - min-height: 690px; - overflow: auto; - background-color: white; - border: 1px solid #000; - box-shadow: 24; - padding: 16px; - outline: none; - border-radius: 24px; - - @media (max-width: 1900px) and (max-height: 1037px) { - height: 90%; - } - - @media (min-height: 1037px) { - height: 70%; - } - - @media (min-height: 1400px) { - height: 40%; - } - - @media (max-width: 860px) { - max-width: 100%; - } - `; - -const CloseButton = styled.button` - position: absolute; - top: 30px; - right: 30px; - display: flex; - justify-content: center; - align-items: center; - width: 56px; - height: 56px; - border-radius: 100%; - border: none; - outline: none; - background-color: rgba(255,255,255,0.2); - color: white; - font-size: 18px; - z-index: 10; - cursor: pointer; - backdrop-filter: blur(8px); - - @media (max-width: 860px) { - width: 40px; - height: 40px; - } -`; diff --git a/src/components/founder-sale/modal/FounderModalContent.tsx b/src/components/founder-sale/modal/FounderModalContent.tsx deleted file mode 100644 index 42211b8..0000000 --- a/src/components/founder-sale/modal/FounderModalContent.tsx +++ /dev/null @@ -1,200 +0,0 @@ -import { Swiper, SwiperSlide } from 'swiper/react'; -import { useEffect, useState } from 'react'; - -import 'swiper/css'; -import 'swiper/css/pagination'; - -import './styles.css'; - -import { Pagination, Navigation } from 'swiper/modules'; -import styled from 'styled-components'; -import { Swiper as SwiperCore } from 'swiper/types'; - -import { useMediaQuery } from 'react-responsive'; -import { maxWidth640 } from 'components/rwd/detectMobile'; - -import cover1 from '../../../assets/images/nft-modal/cover-1.png'; -import cover1mobile from '../../../assets/images/nft-modal/cover-1-mobile.png'; -import cover2 from '../../../assets/images/nft-modal/cover-2.png'; -import cover2mobile from '../../../assets/images/nft-modal/cover-2-mobile.png'; -import cover3 from '../../../assets/images/nft-modal/cover-3.png'; -import cover3mobile from '../../../assets/images/nft-modal/cover-3-mobile.png'; -import cover4 from '../../../assets/images/nft-modal/cover-4.png'; -import cover4mobile from '../../../assets/images/nft-modal/cover-4-mobile.png'; -import cover5 from '../../../assets/images/nft-modal/cover-5.png'; -import cover5mobile from '../../../assets/images/nft-modal/cover-5-mobile.png'; - -interface Steps { - title: string; - description: string; - src: string; -} - -const steps = (isMobile: boolean): Steps[] => ([ - { - title: 'Benefits of the Fida Founders NFT Collection', - description: 'The Fida Founders NFT Collection offers a range of exclusive benefits that set it apart from other NFT collections. This collection is not just about digital art, or the historic introduction of global decentralized insurance, but a utility token within the Fida ecosystem. Here are the benefits we\'re currently planning for the token', - src: isMobile ? cover1mobile : cover1 - }, - { - title: 'Early Access to the Fida System', - description: 'As a holder of the Fida Founders NFT, you will be invited to the private testnet. This early access allows you to familiarize yourself with the platform, navigate its features, and most importantly influence its development through feature requests and user experience suggestions.', - src: isMobile ? cover2mobile : cover2 - }, - { - title: 'First Choice of Policies', - description: 'As an investor possessing a Fida Founders NFT will grant you access to an initial early commitment round to each policy brought onboard. This priority access means you can optimize your portfolio, with the risk profile and diversification that best suits your investment strategy. Early selection can be crucial in ensuring your proportion of the most desirable policies, especially those that might be limited in availability or have particularly favorable conditions.', - src: isMobile ? cover3mobile : cover3 - }, - { - title: 'Priority Listings', - description: 'As an insurer or broker holding a Fida Founders NFT your policies will be highlighted as founder\'s policy. In a competitive environment where other brokers are competing for investment a founding member\'s tag can significantly impact outcomes, raising the odds of getting your policy filled and offering a substantial edge.', - src: isMobile ? cover4mobile : cover4 - }, - { - title: 'Fee Discounts', - description: 'One of the certain advantages of the Fida Founders NFT is the entitlement to fee discounts. Listing fees, trading fees, and other charges within the Fida ecosystem will be discounted to holders of the Fida Founders Collection. As an NFT holder, you benefit from reduced fees, allowing you to trade effectively, and potentially increase your net gains. This financial incentive is designed to reward early supporters and encourage continued engagement with the platform.', - src: isMobile ? cover5mobile : cover5 - }, -]); - -export const FounderModalContent = () => { - const isMobile = useMediaQuery({ - query: maxWidth640, - }); - - const [activeIndex, setActiveIndex] = useState(0); - const [swiperInstance, setSwiperInstance] = useState(null); // Swiper instance state - - useEffect(() => { - const bullets = document.querySelectorAll('.swiper-pagination-bullet'); - bullets.forEach((bullet, index) => { - if (index < activeIndex) { - bullet.classList.add('swiper-pagination-bullet-past'); - } else { - bullet.classList.remove('swiper-pagination-bullet-past'); - } - }); - }, [activeIndex]); - - const pagination = { - clickable: true, - renderBullet(index: number, className: string) { - const bulletClass = index < activeIndex ? 'swiper-pagination-bullet-past' : ''; - return `${index + 1}`; - }, - }; - - const handleNextSlide = () => { - if (swiperInstance && activeIndex < steps(isMobile).length - 1) { - swiperInstance.slideNext(); - } else if (swiperInstance && activeIndex === steps(isMobile).length - 1) { - swiperInstance.slideTo(0); - } - }; - - return ( - setActiveIndex(swiper.activeIndex)} - onSwiper={setSwiperInstance} // Store the Swiper instance - > - {steps(isMobile).map(step => ( - - - {step.title} - - {step.title} - {step.description} - - - {`Learn more (${activeIndex + 1}/${steps(isMobile).length}) →`} - - - - ))} - - ); -}; - -const SliderContainer = styled.div` - display: flex; - flex-direction: column; - gap: 24px; -`; - -const TextContainer = styled.div` - display: flex; - flex-direction: column; - gap: 24px; -`; - -const SliderTitle = styled.p` - font-weight: 700; - font-size: 36px; - line-height: 44px; - color: black; - - @media (max-width: 640px) { - font-size: 24px; - line-height: 32px; - } -`; - -const SliderDescription = styled.p` - font-weight: 500; - font-size: 18px; - line-height: 28px; - color: black; - text-align: center; - padding: 0 68px; - - @media (max-width: 815px) { - font-size: 16px; - line-height: 24px; - padding: 0 24px; - }; - - @media (max-width: 640px) { - font-size: 14px; - line-height: 20px; - padding: 0 0; - }; - - @media (max-width: 375px) { - font-size: 12px; - line-height: 18px; - } -`; - -const LearnButton = styled.button` - position: absolute; - bottom: 52px; - left: 50%; - transform: translateX(-50%); - border: none; - outline: none; - background: none; - cursor: pointer; - font-weight: 500; - font-size: 18px; - line-height: 28px; - color: gray; - text-align: center; - - @media (max-width: 375px) { - font-size: 12px; - line-height: 18px; - bottom: 38px; - }; - - @media (max-width: 830px) { - font-size: 14px; - line-height: 20px; - bottom: 42px; - } -`; diff --git a/src/components/founder-sale/modal/styles.css b/src/components/founder-sale/modal/styles.css deleted file mode 100644 index c65c8d4..0000000 --- a/src/components/founder-sale/modal/styles.css +++ /dev/null @@ -1,132 +0,0 @@ -.modal-swiper.swiper { - width: 100%; - height: 100%; - border: none; - outline: none; - } - - .modal-swiper .swiper-slide { - text-align: center; - font-size: 18px; - background: #fff; - border: none; - outline: none; - - /* Center slide text vertically */ - display: flex; - justify-content: center; - align-items: start; - } - - .modal-swiper .swiper-slide img { - display: block; - width: 100%; - max-width: 829px; - height: 324px; - object-fit: cover; - border-radius: 24px; - } - - .modal-swiper .swiper-pagination-bullet { - width: 64px; - height: 16px; - text-align: center; - color: transparent; - opacity: 1; - border-radius: 99px; - background: #E6E6E6; - } - - .modal-swiper .swiper-pagination-bullet-active { - color: transparent; - background: #D33681; - } - - .modal-swiper .swiper-pagination-bullet-past { - color: transparent; - background: #D33681; - opacity: 0.3; - } - - .modal-swiper .swiper-button-next, .modal-swiper .swiper-button-prev { - border-radius: 100%; - background-color: transparent; - border: 1px solid rgba(0, 0, 0, 0.2); - color: #323232; - width: 42px; - height: 42px; - top: auto; - bottom: 0; - z-index: 30; - } - - .modal-swiper .swiper-button-next { - right: 22%; - } - - .modal-swiper .swiper-button-prev { - left: 22%; - } - - .modal-swiper .swiper-button-next::after, .modal-swiper .swiper-button-prev::after { - scale: 0.4; - } - - .modal-swiper .swiper-button-disabled { - visibility: hidden; - } - - @media (max-width: 830px) { - .modal-swiper .swiper-button-next { - right: 14%; - } - - .modal-swiper .swiper-button-prev { - left: 14%; - } -} - - @media (max-width: 640px) { - .modal-swiper .swiper-pagination-bullet { - width: 16px; - height: 16px; - } - - .modal-swiper .swiper-button-next, .modal-swiper .swiper-button-prev { - width: 26px; - height: 26px; - bottom: 8px; - } - - .modal-swiper .swiper-button-next::after, .modal-swiper .swiper-button-prev::after { - scale: 0.2; - } - - .modal-swiper .swiper-button-next { - right: 32%; - } - - .modal-swiper .swiper-button-prev { - left: 32%; - } -} - -@media (max-width: 560px) { - .modal-swiper .swiper-button-next { - right: 28%; - } - - .modal-swiper .swiper-button-prev { - left: 28%; - } -} - -@media (max-width: 450px) { - .modal-swiper .swiper-button-next { - right: 22%; - } - - .modal-swiper .swiper-button-prev { - left: 22%; - } -} diff --git a/src/components/founder-sale/styles.css b/src/components/founder-sale/styles.css deleted file mode 100644 index 3bbdf76..0000000 --- a/src/components/founder-sale/styles.css +++ /dev/null @@ -1,66 +0,0 @@ -.nft-slider.swiper { - width: 100%; - } - - .nft-slider .swiper-slide { - background-position: center; - background-size: cover; - width: initial; - height: initial; - filter: brightness(20%); - } - - .nft-slider .swiper-slide.swiper-slide-visible { - filter: brightness(50%) - } - .nft-slider .swiper-slide.swiper-slide-visible.swiper-slide-prev, .nft-slider .swiper-slide.swiper-slide-visible.swiper-slide-next { - filter: brightness(80%) - } - - .nft-slider .swiper-slide.swiper-slide-visible.swiper-slide-active { - filter: brightness(100%) - } - - .nft-slider .swiper-slide img { - display: block; - width: 100%; - } - - .nft-slider .swiper-button-next, .nft-slider .swiper-button-prev { - border-radius: 100%; - background-color: white; - color: #323232; - width: 56px; - height: 56px; - } - - .nft-slider .swiper-button-next { - right: 40px; - } - - .nft-slider .swiper-button-prev { - left: 40px; - } - - .nft-slider .swiper-button-next::after, .nft-slider .swiper-button-prev::after { - scale: 0.4; - } - - @media (max-width: 840px) { - .nft-slider .swiper-button-next, .nft-slider .swiper-button-prev { - width: 24px; - height: 24px; - } - - .nft-slider .swiper-button-next::after, .nft-slider .swiper-button-prev::after { - scale: 0.2; - } - - .nft-slider .swiper-button-next { - right: 10px; - } - - .nft-slider .swiper-button-prev { - left: 10px; - } - } \ No newline at end of file