diff --git a/client/contexts/PathnameContext.tsx b/client/contexts/PathnameContext.tsx new file mode 100644 index 0000000..79ce852 --- /dev/null +++ b/client/contexts/PathnameContext.tsx @@ -0,0 +1,32 @@ +import { createContext, useContext, ReactNode } from "react"; + +interface PathnameContextType { + pathname: string; +} + +const PathnameContext = createContext(null); + +export function usePathnameContext() { + const context = useContext(PathnameContext); + if (!context) { + throw new Error( + "usePathnameContext must be used within a PathnameProvider" + ); + } + return context; +} + +interface PathnameProviderProps { + children: ReactNode; + pathname: string; // Ajout de la prop pathname +} + +export function PathnameProvider({ children, pathname }: PathnameProviderProps) { + return ( + + {children} + + ); +} + +export default PathnameContext; diff --git a/client/next.config.js b/client/next.config.js index 767719f..bf58d00 100644 --- a/client/next.config.js +++ b/client/next.config.js @@ -1,4 +1,15 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {} - -module.exports = nextConfig +const nextConfig = { + async redirects() { + return [ + { + source: '/', + destination: '/home', + permanent: true, + }, + ]; + }, + } + + module.exports = nextConfig; + \ No newline at end of file diff --git a/client/public/Assets/fonts/Modak-Regular.ttf b/client/public/Assets/fonts/Modak-Regular.ttf new file mode 100644 index 0000000..c9203a7 Binary files /dev/null and b/client/public/Assets/fonts/Modak-Regular.ttf differ diff --git a/client/public/Assets/fonts/OFL.txt b/client/public/Assets/fonts/OFL.txt new file mode 100644 index 0000000..061cfc2 --- /dev/null +++ b/client/public/Assets/fonts/OFL.txt @@ -0,0 +1,93 @@ +Copyright (c) 2015 Ek Type (www.ektype.in) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/client/src/brick.svg b/client/public/Assets/image/brick.svg similarity index 100% rename from client/src/brick.svg rename to client/public/Assets/image/brick.svg diff --git a/client/public/Assets/image/degen-kong-logo.svg b/client/public/Assets/image/degen-kong-logo.svg new file mode 100644 index 0000000..5ec2ec5 --- /dev/null +++ b/client/public/Assets/image/degen-kong-logo.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/Assets/image/degen-kong-watermark-title.svg b/client/public/Assets/image/degen-kong-watermark-title.svg new file mode 100644 index 0000000..3538404 --- /dev/null +++ b/client/public/Assets/image/degen-kong-watermark-title.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/public/Assets/image/degenkong-watermark.svg b/client/public/Assets/image/degenkong-watermark.svg new file mode 100644 index 0000000..effcbcd --- /dev/null +++ b/client/public/Assets/image/degenkong-watermark.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/Assets/image/discord-logo.svg b/client/public/Assets/image/discord-logo.svg new file mode 100644 index 0000000..6cb5e14 --- /dev/null +++ b/client/public/Assets/image/discord-logo.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/client/public/Assets/image/hand-inferior.svg b/client/public/Assets/image/hand-inferior.svg new file mode 100644 index 0000000..30edf12 --- /dev/null +++ b/client/public/Assets/image/hand-inferior.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/public/Assets/image/hand-superior.svg b/client/public/Assets/image/hand-superior.svg new file mode 100644 index 0000000..74903f7 --- /dev/null +++ b/client/public/Assets/image/hand-superior.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/client/public/Assets/image/hyperscape-logo.svg b/client/public/Assets/image/hyperscape-logo.svg new file mode 100644 index 0000000..a2a9edc --- /dev/null +++ b/client/public/Assets/image/hyperscape-logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/client/public/Assets/image/mouth-degen_kong.svg b/client/public/Assets/image/mouth-degen_kong.svg new file mode 100644 index 0000000..385474a --- /dev/null +++ b/client/public/Assets/image/mouth-degen_kong.svg @@ -0,0 +1,189 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/public/Assets/image/socials-button.svg b/client/public/Assets/image/socials-button.svg new file mode 100644 index 0000000..d35e81c --- /dev/null +++ b/client/public/Assets/image/socials-button.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/client/public/Assets/image/twitter-logo.svg b/client/public/Assets/image/twitter-logo.svg new file mode 100644 index 0000000..85a3d1a --- /dev/null +++ b/client/public/Assets/image/twitter-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/client/src/app/globals.css b/client/src/app/globals.css index 11b9fc3..74fce2c 100644 --- a/client/src/app/globals.css +++ b/client/src/app/globals.css @@ -1,3 +1,10 @@ +@font-face { + font-family: "modak"; + src: url("../../public/Assets/fonts/Modak-Regular.ttf") format("truetype"); +} +:root { + --Brown: #5b2b13; +} * { box-sizing: border-box; padding: 0; @@ -10,16 +17,23 @@ body { overflow-x: hidden; padding: 0; margin: 0; + background: #ffedd1; } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); + width: 100vw; + display: flex; + justify-content: center; +} +.page_container { + max-width: 1352px; + width: 100%; + position: relative; +} +.socials_container { + position: absolute; + right: 0; + padding-top: 40px; } button { background: none; @@ -40,3 +54,18 @@ a { color: inherit; text-decoration: none; } +.page_error_size{ + display: none; +} +@media (max-width: 1400px) { + .page_container{ + display: none; + } + .page_error_size{ + display: flex; + font-size: 20px; + height: 100vh; + align-items: center; + font-weight: 600; + } +} \ No newline at end of file diff --git a/client/src/app/home/page.tsx b/client/src/app/home/page.tsx new file mode 100644 index 0000000..0ac9bc7 --- /dev/null +++ b/client/src/app/home/page.tsx @@ -0,0 +1,14 @@ +import Image from "next/image"; +import WatermarkTitle from "../../../public/Assets/image/degen-kong-watermark-title.svg"; +import degenKongLogo from "../../../public/Assets/image/degen-kong-logo.svg" +import styles from "../../styles/home.module.css"; +export default function Home() { + return ( + <> +
+ watermark logo + watermark title +
+ + ); +} diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx index adf6449..45e3f0f 100644 --- a/client/src/app/layout.tsx +++ b/client/src/app/layout.tsx @@ -1,22 +1,33 @@ -import type { Metadata } from 'next' -import { Inter } from 'next/font/google' -import './globals.css' - -const inter = Inter({ subsets: ['latin'] }) +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; +import Navbar from "../components/Navbar.jsx"; +import ButtonSocials from "../components/buttons/ButtonSocials.jsx"; +// import { PathnameProvider } from "../../contexts/PathnameContext"; +const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: 'DegenKong', - description: 'DegenKong Solana NFT Staking NFT Collection', -} + title: "DegenKong", + description: "DegenKong Solana NFT Staking NFT Collection", +}; export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { return ( - {children} + +
+ +
+ +
+ {children} +
+
Go on a bigger screen.
+ - ) + ); } diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx deleted file mode 100644 index aeaaaf8..0000000 --- a/client/src/app/page.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import Link from "next/link"; - -export default function Home() { - return ( - <> - Degenkong - Rarity page - - ); -} diff --git a/client/src/app/rarity/page.tsx b/client/src/app/rarity/page.tsx index 7dc987d..d1266d6 100644 --- a/client/src/app/rarity/page.tsx +++ b/client/src/app/rarity/page.tsx @@ -1,13 +1,15 @@ import Button from "@/components/Button.jsx"; import React from "react"; - +import styles from "../../styles/page-rarity.module.css"; async function page() { return ( -
- rarity page -
); } -export default page; \ No newline at end of file +export default page; diff --git a/client/src/app/roadmap/page.tsx b/client/src/app/roadmap/page.tsx new file mode 100644 index 0000000..af35ec6 --- /dev/null +++ b/client/src/app/roadmap/page.tsx @@ -0,0 +1,7 @@ +import React from "react"; + +function page() { + return <>Roadmap; +} + +export default page; diff --git a/client/src/app/stake/page.tsx b/client/src/app/stake/page.tsx new file mode 100644 index 0000000..84e8f00 --- /dev/null +++ b/client/src/app/stake/page.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import Image from "next/image"; +import degenKongWatermark from "../../../public/Assets/image/degenkong-watermark.svg"; +function page() { + return ( + <> + Stake + degen kong long background + + ); +} + +export default page; diff --git a/client/src/components/Button.jsx b/client/src/components/Button.jsx deleted file mode 100644 index 4ab2e99..0000000 --- a/client/src/components/Button.jsx +++ /dev/null @@ -1,44 +0,0 @@ -"use client"; -import React, { useState, useRef } from "react"; -import styles from "../styles/button.module.css"; -import { Player, Controls } from "@lottiefiles/react-lottie-player"; -// import { Player, Controls } from ""; -function Button() { - const playerRef = useRef(null); - const animationURL = - "https://lottie.host/d8cee625-f798-4df1-8582-f29be98c468b/gxwZrVrtQB.json"; - function handleClickButton() { - if (playerRef.current) { - playerRef.current.setSeeker(0); // Set the frame to the start - playerRef.current.play(); - } - // fetch("https://jsonplaceholder.typicode.com/todos/1") - // .then((response) => response.json()) - // .then((json) => console.log(json)); - // setIsClick(true); - } - - return ( - - ); -} - -export default Button; diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx new file mode 100644 index 0000000..5f556e1 --- /dev/null +++ b/client/src/components/Navbar.jsx @@ -0,0 +1,48 @@ +"use client"; +import React, { useState } from "react"; +import Button from "./buttons/Button.jsx"; +import styles from "../styles/navbar.module.css"; +import degenKongLogo from "../../public/Assets/image/degen-kong-logo.svg"; +import Image from "next/image.js"; +import { usePathname } from "next/navigation"; +function Navbar() { + const [activeButton, setActiveButton] = useState(null); + const [isWalletConnected, setIsWalletConnected] = useState(false); + const buttonsName = ["home", "stake", "roadmap", "rarity"]; + const pathname = usePathname(); + let pathnameString = pathname.replace("/", ""); + function handleConnectWalletClick() { + setIsWalletConnected(!isWalletConnected); + } + const handleButtonClick = (buttonName) => { + setActiveButton(buttonName); + // handleConnectWalletClick(buttonName); + }; + return ( +
+
+ degen kong logo +
+ {buttonsName.map((buttonName, i) => ( +
+
+
+
+
+ ); +} + +export default Navbar; diff --git a/client/src/components/buttons/Button.jsx b/client/src/components/buttons/Button.jsx new file mode 100644 index 0000000..65885cb --- /dev/null +++ b/client/src/components/buttons/Button.jsx @@ -0,0 +1,75 @@ +"use client"; +import React, { useState, useRef, useEffect } from "react"; +import styles from "../../styles/button.module.css"; +import Link from "next/link"; +import KongHand from "../lottie/KongHand"; +import KongMouth from "../lottie/KongMouth"; +import ButtonAnimation from "../../components/lottie/ButtonAnimation"; +import {handleAnimationComplete as handleAnimationCompleteUtil } from "../../utils/lottieAnimationComplete" +function Button({ text, isSelected, onClick, isWalletConnected }) { + const [showNextButton, setShowNextButton] = useState(false); + const [displayConnectWalletButton, setDisplayConnectWalletButton] = + useState(false); + const playerRef = useRef(null); + // const pathname = usePathname(); + const buttonAnimationURL = + "https://lottie.host/d8cee625-f798-4df1-8582-f29be98c468b/gxwZrVrtQB.json"; + function handleClickButton() { + onClick(); + if (isSelected && playerRef.current) { + playerRef.current.setSeeker(0); // Set the frame to the start + playerRef.current.play(); + } + } + + const handleAnimationComplete = handleAnimationCompleteUtil(setShowNextButton); + useEffect(() => { + if (text === "connect wallet") { + setDisplayConnectWalletButton(true); + } + }, []); + return ( + + + + ); +} + +export default Button; diff --git a/client/src/components/buttons/ButtonSocials.jsx b/client/src/components/buttons/ButtonSocials.jsx new file mode 100644 index 0000000..3b9213b --- /dev/null +++ b/client/src/components/buttons/ButtonSocials.jsx @@ -0,0 +1,93 @@ +"use client"; +import React, { useRef, useState, useEffect } from "react"; +import ButtonAnimation from "../../components/lottie/ButtonAnimation"; +import styles from "../../styles/button-socials.module.css"; +import Image from "next/image"; +import twitterLogo from "../../../public/Assets/image/twitter-logo.svg"; +import discordLogo from "../../../public/Assets/image/discord-logo.svg"; +import hyperspaceLogo from "../../../public/Assets/image/hyperscape-logo.svg"; +import { handleAnimationComplete as handleAnimationCompleteUtil } from "@/utils/lottieAnimationComplete"; +import Link from "next/link"; +function ButtonSocials() { + const [showNextButton, setShowNextButton] = useState(false); + const [isLogoRotating, setIsLogoRotating] = useState({ + twitter: false, + discord: false, + hyperspace: false, + }); + const [refs, setRefs] = useState([]); + const socialsButtonPlayerRef = useRef(null); + const handleAnimationComplete = + handleAnimationCompleteUtil(setShowNextButton); + const socialsButtonURL = + "https://lottie.host/eced15b8-a0bd-4e88-9f93-98909e267a82/CPGfoHv4cq.json"; + const socialMedia = [ + { + name: "twitter", + logo: twitterLogo, + }, + { + name: "discord", + logo: discordLogo, + }, + { + name: "hyperspace", + logo: hyperspaceLogo, + }, + ]; + // function handleClickButton(i) { + // const ref = refs[i]; + // if (ref && ref.current) { + // ref.current.setSeeker(0); + // ref.current.play(); + // } + // } + const toggleLogoRotation = (socialName) => { + setIsLogoRotating((prev) => ({ + ...prev, + [socialName]: !prev[socialName], + })); + }; + function handleSocialsLinks(social) { + if (social.name === "twitter") { + return "https://twitter.com"; + } else if (social.name === "discord") { + return "https://discord.com"; + } else if (social.name) { + return "https://hyperspace.xyz"; + } + } + return ( + <> + {socialMedia.map((social, i) => ( + +
toggleLogoRotation(social.name)} + > + +
+ {`${social.name} +
+
+ + ))} + + ); +} + +export default ButtonSocials; diff --git a/client/src/components/lottie/ButtonAnimation.jsx b/client/src/components/lottie/ButtonAnimation.jsx new file mode 100644 index 0000000..1f68789 --- /dev/null +++ b/client/src/components/lottie/ButtonAnimation.jsx @@ -0,0 +1,40 @@ +"use client"; +import React from "react"; +import { Player, Controls } from "@lottiefiles/react-lottie-player"; + +function ButtonAnimation({ + playerRef, + buttonAnimationURL, + displayConnectWalletButton, + handleAnimationComplete, + buttonSocials, +}) { + return ( + <> + + + + + ); +} + +export default ButtonAnimation; diff --git a/client/src/components/lottie/KongHand.jsx b/client/src/components/lottie/KongHand.jsx new file mode 100644 index 0000000..001a767 --- /dev/null +++ b/client/src/components/lottie/KongHand.jsx @@ -0,0 +1,68 @@ +import React, { useRef } from "react"; +import styles from "../../styles/lottie/kong-hand.module.css"; +import { Player, Controls } from "@lottiefiles/react-lottie-player"; +function KongHand({ isWalletConnected }) { + const playerRefKongHand = useRef(null); + const buttonSuperiorHandURL = + "https://lottie.host/f6468161-88cb-49c5-9865-b4ea43ad2e93/qDQIVRiM7o.json"; + const buttonInferiorHandURL = + "https://lottie.host/52050add-59bc-4241-a702-5509d780ea80/DVKC0R61un.json"; + return ( + <> +
+ + + +
+
+ + + +
+ + ); +} + +export default KongHand; diff --git a/client/src/components/lottie/KongMouth.jsx b/client/src/components/lottie/KongMouth.jsx new file mode 100644 index 0000000..f74b01d --- /dev/null +++ b/client/src/components/lottie/KongMouth.jsx @@ -0,0 +1,30 @@ +import React, { useRef } from "react"; +import { Player, Controls } from "@lottiefiles/react-lottie-player"; +import styles from "../../styles/lottie/kong-mouth.module.css"; +function KongMouth() { + const playerRefKongMouth = useRef(null); + const mouthKongURL = + "https://lottie.host/10b35cf8-df27-4904-a0b6-7f28ea5ba4f5/ALRDNyO0QH.json"; + return ( +
+ + + +
+ ); +} + +export default KongMouth; diff --git a/client/src/styles/button-socials.module.css b/client/src/styles/button-socials.module.css new file mode 100644 index 0000000..39850ec --- /dev/null +++ b/client/src/styles/button-socials.module.css @@ -0,0 +1,40 @@ +.button_socials_container { + cursor: pointer; + position: relative; + width: 41.72px; + height: 48.46px; + margin-bottom: 20px; +} +.button_socials_container:hover { + transition-duration: 300ms; + opacity: 0.7; +} +.button_socials_logo { + z-index: 3; + /* width: 32.72px; */ + /* height: 37.46px; */ + position: absolute; + top: 20%; + left: 15%; + /* background-color: red; */ + user-select: none; + /* animation: rotate 0.5s ease-out; */ +} +.button_socials_logo img { + width: 22px; + height: 22px; +} +.rotate { + animation: rotate 0.3s ease-out; +} +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 80% { + transform: rotate(440deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/client/src/styles/button.module.css b/client/src/styles/button.module.css index 5294c98..26dd9f5 100644 --- a/client/src/styles/button.module.css +++ b/client/src/styles/button.module.css @@ -1,4 +1,59 @@ -.button_container svg{ - /* background-color: red; */ - cursor: pointer; -} \ No newline at end of file +.button_container { + position: relative; + /* margin-top: 40px; */ + /* margin-left: 50px; */ + user-select: none; +} +.button_text { + position: absolute; + width: 124.97px; + height: 46.06px; + /* background-color: red; */ + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + font-family: "modak"; + font-size: 19.55px; + color: var(--Brown); + text-decoration: underline; + /* opacity: 0; */ + animation: slideLeft ease-out 0.5s; + /* animation-delay: 500ms; */ + text-transform: uppercase; +} +.button_text_connect_wallet { + position: absolute; + width: 144.38843px; + height: 54.81818px; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + font-family: "modak"; + font-size: 17.036px; + color: var(--Brown); + animation: slideLeft ease-out 0.5s; + text-transform: uppercase; + /* background-color: red; */ +} +.button_mouth_kong { + position: absolute; + top: -35px; + width: 144.97px; + z-index: 3; +} +@keyframes slideLeft { + 0% { + opacity: 0; + transform: translateX(-100px); + } + 80% { + opacity: 1; + transform: translateX(20px); + } + 100% { + opacity: 1; + transform: translateX(0px); + } +} diff --git a/client/src/styles/home.module.css b/client/src/styles/home.module.css new file mode 100644 index 0000000..68e4ae7 --- /dev/null +++ b/client/src/styles/home.module.css @@ -0,0 +1,11 @@ +.page_container { + /* background-color: red; */ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: calc(100vh - 155px); +} +.page_container img { + user-select: none; +} diff --git a/client/src/styles/lottie/kong-hand.module.css b/client/src/styles/lottie/kong-hand.module.css new file mode 100644 index 0000000..f3e8fc5 --- /dev/null +++ b/client/src/styles/lottie/kong-hand.module.css @@ -0,0 +1,26 @@ +.kong_hand_superior { + position: absolute; + top: -18px; + width: 124.97px; + z-index: 3; +} +.kong_hand_inferior { + position: absolute; + bottom: -9px; + right: 45px; + /* width: 124.97px; */ + z-index: 3; +} +.kong_hand_superior_wallet_connected { + position: absolute; + top: -21px; + width: 144.97px; + z-index: 3; +} +.kong_hand_inferior_wallet_connected { + position: absolute; + bottom: -10px; + right: 50px; + /* width: 124.97px; */ + z-index: 3; +} diff --git a/client/src/styles/lottie/kong-mouth.module.css b/client/src/styles/lottie/kong-mouth.module.css new file mode 100644 index 0000000..ce7e132 --- /dev/null +++ b/client/src/styles/lottie/kong-mouth.module.css @@ -0,0 +1,6 @@ +.kong_mouth { + position: absolute; + top: -35px; + width: 144.97px; + z-index: 3; +} diff --git a/client/src/styles/navbar.module.css b/client/src/styles/navbar.module.css new file mode 100644 index 0000000..716cfe2 --- /dev/null +++ b/client/src/styles/navbar.module.css @@ -0,0 +1,19 @@ +.navbar_container { + width: 100%; + height: 155px; + display: flex; + align-items: center; + justify-content: center; +} +.navbar_wrap { + display: flex; + align-items: center; + justify-content: space-between; + max-width: 1352px; + width: 100%; +} +.navbar_buttons_navigate_container { + width: 767px; + display: flex; + justify-content: space-between; +} diff --git a/client/src/styles/page-rarity.module.css b/client/src/styles/page-rarity.module.css new file mode 100644 index 0000000..5d37fdd --- /dev/null +++ b/client/src/styles/page-rarity.module.css @@ -0,0 +1,3 @@ +/* .page_container { + min-height: 100vh; +} */ diff --git a/client/src/utils/lottieAnimationComplete.js b/client/src/utils/lottieAnimationComplete.js new file mode 100644 index 0000000..c13b3e1 --- /dev/null +++ b/client/src/utils/lottieAnimationComplete.js @@ -0,0 +1,9 @@ +// utils/lottieAnimationComplete.js +export function handleAnimationComplete(setShowNextButton) { + return (e) => { + if (e === "complete") { + setShowNextButton(true); + } + }; + } + \ No newline at end of file diff --git a/client/tsconfig.json b/client/tsconfig.json index d618f60..f7051bb 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -22,6 +22,6 @@ "@/*": ["./src/*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/components/Button.jsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/components/buttons/Button.jsx", "src/components/Navbar.jsx"], "exclude": ["node_modules"] }