-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' into feature/news-0922
- Loading branch information
Showing
35 changed files
with
509 additions
and
272 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
|---|---|---|
| @@ -1,22 +1,22 @@ | ||
| import Image from 'next/image'; | ||
| import React from 'react'; | ||
| import {useTranslation} from 'next-i18next'; | ||
| import Link from 'next/link'; | ||
|
|
||
| type TranslateFunction = (s: string) => string; | ||
|
|
||
| const AppDowloadContainer = () => { | ||
| const {t}: {t: TranslateFunction} = useTranslation('common'); | ||
|
|
||
| // const containerDescription = `container mx-auto flex items-center md:flex-row flex-col`; | ||
| const desktopVersionBreakpoint = 'hidden lg:flex'; | ||
| const mobileVersionBreakpoint = 'flex lg:hidden'; | ||
|
|
||
| return ( | ||
| <> | ||
| {/* Desktop */} | ||
| {/* Info: Desktop (20230922 - Shirley) */} | ||
| <div className={`${desktopVersionBreakpoint}`}> | ||
| <section className={`bg-black py-24`}> | ||
| <h1 className="flex shrink-0 items-center justify-center py-20 px-2 text-lg font-bold text-white sm:text-2xl md:px-20 md:text-3xl lg:text-4xl xl:text-6xl"> | ||
| <section className={`bg-black`}> | ||
| <h1 className="flex shrink-0 items-center justify-center pb-20 px-2 text-lg font-bold text-white sm:text-2xl md:px-20 md:text-3xl lg:text-4xl xl:text-6xl"> | ||
| {t('HOME_PAGE.APP_DOWLOAD_CONTAINER_TITLE')} | ||
| <span className="text-cyan-400"> | ||
| {t('HOME_PAGE.APP_DOWLOAD_CONTAINER_TITLE_HIGHLIGHT')} | ||
|
|
@@ -25,7 +25,7 @@ const AppDowloadContainer = () => { | |
| {t('HOME_PAGE.APP_DOWLOAD_CONTAINER_TITLE_2')} | ||
| </h1> | ||
|
|
||
| <div className="mx-auto flex flex-wrap items-center space-y-2 pb-24 md:flex-row"> | ||
| <div className="mx-auto flex flex-wrap items-center space-y-2 md:flex-row"> | ||
| <div className="mx-auto mb-10 max-w-md md:mb-0 md:w-1/2 lg:max-w-sm 2xl:ml-1/8"> | ||
| <div className="flex justify-center"> | ||
| <Image | ||
|
|
@@ -38,23 +38,23 @@ const AppDowloadContainer = () => { | |
| </div> | ||
|
|
||
| <div className="mx-auto mt-10 flex shrink-0 flex-wrap items-center justify-center sm:space-x-4 md:ml-auto md:mr-0"> | ||
| <button type="button" className="hover:opacity-80"> | ||
| <Link target="_blank" href="/coming-soon" className="hover:opacity-80"> | ||
| <Image | ||
| src="/elements/[email protected]" | ||
| width={120} | ||
| height={40} | ||
| alt="app-store" | ||
| /> | ||
| </button> | ||
| </Link> | ||
|
|
||
| <button type="button" className="hover:opacity-80"> | ||
| <Link target="_blank" href="/coming-soon" className="hover:opacity-80"> | ||
| <Image | ||
| src={'/elements/[email protected]'} | ||
| width={155} | ||
| height={40} | ||
| alt="google play" | ||
| /> | ||
| </button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| <div className="mx-auto flex w-full flex-col flex-wrap items-center justify-center pt-20 pl-1/10 md:w-3/5 lg:pl-0 lg:pt-0"> | ||
|
|
@@ -70,7 +70,7 @@ const AppDowloadContainer = () => { | |
| </section> | ||
| </div> | ||
|
|
||
| {/* Mobile */} | ||
| {/* Info: Mobile (20230922 - Shirley) */} | ||
| <div className={`${mobileVersionBreakpoint}`}> | ||
| <section className={`bg-black`}> | ||
| <div className="flex shrink-0 flex-col items-center justify-center space-y-2 px-2 pt-0 pb-10 text-2xl font-bold text-white sm:space-y-5 sm:text-3xl md:px-20 md:pb-20 md:text-4xl"> | ||
|
|
@@ -83,7 +83,7 @@ const AppDowloadContainer = () => { | |
| <div>{t('HOME_PAGE.APP_DOWLOAD_CONTAINER_TITLE_2')}</div> | ||
| </div> | ||
|
|
||
| <div className="mx-auto flex flex-wrap items-center space-y-2 pb-24 md:flex-row"> | ||
| <div className="mx-auto flex flex-wrap items-center space-y-2 md:flex-row"> | ||
| <div className="mx-auto flex w-4/5 flex-col flex-wrap items-center justify-center py-5 pl-1/10 md:w-4/5"> | ||
| <Image | ||
| className="flex justify-center rounded object-contain" | ||
|
|
@@ -95,7 +95,6 @@ const AppDowloadContainer = () => { | |
| </div> | ||
|
|
||
| <div className="mx-auto mb-10 max-w-md md:mb-0 md:w-1/2 lg:max-w-sm 2xl:ml-1/8"> | ||
| {/* QR Code Size Automatic Toggle */} | ||
| <div className="hidden justify-center md:flex"> | ||
| <Image | ||
| className="rounded object-cover object-center" | ||
|
|
@@ -117,23 +116,23 @@ const AppDowloadContainer = () => { | |
| </div> | ||
|
|
||
| <div className="mx-auto mt-5 flex shrink-0 flex-wrap items-center justify-center space-x-3 sm:mt-10 sm:space-x-4 md:ml-auto md:mr-0"> | ||
| <button type="button" className="hover:opacity-80"> | ||
| <Link target="_blank" href="/coming-soon" className="hover:opacity-80"> | ||
| <Image | ||
| src="/elements/[email protected]" | ||
| width={134} | ||
| height={40} | ||
| alt="app-store" | ||
| /> | ||
| </button> | ||
| </Link> | ||
|
|
||
| <button type="button" className="hover:opacity-80"> | ||
| <Link target="_blank" href="/coming-soon" className="hover:opacity-80"> | ||
| <Image | ||
| src={'/elements/[email protected]'} | ||
| width={135} | ||
| height={40} | ||
| alt="google play" | ||
| /> | ||
| </button> | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
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 |
|---|---|---|
|
|
@@ -3,23 +3,27 @@ import React from 'react'; | |
| import {useTranslation} from 'next-i18next'; | ||
| import {useGlobal} from '../../contexts/global_context'; | ||
| import {LayoutAssertion} from '../../constants/layout_assertion'; | ||
| import useCheckLink from '../../lib/hooks/use_check_link'; | ||
| import {I_SUN_ONE_LINK} from '../../constants/config'; | ||
|
|
||
| type TranslateFunction = (s: string) => string; | ||
|
|
||
| const Banner = () => { | ||
| const {t}: {t: TranslateFunction} = useTranslation('common'); | ||
|
|
||
| const {layoutAssertion} = useGlobal(); | ||
| const iSunOneIconSize = layoutAssertion === LayoutAssertion.MOBILE ? 35 : 50; | ||
| const shrink = 0.7; | ||
|
|
||
| const iSunOneLink = useCheckLink(I_SUN_ONE_LINK, I_SUN_ONE_LINK); | ||
|
|
||
| return ( | ||
| <> | ||
| <div className=""> | ||
| <section className="w-full"> | ||
| <div | ||
| className="w-screen flex flex-col items-start pt-5 xl:pt-20 lg:pt-10 pl-1/4 md:pl-2/5 xl:pl-1/2 bg-center bg-no-repeat bg-cover" | ||
| className="hidden w-screen lg:flex flex-col items-start pt-5 xl:pt-20 lg:pt-10 pl-1/4 md:pl-2/5 xl:pl-1/2 bg-iSunOneBg bg-center bg-no-repeat bg-cover" | ||
| style={{ | ||
| backgroundImage: 'url(/elements/[email protected])', | ||
| height: `${layoutAssertion === LayoutAssertion.MOBILE ? '200px' : '356px'}`, | ||
| }} | ||
| > | ||
|
|
@@ -33,7 +37,7 @@ const Banner = () => { | |
| <div className="pt-5 lg:pt-12 group"> | ||
| <a | ||
| className="flex text-center items-center tracking-wider" | ||
| href="https://www.isun1.com/" | ||
| href={iSunOneLink} | ||
| target="_blank" | ||
| > | ||
| <Image | ||
|
|
@@ -76,6 +80,65 @@ const Banner = () => { | |
| </a> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="relative h-120vh md:h-200vh w-screen flex items-center justify-center lg:hidden bg-center bg-no-repeat bg-iSunOneBgMobile bg-contain"> | ||
| <div className="flex flex-col mb-250px xs:mb-2/3 sm:mb-2/3 items-center w-full z-20"> | ||
| <p className="text-white text-2xl xs:text-3xl sm:text-4xl font-bold tracking-normal"> | ||
| {t('HOME_PAGE.ISUNONE_PROMOTION_TITLE_1')}{' '} | ||
| <span className="text-lightGreen6">USDT</span> | ||
| <span className="mx-2">&</span> | ||
| <span className="text-lightBlue mr-2">USDC</span> | ||
| {t('HOME_PAGE.ISUNONE_PROMOTION_TITLE_2')} | ||
| </p> | ||
| <div className="pt-5 sm:pt-12 group"> | ||
| <a | ||
| className="flex text-center items-center tracking-wider" | ||
| href={iSunOneLink} | ||
| target="_blank" | ||
| > | ||
| <Image | ||
| src={`/elements/isunone_logo.svg`} | ||
| width={iSunOneIconSize} | ||
| height={iSunOneIconSize} | ||
| alt="isunone logo" | ||
| /> | ||
| <p className="ml-3 mr-2 text-white text-base xs:text-2xl sm:text-3xl font-bold group-hover:text-lightYellow3 transition-all duration-300"> | ||
| {t('HOME_PAGE.ISUNONE_PROMOTION_DESCRIPTION')} | ||
| </p> | ||
| <div className=""> | ||
| <div className=""> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width={iSunOneIconSize * shrink} | ||
| height={iSunOneIconSize * shrink} | ||
| fill="none" | ||
| viewBox="0 0 30 31" | ||
| className="transition-transform duration-300 group-hover:translate-x-2" | ||
| > | ||
| <g clipPath="url(#clip0_9_1330)"> | ||
| <g> | ||
| <path | ||
| className="fill-current text-white group-hover:text-yellow-400 transition-colors duration-300" | ||
| d="M25.896 16.357a1.875 1.875 0 000-2.65l-7.07-7.074a1.875 1.875 0 10-2.652 2.652l3.87 3.872H5.625a1.875 1.875 0 100 3.75h14.419l-3.87 3.87a1.875 1.875 0 002.652 2.652l7.07-7.072z" | ||
| ></path> | ||
| </g> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_9_1330"> | ||
| <path | ||
| fill="#fff" | ||
| d="M0 0H30V30H0z" | ||
| transform="rotate(90 14.984 15.016)" | ||
| ></path> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </> | ||
|
|
||
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
Oops, something went wrong.