Update src/app/register/page.tsx

src/app/login/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  return (
+    <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 id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Login", id: "/login" },
+            { name: "Register", id: "/register" },
+          ]}
+          brandName="FinanceAI"
+        />
+      </div>
+      <div className="min-h-screen flex items-center justify-center pt-24 pb-12">
+        <div className="max-w-md w-full p-8 border rounded-lg shadow-lg bg-card">
+          <h1 className="text-2xl font-bold mb-6 text-center">Login</h1>
+          <input 
+            type="email" 
+            placeholder="Email" 
+            className="w-full p-3 mb-4 border rounded"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <input 
+            type="password" 
+            placeholder="Password" 
+            className="w-full p-3 mb-6 border rounded"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <button className="w-full p-3 bg-primary text-white rounded font-bold">
+            Sign In
+          </button>
+        </div>
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="FinanceAI" />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -12,6 +12,7 @@ import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleAp
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
 
 export default function LandingPage() {
   return (
@@ -32,21 +33,15 @@ export default function LandingPage() {
       <NavbarStyleApple
       navItems={[
         {
-          name: "Dashboard",
+          name: "Dashboard",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "Features",
+          name: "Features",          id: "features"},
-          id: "features",
-        },
         {
-          name: "Stats",
+          name: "Sync",          id: "sync"},
-          id: "metrics",
-        },
         {
-          name: "FAQ",
+          name: "Stats",          id: "metrics"},
-          id: "faq",
+        {
-        },
+          name: "FAQ",          id: "faq"},
       ]}
       brandName="FinanceAI"
     />
@@ -55,97 +50,54 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardTestimonial
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       title="Master Your Finances with AI Precision"
       description="Simplify your income, expenses, and tax tracking. Reach your net worth goals faster with smart weekly planning."
       testimonials={[
         {
-          name: "John Doe",
+          name: "John Doe",          handle: "@johndoe",          testimonial: "Finally, a tool that makes budgeting easier than Excel.",          rating: 5,
-          handle: "@johndoe",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6egcxc"},
-          testimonial: "Finally, a tool that makes budgeting easier than Excel.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6egcxc",
-        },
         {
-          name: "Jane Smith",
+          name: "Jane Smith",          handle: "@janesmith",          testimonial: "I love the weekly goal tracking features.",          rating: 5,
-          handle: "@janesmith",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4439ee"},
-          testimonial: "I love the weekly goal tracking features.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4439ee",
-        },
         {
-          name: "Mark Wilson",
+          name: "Mark Wilson",          handle: "@markw",          testimonial: "Tax estimation has never been this simple.",          rating: 5,
-          handle: "@markw",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1f8owv"},
-          testimonial: "Tax estimation has never been this simple.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1f8owv",
-        },
         {
-          name: "Sarah Lee",
+          name: "Sarah Lee",          handle: "@sarahlee",          testimonial: "Excellent for keeping track of my side income.",          rating: 5,
-          handle: "@sarahlee",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yd5wxz"},
-          testimonial: "Excellent for keeping track of my side income.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yd5wxz",
-        },
         {
-          name: "Mike Ross",
+          name: "Mike Ross",          handle: "@miker",          testimonial: "Transformed my financial health in weeks.",          rating: 5,
-          handle: "@miker",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t6ayxc"},
-          testimonial: "Transformed my financial health in weeks.",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t6ayxc",
-        },
       ]}
       buttons={[
         {
-          text: "Get Started",
+          text: "Get Started",          href: "#"},
-          href: "#",
-        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wvltvz"
       avatars={[
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wvltvz",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wvltvz",          alt: "portrait professional man"},
-          alt: "portrait professional man",
-        },
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=frkt2q",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=frkt2q",          alt: "portrait businesswoman"},
-          alt: "portrait businesswoman",
-        },
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v6o3n5",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v6o3n5",          alt: "portrait mid-age professional"},
-          alt: "portrait mid-age professional",
-        },
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3xo6kp",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3xo6kp",          alt: "portrait adult worker"},
-          alt: "portrait adult worker",
-        },
         {
-          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yv6arb",
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yv6arb",          alt: "portrait startup founder"},
-          alt: "portrait startup founder",
-        },
       ]}
       marqueeItems={[
         {
-          type: "text",
+          type: "text",          text: "AI Tax Assistance"},
-          text: "AI Tax Assistance",
-        },
         {
-          type: "text",
+          type: "text",          text: "Real-time Net Worth"},
-          text: "Real-time Net Worth",
-        },
         {
-          type: "text",
+          type: "text",          text: "Weekly Goal Progress"},
-          text: "Weekly Goal Progress",
-        },
         {
-          type: "text",
+          type: "text",          text: "Expense Categorization"},
-          text: "Expense Categorization",
-        },
         {
-          type: "text",
+          type: "text",          text: "Portfolio Analysis"},
-          text: "Portfolio Analysis",
-        },
       ]}
     />
   </div>
@@ -155,10 +107,7 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Your Financial Control Center"
       description={[
-        "Replace complex Excel files with an intuitive dashboard.",
+        "Replace complex Excel files with an intuitive dashboard.",        "AI-driven tax calculations tailored to your side income.",        "Clear visualization of your net worth and progress."]}
-        "AI-driven tax calculations tailored to your side income.",
-        "Clear visualization of your net worth and progress.",
-      ]}
     />
   </div>
 
@@ -168,32 +117,40 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          tag: "Automated",
+          tag: "Automated",          title: "Tax Advisor AI",          subtitle: "Always accurate",          description: "Calculate taxes on additional income automatically.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v6o3n5"},
-          title: "Tax Advisor AI",
-          subtitle: "Always accurate",
-          description: "Calculate taxes on additional income automatically.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=v6o3n5",
-        },
         {
-          tag: "Wealth",
+          tag: "Wealth",          title: "Net Worth Tracking",          subtitle: "Visual growth",          description: "Real-time updates on your assets and liabilities.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3xo6kp"},
-          title: "Net Worth Tracking",
-          subtitle: "Visual growth",
-          description: "Real-time updates on your assets and liabilities.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3xo6kp",
-        },
         {
-          tag: "Productivity",
+          tag: "Productivity",          title: "Weekly Goal Planner",          subtitle: "Stay on track",          description: "Set and monitor up to 5 habits per week.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yv6arb"},
-          title: "Weekly Goal Planner",
-          subtitle: "Stay on track",
-          description: "Set and monitor up to 5 habits per week.",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=yv6arb",
-        },
       ]}
       title="Smart Features for Growth"
       description="Powerful tools to manage your money efficiently."
     />
   </div>
 
+  <div id="sync" data-section="sync">
+      <TimelineProcessFlow
+      title="Mi Band Data Synchronization"
+      description="Connect your wearable device to automatically import activity data and synchronize your health metrics with your financial dashboard for holistic lifestyle tracking."
+      textboxLayout="split"
+      animationType="slide-up"
+      items={[
+          {
+              content: "Pair your Mi Band device via Bluetooth to establish a secure, encrypted connection to your dashboard.",              media: null,
+              reverse: false
+          },
+          {
+              content: "Enable API background syncing to allow real-time health data ingestion, ensuring your fitness goals update daily.",              media: null,
+              reverse: true
+          },
+          {
+              content: "Track integrated metrics, correlating your physical activity levels with your overall well-being and productivity goals.",              media: null,
+              reverse: false
+          }
+      ]}
+      />
+  </div>
+
   <div id="metrics" data-section="metrics">
       <MetricCardSeven
       animationType="depth-3d"
@@ -201,34 +158,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
+          id: "m1",          value: "$125k",          title: "Net Worth",          items: [
-          value: "$125k",
+            "Assets",            "Liabilities",            "Growth"],
-          title: "Net Worth",
-          items: [
-            "Assets",
-            "Liabilities",
-            "Growth",
-          ],
         },
         {
-          id: "m2",
+          id: "m2",          value: "85%",          title: "Budget Efficiency",          items: [
-          value: "85%",
+            "Income",            "Expense",            "Savings"],
-          title: "Budget Efficiency",
-          items: [
-            "Income",
-            "Expense",
-            "Savings",
-          ],
         },
         {
-          id: "m3",
+          id: "m3",          value: "5/5",          title: "Weekly Goals",          items: [
-          value: "5/5",
+            "Target",            "Completed",            "Status"],
-          title: "Weekly Goals",
-          items: [
-            "Target",
-            "Completed",
-            "Status",
-          ],
         },
       ]}
       title="Financial Insights"
@@ -244,59 +183,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "p1",
+          id: "p1",          brand: "Module",          name: "Expense Entry",          price: "Free",          rating: 5,
-          brand: "Module",
+          reviewCount: "100+",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ggo46i"},
-          name: "Expense Entry",
-          price: "Free",
-          rating: 5,
-          reviewCount: "100+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ggo46i",
-        },
         {
-          id: "p2",
+          id: "p2",          brand: "Module",          name: "Portfolio View",          price: "Pro",          rating: 5,
-          brand: "Module",
+          reviewCount: "200+",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mwhtid"},
-          name: "Portfolio View",
-          price: "Pro",
-          rating: 5,
-          reviewCount: "200+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mwhtid",
-        },
         {
-          id: "p3",
+          id: "p3",          brand: "Module",          name: "Tax Engine",          price: "Pro",          rating: 5,
-          brand: "Module",
+          reviewCount: "150+",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gylugf"},
-          name: "Tax Engine",
-          price: "Pro",
-          rating: 5,
-          reviewCount: "150+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gylugf",
-        },
         {
-          id: "p4",
+          id: "p4",          brand: "Module",          name: "Categorization",          price: "Free",          rating: 5,
-          brand: "Module",
+          reviewCount: "300+",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dgwoi4"},
-          name: "Categorization",
-          price: "Free",
-          rating: 5,
-          reviewCount: "300+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dgwoi4",
-        },
         {
-          id: "p5",
+          id: "p5",          brand: "Module",          name: "Goal Tracker",          price: "Free",          rating: 5,
-          brand: "Module",
+          reviewCount: "500+",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h4b7xx"},
-          name: "Goal Tracker",
-          price: "Free",
-          rating: 5,
-          reviewCount: "500+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=h4b7xx",
-        },
         {
-          id: "p6",
+          id: "p6",          brand: "Module",          name: "Net Worth Calculator",          price: "Pro",          rating: 5,
-          brand: "Module",
+          reviewCount: "400+",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4j0zp8"},
-          name: "Net Worth Calculator",
-          price: "Pro",
-          rating: 5,
-          reviewCount: "400+",
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=4j0zp8",
-        },
       ]}
       title="Core Modules"
       description="Specific tools for your daily financial needs."
@@ -310,59 +213,28 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          name: "Sarah Lee",          role: "User",          company: "Growth",          rating: 5,
-          name: "Sarah Lee",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nfdq4v"},
-          role: "User",
-          company: "Growth",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=nfdq4v",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Mike Ross",          role: "User",          company: "Finance",          rating: 5,
-          name: "Mike Ross",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o9pv7r"},
-          role: "User",
-          company: "Finance",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=o9pv7r",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "Jane Doe",          role: "User",          company: "Tech",          rating: 5,
-          name: "Jane Doe",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u603oq"},
-          role: "User",
-          company: "Tech",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=u603oq",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "Tom White",          role: "User",          company: "Dev",          rating: 5,
-          name: "Tom White",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cvhug7"},
-          role: "User",
-          company: "Dev",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cvhug7",
-        },
         {
-          id: "t5",
+          id: "t5",          name: "Anna Green",          role: "User",          company: "Consult",          rating: 5,
-          name: "Anna Green",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3tcy83"},
-          role: "User",
-          company: "Consult",
-          rating: 5,
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3tcy83",
-        },
       ]}
       kpiItems={[
         {
-          value: "10k+",
+          value: "10k+",          label: "Active Users"},
-          label: "Active Users",
-        },
         {
-          value: "50M+",
+          value: "50M+",          label: "Transactions"},
-          label: "Transactions",
-        },
         {
-          value: "99%",
+          value: "99%",          label: "Accuracy"},
-          label: "Accuracy",
-        },
       ]}
       title="Trusted by Users"
       description="See why others choose our platform for financial freedom."
@@ -375,20 +247,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "f1",
+          id: "f1",          title: "How do I calculate net worth?",          content: "Our platform aggregates your assets and liabilities automatically."},
-          title: "How do I calculate net worth?",
-          content: "Our platform aggregates your assets and liabilities automatically.",
-        },
         {
-          id: "f2",
+          id: "f2",          title: "Is my financial data safe?",          content: "Yes, we use military-grade encryption for all user data."},
-          title: "Is my financial data safe?",
-          content: "Yes, we use military-grade encryption for all user data.",
-        },
         {
-          id: "f3",
+          id: "f3",          title: "Can I track tax for side income?",          content: "Absolutely, the tax advisor module handles multiple income streams."},
-          title: "Can I track tax for side income?",
-          content: "Absolutely, the tax advisor module handles multiple income streams.",
-        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0ly58s"
       mediaAnimation="slide-up"
@@ -402,14 +265,11 @@ export default function LandingPage() {
       <ContactText
       useInvertedBackground={false}
       background={{
-        variant: "gradient-bars",
+        variant: "gradient-bars"}}
-      }}
       text="Ready to take control of your financial future?"
       buttons={[
         {
-          text: "Start Now",
+          text: "Start Now",          href: "#"},
-          href: "#",
-        },
       ]}
     />
   </div>

src/app/register/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterCard from '@/components/sections/footer/FooterCard';
+
+export default function RegisterPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  return (
+    <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 id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Login", id: "/login" },
+            { name: "Register", id: "/register" },
+          ]}
+          brandName="FinanceAI"
+        />
+      </div>
+      <div className="min-h-screen flex items-center justify-center pt-24 pb-12">
+        <div className="max-w-md w-full p-8 border rounded-lg shadow-lg bg-card">
+          <h1 className="text-2xl font-bold mb-6 text-center">Create Account</h1>
+          <input 
+            type="email" 
+            placeholder="Email" 
+            className="w-full p-3 mb-4 border rounded"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <input 
+            type="password" 
+            placeholder="Password" 
+            className="w-full p-3 mb-6 border rounded"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <button className="w-full p-3 bg-primary text-white rounded font-bold">
+            Register
+          </button>
+        </div>
+      </div>
+      <div id="footer" data-section="footer">
+        <FooterCard logoText="FinanceAI" />
+      </div>
+    </ThemeProvider>
+  );
+}