src/app/try/page.tsx

@@ -2,22 +2,35 @@
 
 import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Input } from "@/components/form/Input";
+import Input from "@/components/form/Input";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 
 export default function TryServicePage() {
   const [upc, setUpc] = useState("");
 
   return (
-    <ThemeProvider>
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
+    >
       <div className="min-h-screen bg-[var(--background)] flex flex-col">
-        <NavbarStyleApple
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Try Service", id: "/try" }
-          ]}
-          brandName="IntelTrack"
-        />
+        <div id="nav" data-section="nav">
+            <NavbarStyleApple
+              navItems={[
+                { name: "Home", id: "/" },
+                { name: "Try Service", id: "/try" }
+              ]}
+              brandName="IntelTrack"
+            />
+        </div>
         <main className="flex-grow flex items-center justify-center p-8">
           <div className="w-full max-w-md p-8 bg-[var(--card)] rounded-lg shadow-xl">
             <h1 className="text-3xl font-bold mb-6 text-[var(--foreground)]">Test Service</h1>