added favicon and title

Author: MarHansen

package-lock.json

@@ -20,6 +20,7 @@
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "^7.44.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
@@ -36,6 +37,7 @@
     "@types/aos": "^3.0.4",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/react-helmet": "^6.1.6",
     "@types/styled-components": "^5.1.26",
     "@types/wavesurfer.js": "^6.0.6",
     "@vitejs/plugin-react": "^3.1.0",

package.json

@@ -15,6 +15,7 @@ import { Label } from '@headlessui/react/dist/components/label/label'
 import Button from '../../components/button'
 import SampleCheckout from '../../components/samples/sample-checkout'
 import { Transition } from '@headlessui/react'
+import { Helmet } from 'react-helmet'
 
 type PaymentProp = {
   img: string
@@ -42,6 +43,11 @@ function Checkout() {
   return (
     <>
       <Navbar />
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>// Checkout</title>
+        <link rel="icon" type="image/x-icon" href="/pic/favicon/favicon.ico" />
+      </Helmet>
       <section className="h-[21rem] bg-[url('/pic/checkout/checkout-header.png')] bg-cover bg-center"></section>
       <Container>
         {' '}

public/pic/favicon/favicon.ico

@@ -6,6 +6,7 @@ import Footer from '../../components/footer'
 import AOS from 'aos'
 import React, { useEffect } from 'react'
 import 'aos/dist/aos.css'
+import { Helmet } from 'react-helmet'
 
 function LandingPage() {
   useEffect(() => {
@@ -16,6 +17,15 @@ function LandingPage() {
     <>
       <main className="">
         <Navbar />
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>TUNEMA</title>
+          <link
+            rel="icon"
+            type="image/x-icon"
+            href="/pic/favicon/favicon.ico"
+          />
+        </Helmet>
         <section className="h-screen overflow-clip flex bg-[url('/pic/landing/landing_1.png')] bg-cover bg-center">
           <Container>
             <div className="h-screen max-w-[50%] flex flex-col justify-center text-white font-body gap-5 md:p-0 p-5">

public/pic/favicon/favicon1.png

@@ -9,11 +9,17 @@ import Sample from '../../components/samples/sample'
 import IconPlay from '../../components/icons/icon-play'
 import DropdownSort from '../../components/dropdown/dropdown-sort'
 import FooterMobile from '../../components/footer-mobile'
+import { Helmet } from 'react-helmet'
 
 function Library() {
   return (
     <>
       <Navbar />
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>// Library</title>
+        <link rel="icon" type="image/x-icon" href="/pic/favicon/favicon.ico" />
+      </Helmet>
       <section className="h-[21rem] bg-[url('/pic/library/library-header.png')] bg-cover bg-center"></section>
       <Container>
         {' '}

src/pages/checkout/checkout.tsx

@@ -6,6 +6,7 @@ import IconGoogle from '../../components/icons/icon-google'
 import IconSoundcloud from '../../components/icons/icon-soundcloud'
 import Navbar from '../../components/Navbar/navbar'
 import { useAuthStore } from '../../store/useAuthStore'
+import { Helmet } from 'react-helmet'
 
 const LoginWith3rdParty = () => (
   <>
@@ -122,6 +123,11 @@ function Login() {
   return (
     <>
       <Navbar />
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>// Login</title>
+        <link rel="icon" type="image/x-icon" href="/pic/favicon/favicon.ico" />
+      </Helmet>
       <main>
         <section className="flex h-full w-full bg-white justify-center">
           <div className="flex md:bg-[url('/pic/login/login.png')] md:w-full md:bg-cover"></div>

src/pages/landing/landing.tsx

@@ -1,11 +1,12 @@
 import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 import Button from '../../components/button'
 import Container from '../../components/container'
 import IconGoogle from '../../components/icons/icon-google'
 import IconSoundcloud from '../../components/icons/icon-soundcloud'
 import Navbar from '../../components/Navbar/navbar'
 import { useAuthStore } from '../../store/useAuthStore'
+import { Helmet } from 'react-helmet'
 
 type RegisterFormData = {
   username: string
@@ -47,6 +48,11 @@ function Register() {
   return (
     <>
       <Navbar />
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>// Register</title>
+        <link rel="icon" type="image/x-icon" href="/pic/favicon/favicon.ico" />
+      </Helmet>
       <main>
         <section className="flex h-full w-full bg-white justify-center">
           <div className="flex md:bg-[url('/pic/login/login.png')] md:w-full md:bg-cover"></div>
@@ -153,9 +159,12 @@ function Register() {
             </form>
             <div className="flex flex-row w-full justify-center pt-5 pb-10 font-medium text-small text-gray-3">
               Already have an account?
-              <u className="indent-1 text-dark-green hover:text-primary-green bg-white">
+              <Link
+                to="/login"
+                className="indent-1 text-dark-green hover:text-primary-green bg-white"
+              >
                 Login
-              </u>
+              </Link>
             </div>
           </Container>
         </section>

src/pages/library/library.tsx

@@ -9,11 +9,17 @@ import Sample from '../../components/samples/sample'
 import SearchBar from '../../components/searchbar'
 import Type from '../../components/type'
 import BuySample from '../../components/samples/buy-sample'
+import { Helmet } from 'react-helmet'
 
 function SampleCart() {
   return (
     <>
       <Navbar />
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>// Sample-Cart</title>
+        <link rel="icon" type="image/x-icon" href="/pic/favicon/favicon.ico" />
+      </Helmet>
       <section className="h-[21rem] bg-[url('/pic/samplecart/samplecart-header.png')] bg-cover bg-center"></section>
       <Container>
         {' '}