Update src/app/styles/variables.css

Merge version_5 into main

src/app/blog/page.tsx

@@ -33,7 +33,7 @@ export default function BlogPage() {
                             { name: "Pricing", id: "pricing" },
                             { name: "Testimonials", id: "testimonials" },
                             { name: "FAQ", id: "faq" },
-                            { name: "Contact", id: "contact" }
+                            { name: "Contact", id: "/contact" }
                         ]}
                     />
                 </div>

src/app/contact/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ContactText from '@/components/sections/contact/ContactText';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="large"
+      background="floatingGradient"
+      cardStyle="subtle-shadow"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple 
+          brandName="CryptoLearn"
+          navItems={[
+            { name: "Features", id: "features" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Testimonials", id: "testimonials" },
+            { name: "FAQ", id: "faq" },
+            { name: "Contact", id: "/contact" }
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Ready to start your crypto learning journey? Join thousands of students who've transformed their financial future through our expert-led education."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Enroll Now", href: "pricing" },
+            { text: "Learn More", href: "features" }
+          ]}
+          background={{ variant: "sparkles-gradient" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="CryptoLearn"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Terms of Service", href: "#" }}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1,38 +1,24 @@
 import type { Metadata } from "next";
-import { Archivo } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
+import "./styles/variables.css";
-import Tag from "@/tag/Tag";
+import "./styles/base.css";
 
-const archivo = Archivo({
+const inter = Inter({
-  variable: "--font-archivo",  subsets: ["latin"],
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "CryptoLearn - Master Cryptocurrency Trading Online",  description: "Learn cryptocurrency trading from industry experts. Comprehensive courses, live sessions, and 24/7 support. Start your crypto education journey today.",  keywords: "cryptocurrency, trading, blockchain, crypto education, online courses",  robots: {
+  title: "CryptoLearn",  description: "Master cryptocurrency trading with expert guidance"};
-    index: true,
-    follow: true
-  },
-  openGraph: {
-    title: "CryptoLearn - Master Cryptocurrency Trading",    description: "Expert-led online crypto education. Learn trading strategies, blockchain technology, and secure asset management.",    type: "website",    siteName: "CryptoLearn"
-  },
-  twitter: {
-    card: "summary_large_image",    title: "CryptoLearn - Crypto Education Platform",    description: "Master cryptocurrency trading with expert guidance and community support."
-  }
-};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
-      <ServiceWrapper>
+      <body className={inter.variable}>
-        <body
-          className={`${archivo.variable} antialiased`}
-        >
-          <Tag />
         {children}
       
         <script
@@ -1402,7 +1388,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -34,7 +34,7 @@ export default function CryptoLearnPage() {
             { name: "Pricing", id: "pricing" },
             { name: "Testimonials", id: "testimonials" },
             { name: "FAQ", id: "faq" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "/contact" }
           ]}
         />
       </div>
@@ -48,8 +48,8 @@ export default function CryptoLearnPage() {
           tagAnimation="slide-up"
           background={{ variant: "sparkles-gradient" }}
           buttons={[
-            { text: "Start Learning", href: "pricing" },
+            { text: "Start Learning Now", href: "pricing" },
-            { text: "View Courses", href: "features" }
+            { text: "Explore Courses", href: "features" }
           ]}
           buttonAnimation="slide-up"
           mediaItems={[
@@ -116,7 +116,7 @@ export default function CryptoLearnPage() {
             {
               id: "beginner",              badge: "Popular",              badgeIcon: Sparkles,
               price: "$29/month",              subtitle: "Perfect for newcomers",              buttons: [
-                { text: "Get Started", href: "contact" }
+                { text: "Get Started", href: "/contact" }
               ],
               features: [
                 "5 beginner courses",                "Weekly live sessions",                "Community forum access",                "Email support",                "Certificate of completion"
@@ -125,7 +125,7 @@ export default function CryptoLearnPage() {
             {
               id: "pro",              badge: "Best Value",              badgeIcon: Zap,
               price: "$79/month",              subtitle: "For active traders",              buttons: [
-                { text: "Start Pro", href: "contact" }
+                { text: "Start Pro", href: "/contact" }
               ],
               features: [
                 "20+ advanced courses",                "Daily live trading sessions",                "1-on-1 mentoring",                "Priority support",                "Trading signals access",                "Advanced analytics tools"
@@ -134,7 +134,7 @@ export default function CryptoLearnPage() {
             {
               id: "elite",              badge: "Premium",              badgeIcon: Crown,
               price: "$199/month",              subtitle: "For serious investors",              buttons: [
-                { text: "Become Elite", href: "contact" }
+                { text: "Become Elite", href: "/contact" }
               ],
               features: [
                 "All courses + exclusive",                "Personal crypto coach",                "Private trading room",                "VIP 24/7 support",                "Custom portfolio analysis",                "Early access to new content",                "Networking events"

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #000802;;
+  /* --background: #ffffff;;
-  --card: #0b1a0b;;
+  --card: #f9f9f9;;
-  --foreground: #e6ffe6;;
+  --foreground: #000612e6;;
-  --primary-cta: #80da9b;;
+  --primary-cta: #15479c;;
-  --secondary-cta: #07170b;;
+  --secondary-cta: #f9f9f9;;
-  --accent: #38714a;;
+  --accent: #e2e2e2;;
-  --background-accent: #2c6541;; */
+  --background-accent: #c4c4c4;; */
 
-  --background: #000802;;
+  --background: #ffffff;;
-  --card: #0b1a0b;;
+  --card: #f9f9f9;;
-  --foreground: #e6ffe6;;
+  --foreground: #000612e6;;
-  --primary-cta: #80da9b;;
+  --primary-cta: #15479c;;
-  --primary-cta-text: #000802;;
+  --primary-cta-text: #000912;;
-  --secondary-cta: #07170b;;
+  --secondary-cta: #f9f9f9;;
-  --secondary-cta-text: #e6ffe6;;
+  --secondary-cta-text: #e6f0ff;;
-  --accent: #38714a;;
+  --accent: #e2e2e2;;
-  --background-accent: #2c6541;;
+  --background-accent: #c4c4c4;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);