adding pricing section to the landing page + few fixes in product section

Author: Ojas13-git

public/enterprise-hover.svg

@@ -0,0 +1,10 @@
+import Pricing from '@/views/landing-page/Pricing'
+import React from 'react'
+
+const pricing = () => {
+  return (
+    <Pricing/>
+  )
+}
+
+export default pricing

public/enterprise.svg

@@ -72,3 +72,13 @@ body
 .User_Operations_table td
   padding: 10px !important  
 
+.bg-normal 
+    background-image: url('/no-hover.svg')
+    background-size: cover
+    background-position: center
+
+
+.hover\:bg-hover:hover 
+    background-image: url('/hover.svg')
+    background-size: cover
+    background-position: center

public/hover.svg

@@ -57,7 +57,9 @@ const Navbar = () => {
                             "
                     >
                         <Link href='https://dashboard.jiffyscan.xyz/'>
+                        <button>
                         View API Key
+                        </button>
                         </Link>
                     </button>
                     <button
@@ -66,7 +68,7 @@ const Navbar = () => {
                         md:block
                         hidden
                             text-[#6C47FF] 
-                            bg-[#d1c7f8] 
+                            bg-[#DCD4FF] 
                             hover:bg-blue-800 
                             focus:ring-4 
                             focus:outline-none 
@@ -90,7 +92,9 @@ const Navbar = () => {
                             "
                     >
                         <Link href='https://dashboard.jiffyscan.xyz/'>
+                        <button>
                         Explorer
+                        </button>
                         </Link>
                     </button>
 
@@ -168,11 +172,13 @@ const Navbar = () => {
                             )}
                         </li>
                         <li>
-                            <a
+                            <Link
                                 href="https://jiffyscan.mintlify.app/welcome"
                                 className="flex py-2 px-3 text-[#5A5A62] rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                             >
+                                <button>
                                 Docs
+                                </button>
                                 <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path
                                         d="M4.5 7.5C6.9375 7.5 8 6.4745 8 4C8 6.4745 9.055 7.5 11.5 7.5C9.055 7.5 8 8.555 8 11C8 8.555 6.9375 7.5 4.5 7.5ZM1.5 3.25C3.067 3.25 3.75 2.591 3.75 1C3.75 2.591 4.4285 3.25 6 3.25C4.4285 3.25 3.75 3.9285 3.75 5.5C3.75 3.9285 3.067 3.25 1.5 3.25Z"
@@ -182,22 +188,26 @@ const Navbar = () => {
                                         stroke-linejoin="round"
                                     />
                                 </svg>
-                            </a>
+                            </Link>
                         </li>
                         <li>
                             <a
                                 href="#"
                                 className="block py-2 px-3 text-[#5A5A62] rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                             >
+                                <button>
                                 Stories
+                                </button>
                             </a>
                         </li>
                         <li>
                             <Link
                                 href="/pricing"
                                 className="block py-2 px-3 text-[#5A5A62] rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
                             >
+                                <button>
                                 Pricing
+                                </button>
                             </Link>
                         </li>
                         <button
@@ -239,7 +249,7 @@ const Navbar = () => {
                         md:hidden
                         block
                             text-[#6C47FF] 
-                            bg-[#d1c7f8] 
+                            bg-[#DCD4FF] 
                             hover:bg-blue-800 
                             focus:ring-4 
                             focus:outline-none 

public/no-hover.svg

@@ -0,0 +1,18 @@
+import React from 'react';
+import Navbar from './Navbar';
+import Footer from './Footer';
+import PricingSection from './components/PricingSection';
+
+const Pricing = () => {
+  return (
+    <div>
+        <Navbar/>
+        <div className="pt-20 bg-cover bg-transparent" style={{ backgroundImage: "url('/pricingbg.svg')" }}>
+        <PricingSection/>
+        </div>
+        <Footer/>
+    </div>
+  )
+}
+
+export default Pricing

public/pricingbg.svg

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 
 
 const DiagonalArrowIcon = () => (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 ml-2 hidden md:block">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 ml-2 sm:block md:block">
         <path d="M5 19L19 5M19 5H9M19 5V15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
 );