Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
hitchhooker committed Dec 13, 2024
1 parent 5cb3529 commit 48373cc
Show file tree
Hide file tree
Showing 9 changed files with 203 additions and 266 deletions.
6 changes: 1 addition & 5 deletions app.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ import UnoCSS from "unocss/vite";

export default defineConfig({
vite: {
plugins: [UnoCSS()],
base: '/',
build: {
outDir: '.output/public'
}
plugins: [UnoCSS()]
}
});
Binary file modified bun.lockb
Binary file not shown.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
"dependencies": {
"@iconify-json/carbon": "^1.2.4",
"@solidjs/router": "^0.13.3",
"@solidjs/start": "^1.0.0",
"@solidjs/start": "^1.0.10",
"@unocss/reset": "^0.59.2",
"solid-js": "^1.8.17",
"unocss": "^0.59.2",
"unocss": "^0.65.1",
"vinxi": "^0.3.11"
},
"engines": {
Expand Down
Binary file modified public/images/swissh.webp
Binary file not shown.
7 changes: 5 additions & 2 deletions src/app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ import "virtual:uno.css";

import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import { Suspense, onMount } from "solid-js";
//import Nav from "~/components/Nav";
//<Nav />
// import Footer from "~/components/Footer";
//<Nav />
// <Footer /> // rm now

export default function App() {
onMount(() => {
console.log("App mounted");
});
return (
<Router
root={(props) => (
Expand Down
174 changes: 58 additions & 116 deletions src/components/Footer.jsx
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>
);
};
144 changes: 55 additions & 89 deletions src/components/Nav.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,110 +5,76 @@ export default function Nav() {
const location = useLocation();
const [navIsOpen, setNavIsOpen] = createSignal(false);

const active = (path) =>
path === location.pathname
? "border-sky-600"
: "border-transparent hover:border-sky-600";

const navItems = [
{ id: 1, text: "Home", href: "/" },
{ id: 2, text: "Docs", href: "/docs" },
{ id: 3, text: "Docs", href: "/fund" },
{ id: 3, text: "Transfer", href: "/transfer" },
{ id: 4, text: "GitHub", href: "https://github.com/rotkonetworks/swissh" }
];

const toggleNavBar = () => {
setNavIsOpen(!navIsOpen());
document.body.classList.toggle("overflow-y-auto");
};

const closeNavBar = () => {
setNavIsOpen(false);
document.body.classList.add("overflow-y-auto");
};

return (
<header class="absolute inset-x-0 top-0 z-50 py-6">
<div class="w-full px-5 sm:px-10 md:px-12 lg:px-5 mx-auto max-w-7xl">
<nav class="w-full flex justify-between gap-6 relative">
<div class="min-w-max inline-flex relative">
<a href="/" class="relative flex items-center gap-3">
<span class="flex">
<span class="w-3 h-6 rounded-l-full flex bg-emerald-600"></span>
<span class="w-3 h-6 rounded-r-full flex bg-teal-400 mt-1.5"></span>
</span>
<div class="inline-flex text-lg text-neutral-800 dark:text-white font-semibold">
swis.sh
</div>
<header class="fixed w-full top-0 z-50 backdrop-blur-sm bg-white/75 dark:bg-neutral-900/75 border-b border-neutral-200 dark:border-neutral-800">
<div class="max-w-7xl mx-auto px-4 py-4">
<nav class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="flex items-center">
<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>
</div>
<span class="font-mono font-bold text-lg dark:text-white">swis.sh</span>
</div>

{/* Desktop Navigation */}
<div class="hidden md:flex items-center gap-8">
{navItems.map(item => (
<a
href={item.href}
class="text-neutral-700 dark:text-neutral-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors"
>
{item.text}
</a>
))}
<a
href="/install"
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-full transition-colors"
>
Install
</a>
</div>

<div
aria-hidden="true"
class={`fixed bg-border-neutral-700/50 inset-0 backdrop-filter backdrop-blur-xl bg-neutral-800/40 ${
navIsOpen() ? "flex lg:hidden" : "hidden lg:!hidden"
}`}
></div>
<div
class={`absolute lg:relative w-full flex overflow-hidden duration-300 ease-linear lg:flex lg:w-auto lg:items-center ${
navIsOpen()
? "translate-y-0 visible opacity-100"
: "translate-y-10 invisible opacity-0 lg:opacity-100 lg:visible lg:translate-y-0"
} top-full lg:top-0 border-t border-neutral-200 dark:border-neutral-700 lg:border-0 flex-col lg:flex-row gap-y-6 gap-x-4 lg:justify-between lg:items-center bg-white dark:bg-neutral-950 lg:!bg-transparent`}
{/* Mobile Navigation Button */}
<button
onClick={() => setNavIsOpen(!navIsOpen())}
class="md:hidden p-2"
aria-label="Toggle navigation"
>
<ul class="px-6 lg:px-0 pt-6 lg:pt-0 flex flex-col lg:flex-row gap-y-4 gap-x-3 text-lg text-neutral-700 dark:text-neutral-300 w-full lg:justify-center lg:items-center">
{navItems.map((navItem) => (
<li key={navItem.id}>
<a
href={navItem.href}
class={`duration-300 font-medium ease-linear hover:text-emerald-600 py-3 ${active(
navItem.href
)}`}
onClick={closeNavBar}
>
{navItem.text}
</a>
</li>
))}
</ul>
<div class="i-carbon-menu text-2xl dark:text-white"></div>
</button>
</nav>

<div class="lg:min-w-max flex items-center sm:w-max w-full pb-6 lg:pb-0 px-6 lg:px-0">
<a
href="/install"
class="flex justify-center items-center w-full sm:w-max px-6 h-12 bg-emerald-600 rounded-full relative overflow-hidden border border-transparent hover:border-emerald-700 duration-300 ease-linear"
{/* Mobile Navigation Menu */}
<div
class={`md:hidden absolute left-0 right-0 top-full bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 ${
navIsOpen() ? 'block' : 'hidden'
}`}
>
<div class="p-4 flex flex-col gap-4">
{navItems.map(item => (
<a
href={item.href}
class="text-neutral-700 dark:text-neutral-300 hover:text-emerald-600 dark:hover:text-emerald-400"
>
<span class="relative z-10 text-white">Install</span>
{item.text}
</a>
</div>
</div>

<div class="min-w-max flex items-center gap-x-3">
<button
aria-label="toggle theme"
class="ui-toggle-theme"
></button>
<button
aria-label="toggle navbar"
onClick={toggleNavBar}
class="lg:hidden outline-none w-7 h-auto flex flex-col relative bg-transparent"
))}
<a
href="/install"
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-full text-center"
>
<span
class={`bg-neutral-700 dark:bg-neutral-300 w-6 h-0.5 rounded-full transition-all duration-300 ease-linear ${
navIsOpen() ? "translate-y-1.5 rotate-40" : ""
}`}
></span>
<span
class={`bg-neutral-700 dark:bg-neutral-300 w-6 origin-center mt-1 h-0.5 rounded-full transition-all duration-300 ease-linear ${
navIsOpen() ? "opacity-0 scale-x-0" : ""
}`}
></span>
<span
class={`bg-neutral-700 dark:bg-neutral-300 w-6 mt-1 h-0.5 rounded-full transition-all duration-300 ease-linear ${
navIsOpen() ? "-translate-y-1.5 -rotate-40" : ""
}`}
></span>
</button>
Install
</a>
</div>
</nav>
</div>
</div>
</header>
);
Expand Down
Loading

0 comments on commit 48373cc

Please sign in to comment.