Skip to content

fix(ui): Update social media icons and add tel: link for phone #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eccentriccoder01 merged 1 commit into from
Aug 29, 2025
Merged

fix(ui): Update social media icons and add tel: link for phone #36

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 29 additions & 14 deletions user/src/components/pages/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
import React from "react";
import facebook from "./../../assets/facebook2.png";
import instagram from "./../../assets/instagram1.png";
import whatsapp from "./../../assets/whatsapp.png";
import youtube from "./../../assets/youtube2.png";
import twitter from "./../../assets/twitter.png";
import qrcode from "./../../assets/QRcode.jpg";
import app from "./../../assets/app_store.svg";
import play from "./../../assets/play_store.svg";
import { FaInstagram, FaWhatsapp, FaFacebook, FaYoutube, FaXTwitter } from "react-icons/fa6";

const Footer = () => {
return (
<footer className="bg-orange-950 dark:bg-gray-900 text-orange-200 dark:text-gray-300">
<div className="container mx-auto px-5 py-16">
<div className="flex flex-wrap md:text-left text-center order-first">

{/* Mobile App & Social Section */}
<div className="lg:w-1/3 md:w-1/2 w-full px-4">
<h2 className="font-extrabold text-white dark:text-orange-400 text-lg mb-3 tracking-widest jost">
Expand All @@ -40,13 +35,21 @@ const Footer = () => {
</div>
<div className="mt-8">
<span className="inline-flex justify-center md:justify-start w-full gap-4">
{[facebook, whatsapp, youtube, instagram, twitter].map((icon, idx) => (
{[
{ icon: <FaFacebook />, link: "/" },
{ icon: <FaWhatsapp />, link: "/" },
{ icon: <FaYoutube />, link: "/" },
{ icon: <FaInstagram />, link: "/" },
{ icon: <FaXTwitter />, link: "/" },
].map((item, idx) => (
<a
key={idx}
href="#"
className="text-gray-400 dark:text-gray-400 hover:text-white dark:hover:text-orange-400 transition-colors"
href={item.link}
target="_blank"
rel="noopener noreferrer"
className="text-gray-400 hover:text-blue-500 dark:hover:text-orange-400 transition-colors text-2xl"
>
<img src={icon} alt="" className="w-8" />
{item.icon}
</a>
))}
</span>
Expand Down Expand Up @@ -84,7 +87,10 @@ const Footer = () => {
],
},
].map((section, idx) => (
<div key={idx} className="lg:w-1/3 md:w-full w-1/2 px-4 mb-10 md:mb-0">
<div
key={idx}
className="lg:w-1/3 md:w-full w-1/2 px-4 mb-10 md:mb-0"
>
<h2 className="font-extrabold text-white dark:text-orange-400 text-lg mb-3 tracking-widest jost">
{section.title}
</h2>
Expand All @@ -106,7 +112,9 @@ const Footer = () => {
<div className="flex flex-col gap-1">
{section.content.map((item, i) =>
typeof item === "string" ? (
<p key={i} className="text-sm">{item}</p>
<p key={i} className="text-sm">
{item}
</p>
) : item.type === "email" ? (
<a
key={i}
Expand All @@ -115,8 +123,14 @@ const Footer = () => {
>
{item.value}
</a>
) : item.type === "phone" ? (
<a key={i} className="font-semibold" href={`tel:${item.value}`}>
{item.value}
</a>
) : (
<p key={i} className="font-semibold">{item.value}</p>
<p key={i} className="font-semibold">
{item.value}
</p>
)
)}
</div>
Expand All @@ -129,7 +143,8 @@ const Footer = () => {
<div className="bg-orange-900 dark:bg-gray-800">
<div className="container mx-auto py-4 px-5">
<p className="text-orange-200 dark:text-gray-300 text-center text-sm">
Copyright SaralSeva © {new Date().getFullYear()}. All Rights Reserved.
Copyright SaralSeva © {new Date().getFullYear()}. All Rights
Reserved.
</p>
</div>
</div>
Expand Down