Add src/app/products/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -15,7 +15,7 @@ export default function LandingPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="directional-hover"
-      defaultTextAnimation="entrance-slide"
+      defaultTextAnimation="reveal-blur"
       borderRadius="soft"
       contentWidth="mediumLarge"
       sizing="largeSmallSizeLargeTitles"
@@ -46,6 +46,7 @@ export default function LandingPage() {
             { text: "Get Started for Free", href: "#start-free" },
             { text: "Book a 1-on-1 Demo", href: "#book-demo" }
           ]}
+          buttonAnimation="blur-reveal"
           avatars={[
             { src: "http://img.b2bpic.net/free-photo/student-home-taking-notes-while-watching-presentation-closeup_482257-118737.jpg", alt: "Student at home taking notes while watching presentation closeup" },
             { src: "http://img.b2bpic.net/free-photo/diverse-people-using-their-phones_53876-95104.jpg", alt: "Diverse people using their phones" },
@@ -85,7 +86,7 @@ export default function LandingPage() {
             { id: "6", brand: "Marvixa Core", name: "Granular Access & Permissions", price: "N/A", rating: 5, reviewCount: "Ensures data security", imageSrc: "http://img.b2bpic.net/free-photo/cybersecurity-biometric-authentication_23-2151997038.jpg", imageAlt: "Granular Permissions Settings" }
           ]}
           gridVariant="bento-grid"
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground={false}
         />
@@ -99,7 +100,7 @@ export default function LandingPage() {
             { id: "step2", value: "Step 2", title: "Configure AI Automation", description: "Tailor Marvixa's powerful AI engine to your unique project rules. Define custom workflows, set triggers, and let AI handle repetitive tasks, freeing your team for innovation.", imageSrc: "http://img.b2bpic.net/free-photo/programmer-developing-software-large-computer-screen_53876-101149.jpg", imageAlt: "Configuring AI rules in a holographic interface" },
             { id: "step3", value: "Step 3", title: "Scale Operations Effortlessly", description: "Watch your productivity skyrocket. Marvixa proactively identifies bottlenecks, optimizes resource allocation, and provides predictive insights, enabling consistent, on-time delivery at any scale.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendered-abstract-design-elements-arrangement_23-2148996795.jpg", imageAlt: "Illustrating exponential growth and scalability" }
           ]}
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground={true}
         />
@@ -113,7 +114,7 @@ export default function LandingPage() {
             { id: "pro", title: "Pro (Popular)", price: "$29", period: "/month", features: ["Unlimited Project Boards", "Advanced AI Automation", "Predictive Analytics", "Priority Email Support", "Up to 25 Users", "Real-time Collaboration"], button: { text: "Get Pro", href: "#" } },
             { id: "enterprise", title: "Enterprise", price: "Custom", period: "/month", features: ["Everything in Pro", "Dedicated Account Manager", "Custom SLAs", "On-premise Deployment Options", "Unlimited Users", "Advanced Security & Compliance"], button: { text: "Contact Sales", href: "#" } }
           ]}
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground={false}
         />
@@ -130,9 +131,9 @@ export default function LandingPage() {
           ]}
           imageSrc="http://img.b2bpic.net/free-vector/security-privacy-protection-idea-software-access-data-abstract-cyber-data-security-online-global-data-security-personal-data-security-internet-flat-illustration-isolated_1150-39295.jpg"
           imageAlt="Digital security and data encryption graphic"
-          mediaAnimation="slide-up"
+          mediaAnimation="blur-reveal"
           mediaPosition="left"
-          faqsAnimation="slide-up"
+          faqsAnimation="blur-reveal"
           textboxLayout="default"
           useInvertedBackground={true}
         />
@@ -147,6 +148,7 @@ export default function LandingPage() {
           inputPlaceholder="Enter your work email"
           buttonText="Join the Future"
           termsText="By joining, you agree to our Terms of Service and Privacy Policy."
+          tagAnimation="blur-reveal"
         />
       </div>
       <div id="footer" data-section="footer">
@@ -163,4 +165,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+
+export default function ProductsPage() {
+  const navItems = [
+    { name: "Features", id: "#features" },
+    { name: "Solutions", id: "#solutions" },
+    { name: "Pricing", id: "#pricing" },
+    { name: "Documentation", id: "#documentation" },
+    { name: "Products", id: "/products" }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="blurBottom"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Marvixa"
+          navItems={navItems}
+          topBarButton={{ text: "Log In", href: "#" }}
+          button={{ text: "Start Free", href: "#start-free" }}
+        />
+      </div>
+
+      <div id="products-section" data-section="products-section">
+        <ProductCardThree
+          title="Explore Our Innovative Product Line."
+          description="Discover the tools designed to revolutionize your project management and boost team efficiency."
+          products={[
+            {
+              id: "product1",              name: "Marvixa Pro",              price: "$29/month",              imageSrc: "http://img.b2bpic.net/free-photo/minimal-design-digital-tablet-white-table_53876-147281.jpg",              imageAlt: "Marvixa Pro Tablet Display",              initialQuantity: 1,
+              onProductClick: () => console.log('View Marvixa Pro'),
+              onQuantityChange: (q) => console.log('Quantity changed for Pro:', q)
+            },
+            {
+              id: "product2",              name: "Marvixa Enterprise Suite",              price: "Custom",              imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-group-young-business-people-meeting-modern-office_23-2147844075.jpg",              imageAlt: "Enterprise Team Collaboration",              initialQuantity: 1,
+              onProductClick: () => console.log('View Marvixa Enterprise'),
+              onQuantityChange: (q) => console.log('Quantity changed for Enterprise:', q)
+            },
+            {
+              id: "product3",              name: "Marvixa AI Integrator",              price: "$19/month",              imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technological-background-with-circuit-board-elements_23-2148152504.jpg",              imageAlt: "AI Integrator Circuit Board",              initialQuantity: 1,
+              onProductClick: () => console.log('View Marvixa AI Integrator'),
+              onQuantityChange: (q) => console.log('Quantity changed for AI Integrator:', q)
+            },
+            {
+              id: "product4",              name: "Marvixa Data Insights",              price: "$39/month",              imageSrc: "http://img.b2bpic.net/free-photo/abstract-binary-code-background-digital-data-processing_23-2149591461.jpg",              imageAlt: "Data Insights Dashboard",              initialQuantity: 1,
+              onProductClick: () => console.log('View Marvixa Data Insights'),
+              onQuantityChange: (q) => console.log('Quantity changed for Data Insights:', q)
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            { title: "Product", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Integrations", href: "#" }, { label: "Testimonials", href: "#" }] },
+            { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }, { label: "Blog", href: "#" }, { label: "Contact", href: "#" }] },
+            { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Support", href: "#" }, { label: "API Reference", href: "#" }, { label: "Security", href: "#" }, { label: "Changelog", href: "#" }] },
+            { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Cookie Policy", href: "#" }, { label: "Disclaimer", href: "#" }] }
+          ]}
+          bottomLeftText="© 2024 Marvixa. All rights reserved."
+          bottomRightText="Built with Intelligence and Precision."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}