-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5cb3529
commit 48373cc
Showing
9 changed files
with
203 additions
and
266 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,122 +1,64 @@ | ||
const footerLinks = [ | ||
{ | ||
id: 1, | ||
title: "Navigation", | ||
items: [ | ||
{ id: 1, label: 'Home', link: '/' }, | ||
{ id: 2, label: 'About', link: '/about' }, | ||
{ id: 3, label: 'Services', link: '/services' }, | ||
] | ||
}, | ||
{ | ||
id: 2, | ||
title: "Resources", | ||
items: [ | ||
{ id: 1, label: 'Documentation', link: '/docs' }, | ||
{ id: 2, label: 'API Reference', link: '/api' }, | ||
{ id: 3, label: 'Community', link: '/community' }, | ||
{ id: 4, label: 'Blog', link: '/blog' }, | ||
] | ||
}, | ||
{ | ||
id: 3, | ||
title: "Organization", | ||
items: [ | ||
{ id: 1, label: 'About Us', link: '/about' }, | ||
{ id: 2, label: 'Contact', link: '/contact' }, | ||
] | ||
}, | ||
{ | ||
id: 4, | ||
title: "Contact", | ||
items: [ | ||
{ id: 1, label: 'Logo', link: '/' } | ||
] | ||
} | ||
]; | ||
const Footer = () => { | ||
// Simplified footer sections | ||
const sections = [ | ||
{ | ||
title: "Product", | ||
links: [ | ||
{ label: "Install", href: "/install" }, | ||
{ label: "Docs", href: "/docs" }, | ||
{ label: "GitHub", href: "https://github.com/rotkonetworks/swissh" } | ||
] | ||
}, | ||
{ | ||
title: "Community", | ||
links: [ | ||
{ label: "Matrix Chat", href: "https://matrix.to/#/#swissh:matrix.rotko.net" }, | ||
{ label: "Twitter", href: "https://twitter.com/rotkonetworks" } | ||
] | ||
} | ||
]; | ||
|
||
const footerInfo = { | ||
company: "Rotko Networks OÜ", | ||
address: [ | ||
"Akadeemia tee 21-4", | ||
"Tallinn, 12618", | ||
"Estonia" | ||
], | ||
email: "[email protected]", | ||
matrix: "#swissh:matrix.org", | ||
copyright: "© 2024 swis.sh. All rights reserved." | ||
}; | ||
|
||
const socialLinks = [ | ||
{ id: 'facebook', label: 'Facebook', iconClass: 'i-carbon-logo-facebook', href: 'https://www.facebook.com' }, | ||
{ id: 'linkedin', label: 'LinkedIn', iconClass: 'i-carbon-logo-linkedin', href: 'https://www.linkedin.com' }, | ||
{ id: 'twitter', label: 'Twitter', iconClass: 'i-carbon-logo-twitter', href: 'https://www.twitter.com' }, | ||
{ id: 'instagram', label: 'Instagram', iconClass: 'i-carbon-logo-instagram', href: 'https://www.instagram.com' }, | ||
]; | ||
|
||
const logo = { | ||
src: "/images/swissh.png", | ||
alt: "swis.sh Logo", | ||
class: "h-16 md:h-24 xl:h-32" | ||
}; | ||
|
||
const Footer = () => ( | ||
<footer class="pt-16 md:pt-20 bg-neutral-1 dark:bg-neutral-9"> | ||
<div class="px-5 sm:px-10 md:px-12 lg:px-5 max-w-7xl mx-auto"> | ||
<nav class="text-neutral-7 dark:text-neutral-3 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-y-10 gap-8 py-10"> | ||
{footerLinks.slice(0, 3).map(footerItem => ( | ||
<div key={footerItem.id} class="space-y-5"> | ||
<h3 class="text-lg text-neutral-9 dark:text-neutral-1 font-semibold"> | ||
{footerItem.title} | ||
</h3> | ||
<ul class="space-y-3"> | ||
{footerItem.items.map(item => ( | ||
<li key={item.id}> | ||
<a href={item.link} class="hover:text-emerald-6 dark:hover:text-emerald-5 duration-200"> | ||
{item.label} | ||
</a> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
))} | ||
<div key={footerLinks[3].id} class="space-y-5 col-span-2 md:col-span-3 lg:col-span-1"> | ||
<h3 class="text-lg text-neutral-9 dark:text-neutral-1 font-semibold"> | ||
<a href={footerLinks[3].items[0].link}> | ||
<img src={logo.src} alt={logo.alt} class={logo.class} /> | ||
</a> | ||
</h3> | ||
<div class="flex flex-col space-y-2"> | ||
<div class="flex items-center space-x-2"> | ||
<span class="icon-email text-2xl"></span> | ||
<span>{footerInfo.email}</span> | ||
</div> | ||
<div class="flex items-center space-x-2"> | ||
<span class="icon-matrix text-xl"></span> | ||
<span>{footerInfo.matrix}</span> | ||
</div> | ||
<div class="flex flex-col space-x-2"> | ||
<span class="icon-matrix text-xl"></span> | ||
<span>{footerInfo.company}</span> | ||
{footerInfo.address.map((line, index) => ( | ||
<span key={index}>{line}</span> | ||
))} | ||
return ( | ||
<footer class="bg-neutral-50 dark:bg-neutral-900 border-t border-neutral-200 dark:border-neutral-800"> | ||
<div class="max-w-7xl mx-auto px-4 py-12"> | ||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | ||
{/* Logo and Company Info */} | ||
<div class="md:col-span-2 space-y-4"> | ||
<div class="flex items-center gap-2"> | ||
<span class="w-2 h-4 rounded-l-full bg-emerald-600"></span> | ||
<span class="w-2 h-4 rounded-r-full bg-teal-400 mt-1"></span> | ||
<span class="font-mono font-bold text-lg">swis.sh</span> | ||
</div> | ||
</div> | ||
</div> | ||
</nav> | ||
<div class="border-t border-neutral-2 dark:border-neutral-8 text-neutral-7 dark:text-neutral-3 w-full flex flex-col md:flex-row gap-4 items-center sm:justify-between py-3"> | ||
<div class="text-center sm:text-left flex sm:min-w-max"> | ||
<p>{footerInfo.copyright}</p> | ||
</div> | ||
<div class="flex justify-center sm:justify-end w-full gap-3"> | ||
{socialLinks.map(link => ( | ||
<a key={link.id} href={link.href} aria-label={link.label} class={`${link.iconClass} text-2xl flex`}></a> | ||
|
||
{/* Navigation Sections */} | ||
{sections.map(section => ( | ||
<div class="space-y-4"> | ||
<h3 class="font-medium text-neutral-900 dark:text-white"> | ||
{section.title} | ||
</h3> | ||
<ul class="space-y-2"> | ||
{section.links.map(link => ( | ||
<li> | ||
<a | ||
href={link.href} | ||
class="text-neutral-600 dark:text-neutral-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors" | ||
> | ||
{link.label} | ||
</a> | ||
</li> | ||
))} | ||
</ul> | ||
</div> | ||
))} | ||
</div> | ||
</div> | ||
</div> | ||
</footer> | ||
); | ||
|
||
export default Footer; | ||
<div class="mt-12 pt-8 border-t border-neutral-200 dark:border-neutral-800"> | ||
<p class="text-center text-sm text-neutral-600 dark:text-neutral-400"> | ||
🄯 2024 All rights reversed. | ||
</p> | ||
</div> | ||
</div> | ||
</footer> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.