Footer
A footer is for displaying links and information at the bottom of a page.
import Logo from "@/mynaui/Logo";
export default function Footer1() {
return (
<footer className="text-xs font-medium">
<div className="mx-auto grid max-w-5xl grid-cols-2 gap-10 px-4 py-16 md:grid-cols-5">
<nav className="col-span-2 md:col-span-1">
<Logo />
</nav>
<nav className="flex flex-col items-start space-y-2.5 text-muted-foreground md:space-y-1.5">
<h3 className="mb-2 text-foreground">Products</h3>
<a href="#" className="transition hover:text-foreground">
Todo List
</a>
<a href="#" className="transition hover:text-foreground">
Product Management
</a>
<a href="#" className="transition hover:text-foreground">
Git Manager
</a>
<a href="#" className="transition hover:text-foreground">
Status Reporter
</a>
<a href="#" className="transition hover:text-foreground">
Email Management
</a>
<a href="#" className="transition hover:text-foreground">
Responsibilities
</a>
<a href="#" className="transition hover:text-foreground">
Teams
</a>
</nav>
<nav className="flex flex-col items-start space-y-2.5 text-muted-foreground md:space-y-1.5">
<h3 className="mb-2 text-foreground">Resources</h3>
<a href="#" className="transition hover:text-foreground">
Technical Support
</a>
<a href="#" className="transition hover:text-foreground">
Licensing
</a>
<a href="#" className="transition hover:text-foreground">
Community
</a>
<a href="#" className="transition hover:text-foreground">
Knowledge Base
</a>
<a href="#" className="transition hover:text-foreground">
Marketplace
</a>
<a href="#" className="transition hover:text-foreground">
My Account
</a>
<a href="#" className="transition hover:text-foreground">
Support Ticket
</a>
</nav>
<nav className="flex flex-col items-start space-y-2.5 text-muted-foreground md:space-y-1.5">
<h3 className="mb-2 text-foreground">Learn</h3>
<a href="#" className="transition hover:text-foreground">
Certification
</a>
<a href="#" className="transition hover:text-foreground">
Partners
</a>
<a href="#" className="transition hover:text-foreground">
Documentation
</a>
<a href="#" className="transition hover:text-foreground">
Developer Resources
</a>
<a href="#" className="transition hover:text-foreground">
Purchasing FAQ
</a>
<a href="#" className="transition hover:text-foreground">
Enterprise services
</a>
</nav>
<nav className="flex flex-col items-start space-y-2.5 text-muted-foreground md:space-y-1.5">
<h3 className="mb-2 text-foreground">About Us</h3>
<a href="#" className="transition hover:text-foreground">
Company
</a>
<a href="#" className="transition hover:text-foreground">
Careers
</a>
<a href="#" className="transition hover:text-foreground">
Events
</a>
<a href="#" className="transition hover:text-foreground">
Blogs
</a>
<a href="#" className="transition hover:text-foreground">
Contact
</a>
<a href="#" className="transition hover:text-foreground">
Security
</a>
<a href="#" className="transition hover:text-foreground">
Privacy
</a>
</nav>
</div>
</footer>
);
}
import Logo from "@/mynaui/Logo";
export default function Footer2() {
return (
<footer className="mx-auto max-w-7xl">
<div className="flex w-full max-w-2xl flex-col items-center justify-center space-y-5 px-4 py-12 md:items-start">
<Logo />
<nav className="flex flex-col flex-wrap items-center space-y-4 text-xs font-medium text-muted-foreground sm:flex-row sm:space-x-4 sm:space-y-0">
<a href="#" className="hover:text-foreground">
Status
</a>
<a href="#" className="hover:text-foreground">
Twitter
</a>
<a href="#" className="hover:text-foreground">
Contact
</a>
<a href="#" className="hover:text-foreground">
Docs
</a>
<a href="#" className="hover:text-foreground">
API
</a>
<a href="#" className="hover:text-foreground">
Privacy
</a>
<a href="#" className="hover:text-foreground">
Terms
</a>
</nav>
<p className="text-center text-xs leading-5 text-muted-foreground md:text-left">
MynaUI collects information about you when you use our Website to
access our services, and other online products and services
(collectively, the “Services”) and through other interactions and
communications you have with us.
</p>
</div>
</footer>
);
}
import Logo from "@/mynaui/Logo";
import {
BrandDribbble,
BrandGithub,
BrandInstagram,
BrandThreads,
} from "@mynaui/icons-react";
export default function Footer3() {
return (
<footer className="mx-auto max-w-7xl">
<div className="flex w-full flex-col items-center justify-center space-y-5 px-4 py-12 text-center">
<Logo />
<nav className="flex flex-col flex-wrap items-center space-y-4 text-xs font-medium text-muted-foreground sm:flex-row sm:space-x-4 sm:space-y-0">
<a href="#" className="hover:text-foreground">
Status
</a>
<a href="#" className="hover:text-foreground">
Contact
</a>
<a href="#" className="hover:text-foreground">
Docs
</a>
<a href="#" className="hover:text-foreground">
API
</a>
<a href="#" className="hover:text-foreground">
Privacy
</a>
<a href="#" className="hover:text-foreground">
Terms
</a>
</nav>
<nav className="flex items-center gap-4 text-muted-foreground">
<a href="#" target="_blank" rel="noreferrer noopener">
<BrandDribbble className="size-5" />
</a>
<a href="#" target="_blank" rel="noreferrer noopener">
<BrandGithub className="size-5" />
</a>
<a href="#" target="_blank" rel="noreferrer noopener">
<BrandInstagram className="size-5" />
</a>
<a href="#" target="_blank" rel="noreferrer noopener">
<BrandThreads className="size-5" />
</a>
</nav>
<p className="text-xs text-muted-foreground">© 2025 MynaUI, Inc.</p>
</div>
</footer>
);
}
import { MynaSolid } from "@mynaui/icons-react";
export default function Footer4() {
return (
<footer className="mx-auto max-w-7xl space-y-8 px-4 pt-16 text-xs font-medium text-muted-foreground">
<div className="grid grid-cols-2 gap-10 md:grid-cols-4">
<nav className="flex flex-col items-start space-y-2.5 md:space-y-1.5">
<h3 className="mb-2 font-semibold uppercase tracking-wide text-foreground">
Products
</h3>
<a href="#" className="transition hover:text-foreground">
Todo List
</a>
<a href="#" className="transition hover:text-foreground">
Product Management
</a>
<a href="#" className="transition hover:text-foreground">
Git Manager
</a>
<a href="#" className="transition hover:text-foreground">
Status Reporter
</a>
<a href="#" className="transition hover:text-foreground">
Email Management
</a>
<a href="#" className="transition hover:text-foreground">
Responsibilities
</a>
<a href="#" className="transition hover:text-foreground">
Teams
</a>
</nav>
<nav className="flex flex-col items-start space-y-2.5 md:space-y-1.5">
<h3 className="mb-2 font-semibold uppercase tracking-wide text-foreground">
Resources
</h3>
<a href="#" className="transition hover:text-foreground">
Technical Support
</a>
<a href="#" className="transition hover:text-foreground">
Licensing
</a>
<a href="#" className="transition hover:text-foreground">
Community
</a>
<a href="#" className="transition hover:text-foreground">
Knowledge Base
</a>
<a href="#" className="transition hover:text-foreground">
Marketplace
</a>
<a href="#" className="transition hover:text-foreground">
My Account
</a>
<a href="#" className="transition hover:text-foreground">
Support Ticket
</a>
</nav>
<nav className="flex flex-col items-start space-y-2.5 md:space-y-1.5">
<h3 className="mb-2 font-semibold uppercase tracking-wide text-foreground">
Learn
</h3>
<a href="#" className="transition hover:text-foreground">
Certification
</a>
<a href="#" className="transition hover:text-foreground">
Partners
</a>
<a href="#" className="transition hover:text-foreground">
Documentation
</a>
<a href="#" className="transition hover:text-foreground">
Developer Resources
</a>
<a href="#" className="transition hover:text-foreground">
Purchasing FAQ
</a>
<a href="#" className="transition hover:text-foreground">
Enterprise services
</a>
</nav>
<nav className="flex flex-col items-start space-y-2.5 md:space-y-1.5">
<h3 className="mb-2 font-semibold uppercase tracking-wide text-foreground">
About Us
</h3>
<a href="#" className="transition hover:text-foreground">
Company
</a>
<a href="#" className="transition hover:text-foreground">
Careers
</a>
<a href="#" className="transition hover:text-foreground">
Events
</a>
<a href="#" className="transition hover:text-foreground">
Blogs
</a>
<a href="#" className="transition hover:text-foreground">
Contact
</a>
<a href="#" className="transition hover:text-foreground">
Security
</a>
<a href="#" className="transition hover:text-foreground">
Privacy
</a>
</nav>
</div>
<div className="flex flex-col space-y-4 border-t py-8 sm:items-center sm:justify-between md:flex-row md:space-y-0">
<p>© 2025 MynaUI, Inc.</p>
<MynaSolid className="text-foreground" />
<p>Have a nice day! 🎉</p>
</div>
</footer>
);
}
import { MynaSolid } from "@mynaui/icons-react";
export default function Footer5() {
return (
<footer>
<div className="mx-auto flex w-full max-w-7xl flex-col-reverse items-center justify-between space-y-6 space-y-reverse px-4 py-10 text-sm font-medium text-muted-foreground md:flex-row md:items-start md:space-y-0">
<div className="flex items-center gap-1.5 text-foreground">
<MynaSolid className="size-6" />
<p>MynaUI © 2025</p>
</div>
<nav className="flex flex-col flex-wrap items-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<a href="#" className="hover:text-foreground">
Status
</a>
<a href="#" className="hover:text-foreground">
Twitter
</a>
<a href="#" className="hover:text-foreground">
Contact
</a>
<a href="#" className="hover:text-foreground">
Docs
</a>
<a href="#" className="hover:text-foreground">
API
</a>
<a href="#" className="hover:text-foreground">
Privacy
</a>
<a href="#" className="hover:text-foreground">
Terms
</a>
</nav>
</div>
</footer>
);
}
import Logo from "@/mynaui/Logo";
export default function Footer6() {
return (
<footer>
<div className="mx-auto flex w-full max-w-7xl flex-col items-center px-4 py-12 sm:items-start">
<Logo />
<nav className="mt-6 flex items-center space-x-3">
<a
href="#"
className="rounded-lg bg-primary-foreground p-1 text-muted-foreground transition hover:bg-background"
>
<svg className="size-6" viewBox="0 0 512 512">
<path
fill="currentColor"
d="M437 152a72 72 0 01-40 12a72 72 0 0032-40a72 72 0 01-45 17a72 72 0 00-122 65a200 200 0 01-145-74a72 72 0 0022 94a72 72 0 01-32-7a72 72 0 0056 69a72 72 0 01-32 1a72 72 0 0067 50a200 200 0 01-105 29a200 200 0 00309-179a200 200 0 0035-37"
/>
</svg>
</a>
<a
href="#"
className="rounded-lg bg-primary-foreground p-1 text-muted-foreground transition hover:bg-background"
>
<svg className="size-6" viewBox="0 0 512 512">
<path
d="m427 169c-4-15-17-27-32-31-34-9-239-10-278 0-15 4-28 16-32 31-9 38-10 135 0 174 4 15 17 27 32 31 36 10 241 10 278 0 15-4 28-16 32-31 9-36 9-137 0-174"
fill="currentColor"
/>
<path d="m220 203v106l93-53" fill="white" />
</svg>
</a>
<a
href="#"
className="rounded-lg bg-primary-foreground p-1 text-muted-foreground transition hover:bg-background"
>
<svg className="size-6" fill="currentColor" viewBox="0 0 512 512">
<circle cx="142" cy="138" r="37" />
<path
stroke="currentColor"
strokeWidth="66"
d="M244 194v198M142 194v198"
/>
<path d="M276 282c0-20 13-40 36-40 24 0 33 18 33 45v105h66V279c0-61-32-89-76-89-34 0-51 19-59 32" />
</svg>
</a>
<a
href="#"
className="rounded-lg bg-primary-foreground p-1 text-muted-foreground transition hover:bg-background"
>
<svg className="size-6" fill="currentColor" viewBox="0 0 512 512">
<path
d="m386 137c-24-11-49.5-19-76.3-23.7c-.5 0-1 0-1.2.6c-3.3 5.9-7 13.5-9.5 19.5c-29-4.3-57.5-4.3-85.7 0c-2.6-6.2-6.3-13.7-10-19.5c-.3-.4-.7-.7-1.2-.6c-23 4.6-52.4 13-76 23.7c-.2 0-.4.2-.5.4c-49 73-62 143-55 213c0 .3.2.7.5 1c32 23.6 63 38 93.6 47.3c.5 0 1 0 1.3-.4c7.2-9.8 13.6-20.2 19.2-31.2c.3-.6 0-1.4-.7-1.6c-10-4-20-8.6-29.3-14c-.7-.4-.8-1.5 0-2c2-1.5 4-3 5.8-4.5c.3-.3.8-.3 1.2-.2c61.4 28 128 28 188 0c.4-.2.9-.1 1.2.1c1.9 1.6 3.8 3.1 5.8 4.6c.7.5.6 1.6 0 2c-9.3 5.5-19 10-29.3 14c-.7.3-1 1-.6 1.7c5.6 11 12.1 21.3 19 31c.3.4.8.6 1.3.4c30.6-9.5 61.7-23.8 93.8-47.3c.3-.2.5-.5.5-1c7.8-80.9-13.1-151-55.4-213c0-.2-.3-.4-.5-.4Zm-192 171c-19 0-34-17-34-38c0-21 15-38 34-38c19 0 34 17 34 38c0 21-15 38-34 38zm125 0c-19 0-34-17-34-38c0-21 15-38 34-38c19 0 34 17 34 38c0 21-15 38-34 38z"
fill="currentColor"
/>
</svg>
</a>
</nav>
<nav className="mt-12 flex w-full flex-col-reverse items-center justify-between space-y-4 space-y-reverse text-xs font-medium text-muted-foreground sm:flex-row sm:space-y-0">
<p>© 2025, MynaUI. All Rights Reserved.</p>
<div>
<a href="#" className="hover:underline">
Privacy
</a>
<span> · </span>
<a href="#" className="hover:underline">
Terms
</a>
</div>
</nav>
</div>
</footer>
);
}
import Logo from "@/mynaui/Logo";
import {
BrandInstagram,
BrandLinkedin,
BrandTwitter,
} from "@mynaui/icons-react";
export default function Footer7() {
return (
<footer className="bg-background px-4 py-12 text-xs text-foreground md:px-6">
<div className="mx-auto max-w-7xl">
<div className="grid grid-cols-1 gap-8 md:grid-cols-5">
<div className="md:col-span-2">
<Logo />
<div className="mt-5 flex space-x-4">
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<BrandInstagram className="size-5" />
</a>
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<BrandTwitter className="size-5" />
</a>
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<BrandLinkedin className="size-5" />
</a>
</div>
<p className="mt-4 text-sm text-muted-foreground">
Empowering teams to achieve project success through effective
management and collaboration.
</p>
</div>
<div>
<h3 className="mb-4 font-semibold uppercase tracking-wide text-foreground">
Features
</h3>
<ul className="space-y-2">
<li>
<a href="#" className="text-sm hover:underline">
Task Management
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Gantt Charts{" "}
<span className="ml-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
Pro
</span>
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Time Tracking
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Resource Allocation
</a>
</li>
</ul>
</div>
<div>
<h3 className="mb-4 font-semibold uppercase tracking-wide text-foreground">
Resources
</h3>
<ul className="space-y-2">
<li>
<a href="#" className="text-sm hover:underline">
Blog
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Webinars{" "}
<span className="ml-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
New
</span>
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Case Studies
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Help Center
</a>
</li>
</ul>
</div>
<div>
<h3 className="mb-4 font-semibold uppercase tracking-wide text-foreground">
Company
</h3>
<ul className="space-y-2">
<li>
<a href="#" className="text-sm hover:underline">
About Us
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Careers{" "}
<span className="ml-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
Hiring
</span>
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Partners
</a>
</li>
<li>
<a href="#" className="text-sm hover:underline">
Contact
</a>
</li>
</ul>
</div>
</div>
<div className="mt-12 flex flex-col items-center justify-between border-t border-border pt-8 md:flex-row">
<p className="text-sm text-muted-foreground">
© 2025 MynaUI. All Rights Reserved.
</p>
<div className="mt-4 flex space-x-4 md:mt-0">
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Privacy Policy
</a>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Terms of Service
</a>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Cookie Settings
</a>
</div>
</div>
</div>
</footer>
);
}
import Logo from "@/mynaui/Logo";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
BrandFacebookSolid,
BrandInstagramSolid,
BrandLinkedinSolid,
BrandTwitterSolid,
} from "@mynaui/icons-react";
export default function Footer() {
return (
<footer className="bg-background px-4 py-12 text-foreground md:px-6">
<div className="mx-auto max-w-7xl">
<div className="mb-4 flex items-center justify-center">
<Logo />
</div>
<p className="mb-4 text-center text-sm text-muted-foreground">
Empowering teams to achieve more, together.
</p>
<div className="mb-8 flex justify-center space-x-4">
<a
href="#"
aria-label="Instagram"
className="text-muted-foreground hover:text-foreground"
>
<BrandInstagramSolid className="size-6" />
</a>
<a
href="#"
aria-label="Twitter"
className="text-muted-foreground hover:text-foreground"
>
<BrandTwitterSolid className="size-6" />
</a>
<a
href="#"
aria-label="LinkedIn"
className="text-muted-foreground hover:text-foreground"
>
<BrandLinkedinSolid className="size-6" />
</a>
<a
href="#"
aria-label="Facebook"
className="text-muted-foreground hover:text-foreground"
>
<BrandFacebookSolid className="size-6" />
</a>
</div>
<div className="mb-12 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
<div>
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-foreground">
Features
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Task Management
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Gantt Charts{" "}
<span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
New
</span>
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Time Tracking
</a>
</li>
</ul>
</div>
<div>
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-foreground">
Solutions
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Agile Teams
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Remote Work
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Enterprise{" "}
<span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
Pro
</span>
</a>
</li>
</ul>
</div>
<div>
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-foreground">
Resources
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Blog
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Webinars
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Case Studies
</a>
</li>
</ul>
</div>
<div>
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-foreground">
Company
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
About Us
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Careers{" "}
<span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
Hiring
</span>
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Press
</a>
</li>
</ul>
</div>
<div>
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-foreground">
Support
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Help Center
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Community
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
API Docs
</a>
</li>
</ul>
</div>
<div>
<h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-foreground">
Integrations
</h3>
<ul className="space-y-2">
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Slack
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
GitHub{" "}
<span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs text-primary">
Popular
</span>
</a>
</li>
<li>
<a
href="#"
className="text-sm text-muted-foreground hover:text-foreground"
>
Zapier
</a>
</li>
</ul>
</div>
</div>
<div className="flex flex-col items-center justify-between border-t border-border pt-8 md:flex-row">
<div className="mb-4 md:mb-0">
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Language" />
</SelectTrigger>
<SelectContent>
<SelectItem value="en-US">English (US)</SelectItem>
<SelectItem value="es-ES">Español</SelectItem>
<SelectItem value="fr-FR">Français</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex space-x-4 text-sm text-muted-foreground">
<a href="#" className="hover:text-foreground">
Terms of Service
</a>
<a href="#" className="hover:text-foreground">
Privacy Policy
</a>
<a href="#" className="hover:text-foreground">
Cookie Settings
</a>
</div>
</div>
<div className="mt-6 text-center text-sm text-muted-foreground">
© 2025 MynaUI. All rights reserved.
</div>
</div>
</footer>
);
}
import Logo from "@/mynaui/Logo";
import {
BrandFacebook,
BrandInstagram,
BrandLinkedin,
BrandTwitter,
} from "@mynaui/icons-react";
export default function Footer() {
return (
<footer className="bg-background px-4 py-12 text-xs font-medium text-foreground sm:px-6 lg:px-8 lg:py-16">
<div className="mx-auto max-w-7xl">
<div className="xl:grid xl:grid-cols-5 xl:gap-8">
<div className="space-y-6 xl:col-span-1">
<Logo />
<div className="flex space-x-4 mt-4">
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<span className="sr-only">Instagram</span>
<BrandInstagram className="size-6" />
</a>
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<span className="sr-only">Twitter</span>
<BrandTwitter className="size-6" />
</a>
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<span className="sr-only">LinkedIn</span>
<BrandLinkedin className="size-6" />
</a>
<a
href="#"
className="text-muted-foreground hover:text-foreground"
>
<span className="sr-only">Facebook</span>
<BrandFacebook className="size-6" />
</a>
</div>
</div>
<div className="mt-12 grid grid-cols-2 gap-8 xl:col-span-4 xl:mt-0">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="font-semibold uppercase text-muted-foreground">
Project Planning
</h3>
<ul role="list" className="mt-3 space-y-3">
<li>
<a href="#" className="text-foreground hover:text-primary">
Gantt Charts
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Milestones
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Resource Allocation
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Risk Management
</a>
</li>
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="font-semibold uppercase tracking-wider text-muted-foreground">
Task Management
</h3>
<ul role="list" className="mt-3 space-y-3">
<li>
<a href="#" className="text-foreground hover:text-primary">
Kanban Boards
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Time Tracking
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Task Dependencies
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Progress Tracking
</a>
</li>
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="font-semibold uppercase tracking-wider text-muted-foreground">
Team Collaboration
</h3>
<ul role="list" className="mt-3 space-y-3">
<li>
<a href="#" className="text-foreground hover:text-primary">
File Sharing
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Team Chat
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Video Conferencing
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Shared Calendars
</a>
</li>
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="font-semibold uppercase tracking-wider text-muted-foreground">
Reporting
</h3>
<ul role="list" className="mt-3 space-y-3">
<li>
<a href="#" className="text-foreground hover:text-primary">
Project Analytics
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Custom Dashboards
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Performance Metrics
</a>
</li>
<li>
<a href="#" className="text-foreground hover:text-primary">
Export Reports
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="mt-12 border-t border-border pt-8">
<p className="text-muted-foreground xl:text-center">
© 2025 MynaUI. All rights reserved.
</p>
</div>
</div>
</footer>
);
}