Merge pull request #46 from hollow-leaf/feat/web-ui

feat: Web UI Modification

apps/web/src/App.tsx

@@ -20,12 +20,12 @@ export default function App() {
 
         <div className={`bg-primary ${styles.paddingX} ${styles.flexCenter}`}>
           <div className={`${styles.boxWidth}`}>
-            <Stats />
+            {/* <Stats /> */}
             <Business />
-            <Billing />
-            <CardDeal />
+            {/* <Billing /> */}
+            {/* <CardDeal /> */}
             <Testimonials />
-            <Clients />
+            {/* <Clients /> */}
             <CTA />
             <Footer />
           </div>

apps/web/src/assets/index.ts

@@ -6,7 +6,7 @@ import coinbase from "./coinbase.png"
 import dropbox from "./dropbox.png"
 import logo from "./logo.svg"
 import quotes from "./quotes.svg"
-import robot from "./robot.png"
+import streamer from "./streamer.png"
 import send from "./Send.svg"
 import shield from "./Shield.svg"
 import star from "./Star.svg"
@@ -17,12 +17,14 @@ import apple from "./apple.svg"
 import arrowUp from "./arrow-up.svg"
 import discount from "./Discount.svg"
 import facebook from "./facebook.svg"
-import instagram from "./instagram.svg"
+import github from "./github.png"
 import linkedin from "./linkedin.svg"
 import twitter from "./twitter.svg"
 import people01 from "./people01.png"
 import people02 from "./people02.png"
 import people03 from "./people03.png"
+import people04 from "./people04.png"
+import people05 from "./people05.png"
 import background from './background.png'
 
 export {
@@ -34,7 +36,7 @@ export {
   dropbox,
   logo,
   quotes,
-  robot,
+  streamer,
   send,
   shield,
   star,
@@ -45,11 +47,13 @@ export {
   arrowUp,
   discount,
   facebook,
-  instagram,
+  github,
   linkedin,
   twitter,
   people01,
   people02,
   people03,
+  people04,
+  people05,
   background,
 }

apps/web/src/components/Business.tsx

@@ -3,6 +3,7 @@ import {featureTypes} from '../models/type/ui.type'
 import { features } from '../constants'
 import styles, { layout } from '../style'
 import Button from './Button'
+import { Link } from 'react-router-dom'
 
 export function FeatureCard(props: featureTypes) {
   return (
@@ -27,19 +28,20 @@ export default function Business() {
     <section id='features' className={layout.section}>
       <div className={layout.sectionInfo}>
         <h2 className={styles.heading2}>
-          You do the business, <br className='sm:block hidden' /> we’ll handle
-          the money.
+          We make live stream donating simple.
         </h2>
-        <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        {/* <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
           With the right credit card, you can improve your financial life by
           building credit, earning rewards and saving money. But with hundreds
           of credit cards on the market.
-        </p>
+        </p> */}
 
-        <Button styles={`mt-10`} />
+        <Link to="/launch">
+          <Button styles={`mt-10`} />
+        </Link>
       </div>
 
-      <div className={`${layout.sectionImg} flex-col`}>
+      <div className={`${layout.sectionImg} flex-col items-left`}>
         {features.map((feature, index) => (
           <FeatureCard key={feature.id} {...feature} index={index} />
         ))}

apps/web/src/components/CTA.tsx

@@ -1,20 +1,23 @@
 import React from 'react'
 import styles from '../style'
 import Button from './Button'
+import { Link } from 'react-router-dom'
 
 export default function CTA() {
   return (
     <section className={`${styles.flexCenter} ${styles.marginY} ${styles.padding} sm:flex-row flex-col bg-black-gradient-2 rounded-[20px] box-shadow`}>
       <div className='flex-1 flex flex-col'>
         <h2 className={styles.heading2}>Let’s try our service now!</h2>
-        <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
+        {/* <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
           Everything you need to accept card payments and grow your business
           anywhere on the planet.
-        </p>
+        </p> */}
       </div>
 
       <div className={`${styles.flexCenter} sm:ml-10 ml-0 sm:mt-0 mt-10`}>
-        <Button />
+        <Link to="/launch">
+          <Button/>
+        </Link>
       </div>
     </section>
   )

apps/web/src/components/FeedbackCard.tsx

@@ -1,15 +1,14 @@
 import React from 'react'
-import { quotes } from '../assets'
 import { feedbackTypes } from 'src/models/type/ui.type'
 
 
 export default function FeedbackCard (props: feedbackTypes) {
   return (
     <div className='flex justify-between flex-col px-10 py-12 rounded-[20px]  max-w-[370px] md:mr-10 sm:mr-5 mr-0 my-5 feedback-card'>
-    <img src={quotes} alt='double_quotes' className='w-[42.6px] h-[27.6px] object-contain' />
-    <p className='font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10'>
+    {/* <img src={quotes} alt='double_quotes' className='w-[42.6px] h-[27.6px] object-contain' /> */}
+    {/* <p className='font-poppins font-normal text-[18px] leading-[32.4px] text-white my-10'>
       {props.content}
-    </p>
+    </p> */}
 
     <div className='flex flex-row'>
       <img src={props.img} alt={props.name} className='w-[48px] h-[48px] rounded-full' />

apps/web/src/components/Footer.tsx

@@ -7,19 +7,19 @@ import { footerLinksTypes, socialMediaTypes } from 'src/models/type/ui.type'
 export default function Footer() {
   return (
     <section className={`${styles.flexCenter} ${styles.paddingY} flex-col`}>
-      <div className={`${styles.flexStart} md:flex-row flex-col mb-8 w-full`}>
-        <div className='flex-[1] flex flex-col justify-start mr-10'>
+      <div className={`${styles.flexCenter} md:flex-row flex-col mb-8 w-full`}>
+        <div className='flex flex-col justify-start mr-10 items-center'>
           <img
             src={logo}
-            alt='hoobank'
+            alt='Psyduck'
             className='w-[266px] h-[72.14px] object-contain'
           />
-          <p className={`${styles.paragraph} mt-4 max-w-[312px]`}>
-            A new way to make the payments easy, reliable and secure.
+          <p className={`${styles.paragraph} mt-4`}>
+            A new way to make your donation easy, reliable and secure.
           </p>
         </div>
 
-        <div className='flex-[1.5] w-full flex flex-row justify-between flex-wrap md:mt-0 mt-10'>
+        {/* <div className='flex-[1.5] w-full flex flex-row justify-between flex-wrap md:mt-0 mt-10'>
           {footerLinks.map((footerlink: footerLinksTypes) => (
             <div key={footerlink.title} className={`flex flex-col ss:my-0 my-4 min-w-[150px]`}>
               <h4 className='font-poppins font-medium text-[18px] leading-[27px] text-white'>
@@ -38,12 +38,12 @@ export default function Footer() {
               </ul>
             </div>
           ))}
-        </div>
+        </div> */}
       </div>
 
       <div className='w-full flex justify-between items-center md:flex-row flex-col pt-6 border-t-[1px] border-t-[#3F3E45]'>
         <p className='font-poppins font-normal text-center text-[18px] leading-[27px] text-white'>
-          Copyright Ⓒ 2022 HooBank. All Rights Reserved.
+          Copyright Ⓒ 2024 Psyduck. All Rights Reserved.
         </p>
 
         <div className='flex flex-row md:mt-0 mt-6'>

apps/web/src/components/Hero.tsx

@@ -1,43 +1,42 @@
 import React from 'react'
 import styles from '../style'
-import { discount, robot } from '../assets'
+import { discount, streamer } from '../assets'
 import GetStarted from './GetStarted'
 import { Link } from 'react-router-dom'
 
 export default function Hero() {
   return (
     <section id='home' className={`flex md:flex-row flex-col ${styles.paddingY}`}>
       <div className={`flex-1 ${styles.flexStart} flex-col xl:px-0 sm:px-16 px-6`}>
-        <div className='flex flex-row items-center py-[6px] px-4 bg-discount-gradient rounded-[10px] mb-2'>
+        {/* <div className='flex flex-row items-center py-[6px] px-4 bg-discount-gradient rounded-[10px] mb-2'>
           <img src={discount} alt='discount' className='w-[32px] h-[32px]' />
           <p className={`${styles.paragraph} ml-2`}>
             <span className='text-white'>20%</span> Discount For{' '}
             <span className='text-white'>1 Month</span> Account
           </p>
-        </div>
+        </div> */}
 
         <div className='flex flex-row justify-between items-center w-full'>
           <h1 className='flex-1 font-poppins font-semibold ss:text-[72px] text-[52px] text-white ss:leading-[100.8px] leading-[75px]'>
             The Next <br className='sm:block hidden' />{' '}
-            <span className='text-gradient'>Generation</span>{' '}
+            <span className='text-gradient'>Web3</span>{' '}
           </h1>
           <div className='ss:flex hidden md:mr-4 mr-0'>
             <Link to='/launch'><GetStarted /></Link>
           </div>
         </div>
 
         <h1 className='font-poppins font-semibold ss:text-[68px] text-[52px] text-white ss:leading-[100.8px] leading-[75px] w-full'>
-          Payment Method.
+          Donation Platform.
         </h1>
         <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
-          Our team of experts uses a methodology to identify the credit cards
-          most likely to fit your needs. We examine annual percentage rates,
-          annual fees.
+          Revolutionizing donation culture on live streaming platforms. 
+          Empower streamers to launch ERC-1155 NFTs, enabling viewers to support content creators directly through Web3 wallets.
         </p>
       </div>
 
-      <div className={`flex-1 flex ${styles.flexCenter} md:my-0 my-10 relative`}>
-        <img src={robot} alt='billing' className='w-[100%] h-[100%] relative z-[5]' />
+      <div className={`flex-1 flex ${styles.flexCenter} md:my-1 my-10 relative`}>
+        <img src={streamer} alt='streamer' className='w-[100%] h-[90%] relative z-[6]' />
 
         {/* gradient start */}
         <div className='absolute z-[0] w-[40%] h-[35%] top-0 pink__gradient' />

apps/web/src/components/Navbar.tsx

@@ -2,24 +2,35 @@ import React, { useState } from 'react'
 import { close, logo, menu } from '../assets'
 import { navLinks } from '../constants'
 import { navLinksTypes } from 'src/models/type/ui.type'
+import { useNavigate } from 'react-router-dom'
 
 export default function Navbar() {
 
   const [active, setActive] = useState<string>('Home')
   const [toggle, setToggle] = useState<boolean>(false)
+  const navigate = useNavigate();
+
   return (
     <nav className='w-full flex py-6 justify-between items-center navbar'>
-      <img src={logo} alt='hoobank' className='w-[124px] h-[32px]' />
+      <img src={logo} alt='Psyduck' className='w-[248px] h-[64px]' />
 
       <ul className='list-none sm:flex hidden justify-end items-center flex-1'>
         {navLinks.map((nav: navLinksTypes, index) => (
           <li
             key={nav.id}
             className={`font-poppins font-normal cursor-pointer text-[16px] ${active === nav.title ? 'text-white' : 'text-dimWhite'
               } ${index === navLinks.length - 1 ? 'mr-0' : 'mr-10'}`}
-            onClick={() => setActive(nav.title)}
+              onClick={() => {
+                if (index === 1) {
+                  window.open('https://github.com/hollow-leaf/psyduck', '_blank');
+                } else if (index === 2) {
+                  navigate("/launch");
+                } else {
+                  setActive(nav.title);
+                }
+              }}
           >
-            <a href={`#${nav.id}`}>{nav.title}</a>
+            <a href={index === 0 ? `#${nav.id}` : undefined}>{nav.title}</a>
           </li>
         ))}
       </ul>

apps/web/src/components/Testimonials.tsx

@@ -11,14 +11,13 @@ export default function Testimonials() {
 
       <div className='w-full flex justify-between items-center md:flex-row flex-col sm:mb-16 mb-6 relative z-[1]'>
         <h2 className={styles.heading2}>
-          What People are <br className='sm:block hidden' /> saying about us
+          Our Team
         </h2>
-        <div className='w-full md:mt-0 mt-6'>
+        {/* <div className='w-full md:mt-0 mt-6'>
           <p className={`${styles.paragraph} text-left max-w-[450px]`}>
-            Everything you need to accept card payments and grow your business
-            anywhere on the planet.
+            ...
           </p>
-        </div>
+        </div> */}
       </div>
 
       <div className='flex flex-wrap sm:justify-start justify-center w-full feedback-container relative z-[1]'>