fonts and link

Nanasark · Jun 5, 2023 · 050c187 · 050c187 · vercel · Jun 5, 2023
1 parent 35ec9a7
commit 050c187
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "react-scroll": "^1.8.9",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/index.css b/src/index.css
@@ -2,15 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css?family=Aoboshi+One');
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans');
+
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: IBM Plex Sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.header{
+  font-family: Aoboshi One ,IBM Plex Sans, -apple-system;
+}
 
 
 code {
@@ -20,10 +27,3 @@ code {
 
 
 
-#child{
-    width: 100%;
-    height: 100%;
-    overflow-y: scroll;
-    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
-    box-sizing: content-box; /* So the width will be 100% + 17px */
-}
diff --git a/src/landingcomps/About.jsx b/src/landingcomps/About.jsx
@@ -16,15 +16,15 @@ const About = (props) => {
   ];
 
   return (
-    <div className="w-screen overflow-hidden bg-[#181D0C] lg:h-[900px] md:h-[2300px] xsm:h-[1700px] gap-5 text-white flex xsm:flex-col items-center justify-center">
-      <h1 className="text-[#F4DDB6] leading-[72px] lg:text-[63px] xl:text-[72px] md:text-[60px] xsm:text-[32px]  drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]">What is Kryptorena</h1>
+    <div id="about" className="w-screen overflow-hidden bg-[#181D0C] lg:h-[900px] md:h-[2300px] xsm:h-[1700px] gap-5 text-white flex xsm:flex-col items-center justify-center">
+      <h1 className="header text-[#F4DDB6] leading-[72px] md:text-[60px] xsm:text-[32px]  drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]">What is Kryptorena</h1>
       <p className='text-center lg:w-[450px] xsm:w-[300px] md:text-[20px]'>Experience a thrilling NFT-based card game where players can unleash their unique NFT cards against opponents in a fun battle based system.</p>
       <ul className="flex xsm:flex-col lg:flex-row gap-8">
         {titles.map((title, index) => (
           <li key={index} className=" xl:h-[626px] xl:w-[405.33px] xsm:w-[325px] xsm:h-[440px]  lg:w-[300px] lg:h-[450px] md:w-[405.33px] md:h-[626px] flex xsm:flex-col gap-2 justify-center items-center bg-[#191510] ring-1 rounded-[8px] ring-[#F4DDB6] h-[405.33px]">
             <img className='xl:h-[450px] xl:w-[300px] xsm:w-[290px] xsm:h-[300px] lg:h-[280px] lg:w-[250px] md:h-[450px] md:w-[362.16px] rounded-[4px]' src={imgs[index]} alt={`Placeholder ${index + 1}`}  />
             <h2 className='text-[22px] md:text-[24px]'>{title}</h2>
-            <p className= {` ${title === titles[0]? "xl:w-[300px]":""}xl:w-[357.33px] xl:h-[48px] leading-[24px] lg:w-[230px] ${title === title2? "xsm:w-[290px] xsm:h-[48px] md:text-[16px] md:w-[357.33px] xsm:text-[14px]" : "xsm:text-[14px]  md:text-[16px] md:w-[357.33px] xsm:w-[280px]"}`}>{texts[index]}</p>
+            <p className= {` ${title === titles[0]? "xl:w-[300px]":""} xl:w-[357.33px] xl:h-[48px] leading-[24px] lg:w-[230px] ${title === title2? "xsm:w-[290px] xsm:h-[48px] md:text-[16px] md:w-[357.33px] xsm:text-[14px]" : "xsm:text-[14px]  md:text-[16px] md:w-[357.33px] xsm:w-[280px]"}`}>{texts[index]}</p>
           </li>
         ))}
       </ul>

diff --git a/src/landingcomps/Faq.jsx b/src/landingcomps/Faq.jsx
@@ -29,8 +29,8 @@ const Faq = (props) => {
   ];
 
   return (
-    <div className="w-screen overflow-hidden xsm:bg-[url('./img/mobfaq.png')] justify-center xl:h-[790px] xl:bg-[url('./img/faqxl.png')] md:bg-[url('./img/faqmd.png')] md:h-[450px] bg-cover max-h-[1200px] min-h-[500px] flex flex-col gap-5 ">
-        <h1 className=" relative lg:text-[48px] xsm:text-[32px] self-stretch lg:text-left lg:left-[70px] lg:w-[380px] text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]">Frequently Asked Questions</h1>
+    <div id="faq" className="w-screen overflow-hidden xsm:bg-[url('./img/mobfaq.png')] justify-center xl:h-[790px] xl:bg-[url('./img/faqxl.png')] md:bg-[url('./img/faqmd.png')] md:h-[450px] bg-cover max-h-[1200px] min-h-[500px] flex flex-col gap-5 ">
+        <h1 className=" header relative lg:text-[48px] xsm:text-[32px] self-stretch lg:text-left lg:left-[70px] lg:w-[380px] text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]">Frequently Asked Questions</h1>
       <div className=" flex justify-center items-center relative md:top-[50px]">
       <ul className="xsm:text-[24px] text-white  divide-[#DFC28E] lg:w-[900px] xl:w-[1212px] divide-y-[1px] justify-center items-center ">
         {questions.map((question, index) => (

diff --git a/src/landingcomps/Footer.jsx b/src/landingcomps/Footer.jsx
@@ -3,7 +3,7 @@ import Content from '../img/Content.png'
 
 const Footer = () => {
   return (
-    <div className=" w-screen overflow-hidden flex items-center justify-center bg-black ">
+    <div id="footer" className=" w-screen overflow-hidden flex items-center justify-center bg-black ">
         <div className="xsm:h-[300PX] md:h-[210px]  divide-y-[1px] gap-7 md:w-[800px] divide-[#A8916B] flex flex-col">
         <div className="divide-y-[1px]">
                 <ul className="xsm:flex  md:gap-8 md:flex-row text-[20px] relative top-3 xsm:flex-col justify-center items-center text-[#FCF7ED]">

diff --git a/src/landingcomps/Fray.jsx b/src/landingcomps/Fray.jsx
@@ -2,10 +2,10 @@ import React from 'react'
 
 const Fray = () => {
   return (
-    <div className="w-screen overflow-hidden xsm:bg-[url('./img/fray.png')] lg:bg-[url('./img/fraylg.png')] md:bg-[url('./img/fraymd.png')] bg-cover  h-[438px] flex flex-col gap-5 justify-center items-center">
-        <h1 className='className=" relative lg:text-[48px] xsm:text-[32px] self-stretch text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]'>Enter the fray</h1>
+    <div id="fray" className="w-screen overflow-hidden xsm:bg-[url('./img/fray.png')] lg:bg-[url('./img/fraylg.png')] md:bg-[url('./img/fraymd.png')] bg-cover  h-[438px] flex flex-col gap-5 justify-center items-center">
+        <h1 className='header relative lg:text-[48px] xsm:text-[32px] self-stretch text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]'>Enter the fray</h1>
         <p className='text-white lg:text-[18px] '> Fantasy is create</p>
-        <button className='bg-[#514633] ring-1 ring-[#BBA278] rounded-[8px] text-white xsm:left-[80px] xsm:w-[140px] xsm:h-[40px]' > Play Game</button>
+        <button className='bg-[#514633] header ring-1 ring-[#BBA278] rounded-[8px] text-[#DFC28E] xsm:left-[80px] xsm:w-[140px] xsm:h-[40px]' > Play Game</button>
     </div>
   )
 }

diff --git a/src/landingcomps/Hero.jsx b/src/landingcomps/Hero.jsx
@@ -2,10 +2,10 @@ import React from 'react'
 
 const Hero = () => {
   return (
-    <div className="w-screen  border-t-2 border-[#DFC28E] border-b-2  flex flex-col gap-10 xl:gap-2 items-center justify-center lg:h-[600px] md:h-[1133px] xl:h-[900px] xl:bg-[url('./img/heroxl.png')] lg:bg-[url('./img/herolg.png')] md:bg-[url('./img/hero2.png')] xsm:bg-[url('./img/hero1.png')] xsm:bg-cover   lg:bg-cover h-[800px] ">
-      <h1 className='xl:h-[48px] xsm:w-[399px] xsm:font-600  md:text-[48px] text-[30px] xsm:
+    <div id="hero" className="w-screen header border-t-2 border-[#DFC28E] border-b-2  flex flex-col gap-10 xl:gap-2 items-center justify-center lg:h-[600px] md:h-[1133px] xl:h-[900px] xl:bg-[url('./img/heroxl.png')] lg:bg-[url('./img/herolg.png')] md:bg-[url('./img/hero2.png')] xsm:bg-[url('./img/hero1.png')] xsm:bg-cover   lg:bg-cover h-[800px] ">
+      <h1 className='header xl:h-[48px] xsm:w-[399px] xsm:font-600  md:text-[48px] text-[30px] xsm:
       h-[15px] text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]'>Kryptorena</h1>  
-      <h1 className='xl:h-[60px] xsm:w-[399px] xsm:font-600 text-white xl:w-[768px] md:text-[60px] text-[40px] md:h-[160px] xsm:h-[96px]'>Collect, Battle, Upgrade</h1>
+      <h1 className='header xl:h-[60px] xsm:w-[399px] xsm:font-600 text-white xl:w-[768px] md:text-[60px] text-[40px] md:h-[160px] xsm:h-[96px]'>Collect, Battle, Upgrade</h1>
 
       <button className='bg-[#302D27] xl:top-10 ring-1 text-[24px] xl:h-[64px] xl:w-[176px] ring-[#BBA278] rounded-[8px] text-[#DFC28E] relative xsm:w-[140px] xsm:h-[40px] md:w-[160px] md:h-[50px]' > Play Game</button>
     </div>

diff --git a/src/landingcomps/How.jsx b/src/landingcomps/How.jsx
@@ -7,9 +7,9 @@ import Icemage from '../img/icemage.png'
 
 const How = () => {
   return (
-    <div className='xsm:h-[1820px] lg:h-[700px] w-screen overflow-hidden  bg-[#181D0C] flex flex-col gap-5'>
+    <div id="how" className='xsm:h-[1820px] lg:h-[700px] w-screen overflow-hidden  bg-[#181D0C] flex flex-col gap-5'>
 
-      <h1 className=" relative lg:text-[48px] xsm:text-[42px] lg:mt-[30px] md:text-[72px] self-stretch text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]">How it works</h1>
+      <h1 className=" relative lg:text-[48px] xsm:text-[42px] lg:mt-[30px] md:text-[72px] header self-stretch text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]">How it works</h1>
       <div className="flex lg:flex-row xsm:flex-col gap-10 justify-center items-center text-white"> 
         <div className='flex xsm:flex-col items-center gap-20 '>
           <div className='flex xsm:flex-col justify-items-center items-center'>

diff --git a/src/landingcomps/Nav.jsx b/src/landingcomps/Nav.jsx
@@ -1,22 +1,24 @@
 import React from 'react'
+import { Link as ScrollLink } from 'react-scroll';
 import content from '../img/Content.png'
 
 const Nav = () => {
   return (
-    <div className=" w-screen overflow-hidden relative md:text-[24px] xsm:h-[70px] backdrop-blur-[12px]  bg-black flex items-center justify center">
+    <div className=" header w-screen overflow-hidden relative md:text-[24px] xsm:h-[70px] backdrop-blur-[12px]  bg-black flex items-center justify center">
         <img src={content} alt={content} className="xsm:h-[24px] xsm:w-[48px] relative md:left-[30px] xsm:left-3"></img>
         <h1 className="xsm:left-5 lg:hidden relative text-white md:left-[40px] ">Kryptorena</h1>
         <div className="xsm:invisible lg:visible lg:relative lg:left-[60px]">
           <ul className=' text-[16px] text-[#F4DDB6] flex gap-5 xl:gap-5'>
-            <li>What is Kryptorena</li>
-            <li>How it Works</li>
-            <li>Technology</li>
-            <li>Our Team</li>
-            <li>FAQ</li>
+            <li><ScrollLink to="about" smooth={true} duration={500}>What is Kryptorena</ScrollLink></li>
+            <li><ScrollLink to="how" smooth={true} duration={500}>How it Works</ScrollLink></li>
+            <li><ScrollLink to="tech" smooth={true} duration={500}>Technology</ScrollLink></li>
+            <li><ScrollLink to="team" smooth={true} duration={500}>Our Team</ScrollLink></li>
+            <li><ScrollLink to="faq" smooth={true} duration={500}>FAQ</ScrollLink></li>
+
           </ul>
         </div>
 
-        <button className='bg-[#514633] lg:left-[300px] md:left-[445px] xl:left-[580px] ring-1 ring-[#BBA278] rounded-[8px] text-white relative xsm:left-[80px] xsm:w-[140px] xsm:h-[40px]' > Play Game</button>
+        <button href="#hero" className='bg-[#514633] lg:left-[300px] md:left-[445px] text-[16px] xl:left-[580px] ring-1 ring-[#BBA278] rounded-[8px] text-[#DFC28E] relative xsm:left-[80px] w-[137px] h-[47px]' > Play Game</button>
 
     </div>
   )

diff --git a/src/landingcomps/Team.jsx b/src/landingcomps/Team.jsx
@@ -6,8 +6,8 @@ import Twitter from '../img/twitter.png'
 
 const Team = () => {
   return (
-    <div className="bg-[#181D0C] w-screen overflow-hidden h-[2800px] xl:h-[1500px] lg:h-[1900px] md:h-[2900px] flex gap-5 flex-col items-center justify-center">
-      <h1 className=" relative  top-[20px] md:text-[48px] xsm:text-[32px] self-stretch text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]"> Our Team</h1>
+    <div id="team" className="bg-[#181D0C] w-screen overflow-hidden h-[2800px] xl:h-[1500px] lg:h-[1900px] md:h-[2900px] flex gap-5 flex-col items-center justify-center">
+      <h1 className=" relative  top-[20px] md:text-[48px] xsm:text-[32px] header self-stretch text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]"> Our Team</h1>
       <p className='md:text-[24px] xsm:text-[18px] text-white'>We're a global team made up of individuals from around the world!</p>
       <div className="flex flex-col lg:flex-row xl:flex-col lg:gap-10 gap-3 items-center justify-center">
           <div className="flex xl:flex-row xl:left-[35px] relative flex-col gap-3 lg:gap-5 items-center justify-center">

diff --git a/src/landingcomps/Tech.jsx b/src/landingcomps/Tech.jsx
@@ -8,8 +8,8 @@ import Sea from '../img/sea.png'
 
 const Tech = () => {
   return (
-    <div className=" xl:flex-row xl:gap-[120px] xl:items-center overflow-hidden w-screen xl:justify-center md:h-[950px] xl:h-[631.67px] h-[900px] lg:h-[600px] xl:bg-[url('./img/techxl.png')] xsm:bg-[url('./img/techmob1.png')] lg:bg-[url('./img/techlg.png')] lg:gap-0 lg:space-x-[-10px] bg-cover xsm:flex-col flex items-center gap-6 justify-center">
-      <div>  <h1 className=" relative lg:top-[-30px] xl:top-0 items-center justify-center md:text-[48px] xsm:text-[32px] self-stretch text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]">Technologies Used</h1>
+    <div id="tech" className=" xl:flex-row xl:gap-[120px] xl:items-center overflow-hidden w-screen xl:justify-center md:h-[950px] xl:h-[631.67px] h-[900px] lg:h-[600px] xl:bg-[url('./img/techxl.png')] xsm:bg-[url('./img/techmob1.png')] lg:bg-[url('./img/techlg.png')] lg:gap-0 lg:space-x-[-10px] bg-cover xsm:flex-col flex items-center gap-6 justify-center">
+      <div>  <h1 className=" header relative lg:top-[-30px] xl:top-0 items-center justify-center md:text-[48px] xsm:text-[32px] self-stretch text-[#F4DDB6] drop-shadow-[0_4px_16px_rgba(228,172,78,0.6)]">Technologies Used</h1>
  </div>
 
       <div className = "flex xsm:flex-col gap-5 lg:flex-row">