Update src/app/styles/variables.css

Merge version_1 into main

src/app/about/page.tsx

@@ -10,25 +10,25 @@ import { Award, TrendingUp, Users, Globe, Clock } from "lucide-react";
 
 export default function AboutPage() {
   const navItems = [
-    { name: "Features", id: "features" },
-    { name: "Pricing", id: "pricing" },
-    { name: "About", id: "about" },
-    { name: "FAQ", id: "faq" },
-    { name: "Contact", id: "contact" }
+    { name: "Features", id: "/features" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "About", id: "/about" },
+    { name: "FAQ", id: "/contact" },
+    { name: "Contact", id: "/contact" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="text-shift"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="small"
-      sizing="largeSmall"
-      background="circleGradient"
-      cardStyle="outline"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="flat"
       secondaryButtonStyle="solid"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -85,18 +85,18 @@ export default function AboutPage() {
           columns={[
             {
               title: "Product",              items: [
-                { label: "Features", href: "#features" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Features", href: "/features" },
+                { label: "Pricing", href: "/pricing" },
                 { label: "Security", href: "#" },
                 { label: "Roadmap", href: "#" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Blog", href: "#" },
                 { label: "Careers", href: "#" },
-                { label: "Contact", href: "#contact" }
+                { label: "Contact", href: "/contact" }
               ]
             },
             {
@@ -111,4 +111,4 @@ export default function AboutPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/contact/page.tsx

@@ -3,32 +3,32 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
 import ContactText from "@/components/sections/contact/ContactText";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterMedia from "@/components/sections/footer/FooterMedia";
 import Link from "next/link";
 import { HelpCircle } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
-    { name: "Features", id: "features" },
-    { name: "Pricing", id: "pricing" },
-    { name: "About", id: "about" },
-    { name: "FAQ", id: "faq" },
-    { name: "Contact", id: "contact" }
+    { name: "Features", id: "/features" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "About", id: "/about" },
+    { name: "FAQ", id: "/contact" },
+    { name: "Contact", id: "/contact" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="text-shift"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="small"
-      sizing="largeSmall"
-      background="circleGradient"
-      cardStyle="outline"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="flat"
       secondaryButtonStyle="solid"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -54,17 +54,13 @@ export default function ContactPage() {
       </div>
 
       <div id="faq" data-section="faq">
-        <FaqSplitMedia
+        <FaqDouble
           tag="Help"
           tagIcon={HelpCircle}
           title="Frequently Asked Questions"
           description="Find answers to common questions about Guesto's features and pricing."
           textboxLayout="default"
           useInvertedBackground={false}
-          imageSrc="http://img.b2bpic.net/free-vector/faq-concept_23-2148147003.jpg"
-          imageAlt="FAQ Support"
-          mediaAnimation="slide-up"
-          mediaPosition="left"
           faqsAnimation="slide-up"
           faqs={[
             {
@@ -98,18 +94,18 @@ export default function ContactPage() {
           columns={[
             {
               title: "Product",              items: [
-                { label: "Features", href: "#features" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Features", href: "/features" },
+                { label: "Pricing", href: "/pricing" },
                 { label: "Security", href: "#" },
                 { label: "Roadmap", href: "#" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Blog", href: "#" },
                 { label: "Careers", href: "#" },
-                { label: "Contact", href: "#contact" }
+                { label: "Contact", href: "/contact" }
               ]
             },
             {
@@ -124,4 +120,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/features/page.tsx

@@ -10,25 +10,25 @@ import { Zap, Award } from "lucide-react";
 
 export default function FeaturesPage() {
   const navItems = [
-    { name: "Features", id: "features" },
-    { name: "Pricing", id: "pricing" },
-    { name: "About", id: "about" },
-    { name: "FAQ", id: "faq" },
-    { name: "Contact", id: "contact" }
+    { name: "Features", id: "/features" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "About", id: "/about" },
+    { name: "FAQ", id: "/contact" },
+    { name: "Contact", id: "/contact" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="text-shift"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="small"
-      sizing="largeSmall"
-      background="circleGradient"
-      cardStyle="outline"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="flat"
       secondaryButtonStyle="solid"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -96,18 +96,18 @@ export default function FeaturesPage() {
           columns={[
             {
               title: "Product",              items: [
-                { label: "Features", href: "#features" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Features", href: "/features" },
+                { label: "Pricing", href: "/pricing" },
                 { label: "Security", href: "#" },
                 { label: "Roadmap", href: "#" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Blog", href: "#" },
                 { label: "Careers", href: "#" },
-                { label: "Contact", href: "#contact" }
+                { label: "Contact", href: "/contact" }
               ]
             },
             {
@@ -122,4 +122,4 @@ export default function FeaturesPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/layout.tsx

@@ -1,11 +1,11 @@
 import type { Metadata } from "next";
-import { Nunito_Sans } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 
-const nunitoSans = Nunito_Sans({
-  variable: "--font-nunito-sans",  subsets: ["latin"],
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
@@ -33,7 +33,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
-        <body className={`${nunitoSans.variable} antialiased`}>
+        <body className={`${inter.variable} antialiased`}>
           <Tag />
           {children}
         
@@ -1407,4 +1407,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -13,25 +13,25 @@ import { Sparkles, Zap, Award, TrendingUp, MessageSquare, Users, Globe, Clock, H
 
 export default function HomePage() {
   const navItems = [
-    { name: "Features", id: "features" },
-    { name: "Pricing", id: "pricing" },
-    { name: "About", id: "about" },
-    { name: "FAQ", id: "faq" },
-    { name: "Contact", id: "contact" }
+    { name: "Features", id: "/features" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "About", id: "/about" },
+    { name: "FAQ", id: "/contact" },
+    { name: "Contact", id: "/contact" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="text-shift"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="small"
-      sizing="largeSmall"
-      background="circleGradient"
-      cardStyle="outline"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="flat"
       secondaryButtonStyle="solid"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -178,18 +178,18 @@ export default function HomePage() {
           columns={[
             {
               title: "Product",              items: [
-                { label: "Features", href: "#features" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Features", href: "/features" },
+                { label: "Pricing", href: "/pricing" },
                 { label: "Security", href: "#" },
                 { label: "Roadmap", href: "#" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Blog", href: "#" },
                 { label: "Careers", href: "#" },
-                { label: "Contact", href: "#contact" }
+                { label: "Contact", href: "/contact" }
               ]
             },
             {
@@ -204,4 +204,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -2,32 +2,32 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
+import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
 import FooterMedia from "@/components/sections/footer/FooterMedia";
 import Link from "next/link";
 import { CreditCard, Zap, Star, Crown } from "lucide-react";
 
 export default function PricingPage() {
   const navItems = [
-    { name: "Features", id: "features" },
-    { name: "Pricing", id: "pricing" },
-    { name: "About", id: "about" },
-    { name: "FAQ", id: "faq" },
-    { name: "Contact", id: "contact" }
+    { name: "Features", id: "/features" },
+    { name: "Pricing", id: "/pricing" },
+    { name: "About", id: "/about" },
+    { name: "FAQ", id: "/contact" },
+    { name: "Contact", id: "/contact" }
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="text-shift"
+      defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
-      borderRadius="soft"
-      contentWidth="small"
-      sizing="largeSmall"
-      background="circleGradient"
-      cardStyle="outline"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="solid"
       primaryButtonStyle="flat"
       secondaryButtonStyle="solid"
-      headingFontWeight="normal"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -40,7 +40,7 @@ export default function PricingPage() {
       </div>
 
       <div id="pricing" data-section="pricing">
-        <PricingCardTwo
+        <PricingCardThree
           tag="Pricing"
           tagIcon={CreditCard}
           title="Simple, Transparent Pricing"
@@ -51,7 +51,7 @@ export default function PricingPage() {
           plans={[
             {
               id: "starter",              badge: "Starter",              badgeIcon: Zap,
-              price: "₹999/month",              subtitle: "Perfect for solo agents",              buttons: [
+              price: "₹999/month",              name: "Perfect for solo agents",              buttons: [
                 { text: "Get Started", href: "https://app.guesto.com/signup" }
               ],
               features: [
@@ -60,7 +60,7 @@ export default function PricingPage() {
             },
             {
               id: "professional",              badge: "Professional",              badgeIcon: Star,
-              price: "₹2,499/month",              subtitle: "For growing agencies",              buttons: [
+              price: "₹2,499/month",              name: "For growing agencies",              buttons: [
                 { text: "Start Free Trial", href: "https://app.guesto.com/signup" }
               ],
               features: [
@@ -69,8 +69,8 @@ export default function PricingPage() {
             },
             {
               id: "enterprise",              badge: "Enterprise",              badgeIcon: Crown,
-              price: "Custom",              subtitle: "For large teams",              buttons: [
-                { text: "Contact Sales", href: "#contact" }
+              price: "Custom",              name: "For large teams",              buttons: [
+                { text: "Contact Sales", href: "/contact" }
               ],
               features: [
                 "Everything in Professional",                "Dedicated account manager",                "Custom integrations",                "White-label solution",                "Advanced security",                "SLA guarantee",                "Training & onboarding"
@@ -89,18 +89,18 @@ export default function PricingPage() {
           columns={[
             {
               title: "Product",              items: [
-                { label: "Features", href: "#features" },
-                { label: "Pricing", href: "#pricing" },
+                { label: "Features", href: "/features" },
+                { label: "Pricing", href: "/pricing" },
                 { label: "Security", href: "#" },
                 { label: "Roadmap", href: "#" }
               ]
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Blog", href: "#" },
                 { label: "Careers", href: "#" },
-                { label: "Contact", href: "#contact" }
+                { label: "Contact", href: "/contact" }
               ]
             },
             {
@@ -115,4 +115,4 @@ export default function PricingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-nunito-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-nunito-sans), sans-serif;
+  font-family: var(--font-inter), sans-serif;
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #000612e6;;
-  --primary-cta: #15479c;;
-  --secondary-cta: #f9f9f9;;
-  --accent: #e2e2e2;;
-  --background-accent: #c4c4c4;; */
+  /* --background: #F4F6F9;;
+  --card: #FFFFFF;;
+  --foreground: #1A1A1A;;
+  --primary-cta: #C62828;;
+  --secondary-cta: #1E1E2F;;
+  --accent: #C62828;;
+  --background-accent: #E8E8E8;; */
 
-  --background: #ffffff;;
-  --card: #f9f9f9;;
-  --foreground: #000612e6;;
-  --primary-cta: #15479c;;
+  --background: #F4F6F9;;
+  --card: #FFFFFF;;
+  --foreground: #1A1A1A;;
+  --primary-cta: #C62828;;
   --primary-cta-text: #ffffff;;
-  --secondary-cta: #f9f9f9;;
+  --secondary-cta: #1E1E2F;;
   --secondary-cta-text: #000612e6;;
-  --accent: #e2e2e2;;
-  --background-accent: #c4c4c4;;
+  --accent: #C62828;;
+  --background-accent: #E8E8E8;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);