test

Author: zzzzshawn

apps/web/public/assets/card_bg.png

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Pricing = () => {
+  return (
+    <main className="w-full min-h-screen flex items-center justify-center">
+      <div className="h-[400px] w-[300px] border border-dashed border-border-primary">
+
+      </div>
+    </main>
+  )
+}
+
+export default Pricing

apps/web/src/app/(main)/pricing/page.tsx

@@ -14,58 +14,55 @@ const Navbar = () => {
         setShowNavbar(latest > 0)
     })
 
+    const links = [
+        { name: 'Pricing', href: '/pricing' },
+        { name: 'Features', href: '#features' },
+        { name: 'Demo', href: '#demo' },
+        { name: 'How it works', href: '#HIW' },
+        { name: 'Stats', href: '#Stats' },
+        { name: 'Contact', href: '#Contact' },
+    ]
+
     return (
-      <motion.nav
-        initial={{ opacity: 0 }}
-        animate={showNavbar ? { opacity: 1 } : { opacity: 0 }}
-        transition={{ duration: 0.3 }}
-        className="w-[94%] md:w-[80%] mx-auto fixed top-4 z-40 left-1/2 -translate-x-1/2 flex items-center justify-between px-4 py-3 rounded-3xl bg-neutral-900/5 backdrop-blur-xl border border-white/10"
-      >
-        <div className="text-2xl font-medium tracking-tighter flex items-center gap-2">
-          <div className="w-10 aspect-square overflow-hidden relative">
-            <Image
-              src="/assets/logo.svg"
-              alt="background"
-              fill
-              className="object-cover w-full h-full"
-            />
-          </div>
-          Opensox AI
-        </div>
-        <div className="hidden md:flex items-center gap-4 tracking-tight text-lg font-light text-[#d1d1d1]">
-          <Link href="#features" className="cursor-pointer hover:text-white">
-            Features
-          </Link>
-          <Link href="#demo" className="cursor-pointer hover:text-white">
-            Demo
-          </Link>
-          <Link href="#HIW" className="cursor-pointer hover:text-white">
-            How it works
-          </Link>
-          <Link href="#Stats" className="cursor-pointer hover:text-white">
-            Stats
-          </Link>
-          <Link href="#Contact" className="cursor-pointer hover:text-white">
-            Contact
-          </Link>
-          <Link
-            href="https://pages.razorpay.com/pl_R6WHnm15Fm98fI/view"
-            target="_blank"
-            className="cursor-pointer hover:text-white"
-          >
-            Pricing
-          </Link>
-        </div>
-        <div className="">
-          <Link href="/dashboard/home" className="cursor-pointer z-30">
-            <PrimaryButtom>
-              <Terminal />
-              Get Started
-            </PrimaryButtom>
-          </Link>
-        </div>
-      </motion.nav>
-    );
+        <motion.nav
+            initial={{ opacity: 0 }}
+            animate={showNavbar ? { opacity: 1 } : { opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className='w-[94%] md:w-[80%] mx-auto fixed top-4 z-40 left-1/2 -translate-x-1/2 flex items-center justify-between px-4 py-3 rounded-3xl bg-neutral-900/5 backdrop-blur-xl border border-white/10'
+        >
+            <div className="text-2xl font-medium tracking-tighter flex items-center gap-2">
+                <div className="w-10 aspect-square overflow-hidden relative">
+
+                    <Image
+                        src="/assets/logo.svg"
+                        alt="background"
+                        fill
+                        className="object-cover w-full h-full"
+                    />
+                </div>
+                Opensox AI
+            </div>
+            <div className="hidden md:flex items-center gap-4 tracking-tight text-lg font-light text-[#d1d1d1]">
+                {
+                    links.map((link, index) => {
+                        return (
+                            <Link key={index} href={link.href} className='cursor-pointer hover:text-white'>
+                                {link.name}
+                            </Link>
+                        )
+                    })
+                }
+            </div>
+            <div className="">
+                <Link href='/dashboard/home' className='cursor-pointer z-30'>
+                    <PrimaryButtom>
+                        <Terminal />
+                        Get Started
+                    </PrimaryButtom>
+                </Link>
+            </div>
+        </motion.nav>
+    )
 }
 
 export default Navbar

apps/web/src/components/landing-sections/navbar.tsx

@@ -10,8 +10,8 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        background: "#101010",
+        foreground: "#ffffff",
         card: {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
@@ -41,6 +41,7 @@ const config: Config = {
           foreground: "hsl(var(--destructive-foreground))",
         },
         border: "hsl(var(--border))",
+        "border-primary": "#303030",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         chart: {