aimond/sapiens-web3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a footer with app download and navigation links

Browse Source 
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
This commit is contained in:
kimjaehyeon0101
2025-09-29 16:56:01 +00:00
parent c07dcde261
commit 8f5c2753e1
3 changed files with 156 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
client/src/components/Footer.tsx Normal file
View File

@ -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>
);
}

4
client/src/components/MainContent.tsx
View File

@ -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>
);
}