From 8f5c2753e10018d14874d9cb157d48fd58012694 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 16:56:01 +0000
Subject: [PATCH] Add a footer with app download and navigation links

Adds a new Footer component to the client application, including sections for app downloads (with QR code and store buttons) and navigation links organized into columns. The Footer component is integrated into the MainContent component.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/1l6S481
---
 .replit                               |   4 -
 client/src/components/Footer.tsx      | 152 ++++++++++++++++++++++++++
 client/src/components/MainContent.tsx |   4 +
 3 files changed, 156 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/Footer.tsx

diff --git a/.replit b/.replit
index 44b4b2e..a45f89c 100644
--- a/.replit
+++ b/.replit
@@ -18,10 +18,6 @@ externalPort = 80
 localPort = 37531
 externalPort = 3001
 
-[[ports]]
-localPort = 40157
-externalPort = 3002
-
 [[ports]]
 localPort = 43349
 externalPort = 3000
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
new file mode 100644
index 0000000..8ca4f10
--- /dev/null
+++ b/client/src/components/Footer.tsx
@@ -0,0 +1,152 @@
+import { Button } from "@/components/ui/button";
+import { Facebook, Twitter } from "lucide-react";
+
+export default function Footer() {
+  const footerLinks = {
+    column1: [
+      { name: "Blog", href: "#" },
+      { name: "Mobile", href: "#" },
+      { name: "Portfolio", href: "#" },
+      { name: "Widgets", href: "#" }
+    ],
+    column2: [
+      { name: "About Us", href: "#" },
+      { name: "Advertise", href: "#" },
+      { name: "Help & Support", href: "#" },
+      { name: "Authors", href: "#" }
+    ]
+  };
+
+  return (
+    <footer className="bg-white border-t border-gray-200 mt-16">
+      {/* App Download Section */}
+      <div className="max-w-7xl mx-auto px-6 py-12">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
+          {/* Install Our App Section */}
+          <div className="lg:col-span-4">
+            <h3 className="text-lg font-semibold text-gray-900 mb-2">Install Our App</h3>
+            <p className="text-sm text-gray-600 mb-6">Scan QR code to install app</p>
+            
+            <div className="flex items-center space-x-6">
+              {/* QR Code placeholder */}
+              <div className="w-24 h-24 bg-black flex items-center justify-center">
+                <div className="w-20 h-20 bg-white p-1">
+                  <div className="w-full h-full bg-black relative">
+                    {/* Simple QR code pattern */}
+                    <div className="absolute inset-1 bg-white"></div>
+                    <div className="absolute top-1 left-1 w-6 h-6 bg-black"></div>
+                    <div className="absolute top-1 right-1 w-6 h-6 bg-black"></div>
+                    <div className="absolute bottom-1 left-1 w-6 h-6 bg-black"></div>
+                    <div className="absolute top-3 left-3 w-2 h-2 bg-white"></div>
+                    <div className="absolute top-3 right-3 w-2 h-2 bg-white"></div>
+                    <div className="absolute bottom-3 left-3 w-2 h-2 bg-white"></div>
+                    {/* QR pattern dots */}
+                    <div className="absolute top-8 left-8 w-1 h-1 bg-black"></div>
+                    <div className="absolute top-10 left-6 w-1 h-1 bg-black"></div>
+                    <div className="absolute top-6 left-10 w-1 h-1 bg-black"></div>
+                    <div className="absolute top-12 left-12 w-1 h-1 bg-black"></div>
+                    <div className="absolute top-14 left-8 w-1 h-1 bg-black"></div>
+                    <div className="absolute top-8 left-14 w-1 h-1 bg-black"></div>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Download Buttons */}
+              <div className="space-y-3">
+                <Button 
+                  variant="outline" 
+                  className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg w-40 justify-start"
+                >
+                  <div className="w-5 h-5 text-blue-500">▶</div>
+                  <span className="text-sm font-medium">Google Play</span>
+                </Button>
+                
+                <Button 
+                  variant="outline" 
+                  className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg w-40 justify-start"
+                >
+                  <div className="w-5 h-5 text-gray-700">🍎</div>
+                  <span className="text-sm font-medium">App Store</span>
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          {/* Navigation Links */}
+          <div className="lg:col-span-4 grid grid-cols-2 gap-8">
+            <div>
+              {footerLinks.column1.map((link) => (
+                <a 
+                  key={link.name}
+                  href={link.href}
+                  className="block text-sm text-gray-600 hover:text-gray-900 mb-3"
+                >
+                  {link.name}
+                </a>
+              ))}
+            </div>
+            <div>
+              {footerLinks.column2.map((link) => (
+                <a 
+                  key={link.name}
+                  href={link.href}
+                  className="block text-sm text-gray-600 hover:text-gray-900 mb-3"
+                >
+                  {link.name}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Section with Investing.com branding */}
+      <div className="bg-gray-900 text-white">
+        <div className="max-w-7xl mx-auto px-6 py-8">
+          {/* Logo and Social Icons */}
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center space-x-2">
+              <span className="text-xl font-bold">SAPIENS</span>
+              <span className="text-sm text-gray-400">.com</span>
+            </div>
+            <div className="flex items-center space-x-4">
+              <Facebook className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer" />
+              <Twitter className="w-5 h-5 text-gray-400 hover:text-white cursor-pointer" />
+            </div>
+          </div>
+
+          {/* Risk Disclosure */}
+          <div className="text-xs text-gray-400 leading-relaxed mb-6">
+            <p className="mb-3">
+              <strong>Risk Disclosure:</strong> Trading in financial instruments and/or cryptocurrencies involves high risks including the risk of losing some, or all, of your investment amount, and may not be suitable for all investors. Prices of cryptocurrencies are extremely volatile and may be affected by external factors such as financial, regulatory or political events. Trading on margin increases the financial risks.
+            </p>
+            <p className="mb-3">
+              Before deciding to trade in financial instrument or cryptocurrencies you should be fully informed of the risks and costs associated with trading the financial markets, carefully consider your investment objectives, level of experience, and risk appetite, and seek professional advice where needed.
+            </p>
+            <p className="mb-3">
+              SAPIENS would like to remind you that the data contained in this website is not necessarily real-time nor accurate. The data and prices on the website are not necessarily provided by any market or exchange, but may be provided by market makers, and so prices may not be accurate and may differ from the actual price at any given market, meaning prices are indicative and not appropriate for trading purposes. SAPIENS will not accept liability for any loss or damage as a result of your trading, or your reliance on the information contained within this website.
+            </p>
+            <p className="mb-3">
+              It is prohibited to use, store, reproduce, display, modify, transmit or distribute the data contained in this website without the explicit prior written permission of SAPIENS and/or the data provider. All intellectual property rights are reserved by the providers and/or the exchange providing the data contained in this website.
+            </p>
+            <p>
+              SAPIENS may be compensated by the advertisers that appear on the website, based on your interaction with the advertisements or advertisers.
+            </p>
+          </div>
+
+          {/* Copyright and Links */}
+          <div className="flex flex-col md:flex-row justify-between items-start md:items-center pt-6 border-t border-gray-700">
+            <p className="text-xs text-gray-400 mb-4 md:mb-0">
+              © 2007-2025 - SAPIENS Media Limited. All Rights Reserved.
+            </p>
+            <div className="flex space-x-6">
+              <a href="#" className="text-xs text-gray-400 hover:text-white">Terms And Conditions</a>
+              <a href="#" className="text-xs text-gray-400 hover:text-white">Privacy Policy</a>
+              <a href="#" className="text-xs text-gray-400 hover:text-white">Risk Warning</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/MainContent.tsx b/client/src/components/MainContent.tsx
index 310817f..056fea9 100644
--- a/client/src/components/MainContent.tsx
+++ b/client/src/components/MainContent.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import type { MediaOutlet } from "@shared/schema";
 import { useAuth } from "@/hooks/useAuth";
+import Footer from "@/components/Footer";
 
 const categories = [
   { id: "people", name: "People", key: "People" },
@@ -135,6 +136,9 @@ export default function MainContent() {
           </div>
         )}
       </div>
+
+      {/* Footer */}
+      <Footer />
     </div>
   );
 }
\ No newline at end of file