Add landing page

app/ExpenseOverview.tsx

@@ -0,0 +1,43 @@
+'use client'
+import React from 'react';
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+
+function ExpenseOverview() {
+  return (
+    <div className="flex flex-col md:flex-row items-center justify-between p-8 bg-gray-100 h-screen">
+      {/* Left Side: Animated Image */}
+      <motion.div
+        initial={{ opacity: 0, x: -100 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.8 }}
+        className="w-full md:w-1/2 mb-8 md:mb-0"
+      >
+        <Image
+          src="/Expense.jpg" // Replace with an actual image URL
+          alt="Expense Tracking"
+
+        />
+      </motion.div>
+
+      {/* Right Side: Text Content */}
+      <motion.div
+        initial={{ opacity: 0, y: 100 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        className="w-full md:w-1/2 text-center md:text-left"
+      >
+        <h1 className="text-4xl font-bold text-gray-800 mb-4">
+          Manage Your Expenses Effectively
+        </h1>
+        <p className="text-lg text-gray-600">
+          Track your spending habits, save money, and stay on top of your finances with our
+          easy-to-use expense management tools. Plan your budget, monitor expenses, and achieve
+          your financial goals effortlessly.
+        </p>
+      </motion.div>
+    </div>
+  );
+}
+
+export default ExpenseOverview;

app/budget-tracking.tsx

@@ -0,0 +1,38 @@
+'use client'
+import { useState, useEffect } from 'react';
+
+function ProgressBar({ title, percentage, color }: { title: string; percentage: number; color: string }) {
+  return (
+    <div className="mb-4">
+      <div className="flex justify-between mb-1">
+        <span>{title}</span>
+        <span>{percentage}%</span>
+      </div>
+      <div className="w-full bg-gray-200 rounded-full h-2">
+        <div
+          className={`h-2 rounded-full ${color}`}
+          style={{ width: `${percentage}%` }}
+        ></div>
+      </div>
+    </div>
+  );
+}
+
+export default function BudgetTracker() {
+  const [budgets, setBudgets] = useState([
+    { title: 'Groceries', percentage: 75, color: 'bg-green-500' },
+    { title: 'Bills', percentage: 50, color: 'bg-yellow-500' },
+    { title: 'Entertainment', percentage: 40, color: 'bg-pink-500' },
+  ]);
+
+  return (
+    <section className="py-8 bg-gray-50">
+      <h3 className="text-3xl font-bold text-center mb-6">Track Your Budget</h3>
+      <div className="max-w-md mx-auto">
+        {budgets.map((budget, index) => (
+          <ProgressBar key={index} {...budget} />
+        ))}
+      </div>
+    </section>
+  );
+}

app/error.tsx

@@ -0,0 +1,30 @@
+'use client' // Error boundaries must be Client Components
+
+import { useEffect } from 'react'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  )
+}

app/feature.tsx

@@ -0,0 +1,98 @@
+import Image from 'next/image';
+import React from 'react';
+
+interface ExpenseFeatureCardProps {
+    title: string;
+    description: string;
+    imageUrl: string;
+    actionText: string;
+}
+
+const cardsData = [
+    {
+        title: 'Expense Tracker',
+        description: 'Manage and track your expenses in real-time.',
+        imageUrl: "/photo.jpeg",
+        actionText: 'Get Started',
+    },
+    {
+        title: 'Expense Tracker',
+        description: 'Manage and track your expenses in real-time.',
+        imageUrl: "/photo.jpeg",
+        actionText: 'Get Started',
+    },
+    {
+        title: 'Expense Tracker',
+        description: 'Manage and track your expenses in real-time.',
+        imageUrl: "/photo.jpeg",
+        actionText: 'Get Started',
+    },
+    {
+        title: 'Budget Planning',
+        description: 'Set and monitor your budgets to stay on track.',
+        imageUrl: "/photo.jpeg",
+        actionText: 'Plan Now',
+    },
+    {
+        title: 'Expense Reports',
+        description: 'Generate detailed reports on your expenses.',
+        imageUrl: "/photo.jpeg",
+        actionText: 'View Reports',
+    },
+    {
+        title: 'Recurring Expenses',
+        description: 'Set up recurring expenses to manage your finances better.',
+        imageUrl: "/photo.jpeg",
+        actionText: 'Setup Recurring',
+    },
+];
+
+const ExpenseFeatureCard = ({ title, description, imageUrl, actionText }: ExpenseFeatureCardProps) => {
+    return (
+        <div className="relative flex flex-col my-6 bg-white shadow-sm border border-slate-200 rounded-lg w-96">
+            <div className="relative h-56 m-2.5 overflow-hidden rounded-md">
+                <Image src={imageUrl} alt="card-image" className="w-full h-full object-cover" />
+            </div>
+            <div className="p-4">
+                <h6 className="mb-2  text-xl ">
+                    {title}
+                </h6>
+                <p className="  ">
+                    {description}
+                </p>
+            </div>
+            <div className="px-4 pb-4 pt-0 mt-2">
+                <button className="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
+                    {actionText}
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export const CardDemo = () => {
+    return (
+        <div>
+            <div className="text-center py-8 bg-gradient-to-r from-blue-500 to-purple-600">
+                <h1 className="text-5xl font-extrabold text-white tracking-wide drop-shadow-md">
+                    Feature Highlights
+                </h1>
+                <p className="mt-4 text-lg text-white/90 max-w-xl mx-auto">
+                    Explore our range of features designed to help you manage your finances effectively.
+                </p>
+            </div>
+            <div className="py-8 flex space-x-3 flex-wrap justify-center items-start w-full h-full">
+                {cardsData.map((card, index) => (
+                    <ExpenseFeatureCard
+                        key={index}
+                        title={card.title}
+                        description={card.description}
+                        imageUrl={card.imageUrl}
+                        actionText={card.actionText}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+