CityCards/CityCards-Website
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add navigation to the footer links

Browse Source
This commit is contained in:
aryabenade
2026-04-23 16:50:09 +05:30
parent b1fb01a2a6
commit 0e8045d9a2
5 changed files with 46 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/FooterBottom.tsx
View File

@@ -17,13 +17,13 @@ export function FooterBottom({ onPrivacyPolicyClick }: FooterBottomProps) {
<div className="flex flex-col lg:flex-row justify-between items-center space-y-6 lg:space-y-0">
{/* Copyright */}
<p className="text-white/60 text-sm">
© 2024 CityCards. All rights reserved.
© 2026 CityCards. All rights reserved.
</p>
{/* Right Section - Legal Links and Social Icons */}
<div className="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8">
{/* Legal Links */}
<div className="flex space-x-6 text-sm">
{/* <div className="flex space-x-6 text-sm">
<motion.button
onClick={onPrivacyPolicyClick}
className="text-white/70 hover:text-white transition-colors duration-200"
@@ -48,7 +48,7 @@ export function FooterBottom({ onPrivacyPolicyClick }: FooterBottomProps) {
>
Cookie Policy
</motion.a>
</div>
</div> */}
{/* Social Icons - Horizontal Layout */}
<div className="flex space-x-3">

90
src/components/FooterNavigation.tsx
View File

@@ -1,37 +1,21 @@
import { motion } from 'motion/react';
import { footerSections } from '../utils/footerConstants';
import { Link } from 'react-router-dom';
interface FooterNavigationProps {
onHomeClick?: () => void;
onMelbourneClick?: () => void;
onPassesClick?: () => void;
onSignInClick?: () => void;
onAttractionsClick?: () => void;
onBlogsClick?: () => void;
onHowItWorksClick?: () => void;
onFAQClick?: () => void;
onPrivacyPolicyClick?: () => void;
onAboutUsClick?: () => void;
onContactUsClick?: () => void;
currentPage?: string;
}
const linkRoutes: Record<string, string> = {
'Home': '/',
// 'Cancellation policy': '/cancellation-policy',
'How It Works': '/how-it-works',
'FAQ': '/faq',
'Blog': '/blogs',
'Contact Us': '/contact-us',
'Privacy Policy': '/privacy-policy',
// 'Terms of Service': '/terms',
};
export function FooterNavigation({
onHomeClick,
onMelbourneClick,
onPassesClick,
onSignInClick,
onAttractionsClick,
onBlogsClick,
onHowItWorksClick,
onFAQClick,
onPrivacyPolicyClick,
onAboutUsClick,
onContactUsClick,
currentPage
}: FooterNavigationProps) {
export function FooterNavigation() {
return (
<div className="lg:col-span-8 grid grid-cols-2 md:grid-cols-4 gap-8">
<div className="lg:col-span-8 grid grid-cols-2 md:grid-cols-3 gap-8">
{Object.entries(footerSections).map(([key, section]) => (
<motion.div
key={key}
@@ -45,50 +29,20 @@ export function FooterNavigation({
}}
>
<h4 className="font-semibold text-white">{section.title}</h4>
<ul className="space-y-3">
{section.links.map((link, index) => {
const getClickHandler = () => {
switch (link) {
case 'Home': return onHomeClick;
case 'Melbourne': return onMelbourneClick;
case 'Passes': return onPassesClick;
case 'Sign In': return onSignInClick;
case 'Attractions': return onAttractionsClick;
case 'Blog': return onBlogsClick;
case 'How It Works': return onHowItWorksClick;
case 'FAQ': return onFAQClick;
case 'Privacy Policy': return onPrivacyPolicyClick;
case 'Contact Us': return onContactUsClick;
default: return undefined;
}
};
const clickHandler = getClickHandler();
return (
{section.links.map((link) => (
<li key={link}>
{clickHandler ? (
<motion.button
onClick={(e) => {
e.preventDefault();
clickHandler();
}}
className="text-white/80 hover:text-white transition-colors duration-200 text-sm text-left"
whileHover={{ x: 4 }}
transition={{ duration: 0.2 }}
<motion.div whileHover={{ x: 4 }} transition={{ duration: 0.2 }}>
<Link
to={linkRoutes[link] || ""}
className="text-white/80 hover:text-white transition-colors duration-200 text-sm"
>
{link}
</motion.button>
) : (
<motion.span
className="text-white/80 cursor-default text-sm"
>
{link}
</motion.span>
)}
</Link>
</motion.div>
</li>
);
})}
))}
</ul>
</motion.div>
))}

12
src/components/MelbourneFAQ.tsx
View File

@@ -19,12 +19,12 @@ import {
} from "./ui/accordion";
const faqData = [
{
id: "refund",
question: "Can I get a refund on my Melbourne CityCard?",
answer: "Yes, you can cancel your Melbourne CityCard and receive a full refund if you cancel at least 24 hours in advance of your selected start date. For cancellations within 24 hours, refunds are subject to our cancellation policy. Digital cards can be refunded instantly through your account.",
icon: CreditCard
},
// {
// id: "refund",
// question: "Can I get a refund on my Melbourne CityCard?",
// answer: "Yes, you can cancel your Melbourne CityCard and receive a full refund if you cancel at least 24 hours in advance of your selected start date. For cancellations within 24 hours, refunds are subject to our cancellation policy. Digital cards can be refunded instantly through your account.",
// icon: CreditCard
// },
{
id: "duration",
question: "How long is my Melbourne CityCard valid?",

16
src/utils/footerConstants.ts
View File

@@ -1,16 +1,20 @@
export const footerSections = {
explore: {
title: 'Explore',
links: ['Home', 'My Adventures', 'Cancellation policy']
links: ['Home',
'Cancellation policy'
]
},
learn: {
title: 'Learn',
links: ['How It Works', 'Safety Tips', 'FAQ', 'Blog']
},
community: {
title: 'Community',
links: ['Testimonials', 'Partner Stories', 'Events & Meetups', 'Newsletter']
links: ['How It Works',
// 'Safety Tips',
'FAQ', 'Blog']
},
// community: {
// title: 'Community',
// links: ['Testimonials', 'Partner Stories', 'Events & Meetups', 'Newsletter']
// },
support: {
title: 'Support',
links: ['Contact Us', 'Privacy Policy', 'Terms of Service']