emre/www_geomind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvement

Browse Source
This commit is contained in:
Emre
2025-10-10 22:19:36 +03:00
parent bfd28b7fff
commit c2bce4902a
23 changed files with 488 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/layout/Footer.tsx
View File

@@ -13,9 +13,10 @@ type FooterColumn = {
const footerColumns: FooterColumn[] = [
{
title: 'Affiliate Projects',
title: 'GeoMind',
links: [
{ label: 'Project Mycelium', href: 'https://project.mycelium.tf', target: '_blank' },
{ label: 'Technology', href: '/technology' },
{ label: 'Use Cases', href: '/usecases' },
],
},
{
@@ -25,13 +26,6 @@ const footerColumns: FooterColumn[] = [
{ label: 'Support', href: 'mailto:support@threefold.tech', target: '_blank' },
],
},
{
title: 'GeoMind',
links: [
{ label: 'Technology', href: '/technology' },
{ label: 'Use Cases', href: '/usecases' },
],
},
];
export const Footer = () => {
@@ -59,7 +53,7 @@ export const Footer = () => {
</p>
</div>
</div>
<div className="grid flex-1 grid-cols-1 gap-8 text-sm sm:grid-cols-2 lg:grid-cols-3">
<div className="grid flex-1 grid-cols-1 gap-8 text-sm sm:grid-cols-2 lg:grid-cols-2 lg:ml-auto lg:max-w-md">
{footerColumns.map((column) => (
<div key={column.title}>
<p className="text-xs font-semibold uppercase tracking-[0.25em] text-slate-400">

11
src/components/layout/Header.tsx
View File

@@ -37,15 +37,12 @@ export const Header = () => {
)}
>
<div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4 lg:px-8">
<Link to="/" className="flex items-center gap-2">
<Link to="/" className="flex items-center">
<img
src="/images/geomind_logo.png"
alt="Geomind logo"
className="h-10 w-10 rounded-full object-contain shadow-subtle"
className="h-12 w-auto object-contain"
/>
<span className="text-base font-semibold tracking-wider text-ink">
GEOMIND
</span>
</Link>
<nav className="hidden items-center gap-8 md:flex">
{navItems.map(({ label, to }) => (
@@ -64,7 +61,7 @@ export const Header = () => {
))}
<a
href="mailto:support@threefold.tech"
className="rounded-full border border-brand-200 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:bg-brand-600 hover:text-white"
className="rounded-full border border-brand-200 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-subtle transition-all duration-300 hover:-translate-y-0.5 hover:border-brand-700 hover:bg-brand-700 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
>
Contact
</a>
@@ -123,7 +120,7 @@ export const Header = () => {
))}
<a
href="mailto:support@threefold.tech"
className="rounded-full border border-brand-200 bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white shadow-subtle"
className="rounded-full border border-brand-200 bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white shadow-subtle transition-colors duration-300 hover:bg-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2"
>
Contact
</a>

11
src/components/layout/Layout.tsx
View File

@@ -1,6 +1,7 @@
import { type ReactNode } from 'react';
import { Header } from './Header';
import { Footer } from './Footer';
import { ScrollToTop } from './ScrollToTop';
type LayoutProps = {
children: ReactNode;
@@ -8,9 +9,15 @@ type LayoutProps = {
export const Layout = ({ children }: LayoutProps) => {
return (
<div className="min-h-screen bg-gradient-to-b from-white via-mist to-white">
<div className="relative min-h-screen overflow-hidden bg-gradient-to-br from-slate-50 via-white to-brand-50/50">
<ScrollToTop />
{/* Decorative gradient blurs */}
<div className="pointer-events-none fixed -top-32 left-6 h-80 w-80 rounded-full bg-brand-200/40 blur-3xl lg:left-24" />
<div className="pointer-events-none fixed top-1/3 right-10 h-96 w-96 rounded-full bg-indigo-200/30 blur-3xl lg:right-24" />
<div className="pointer-events-none fixed bottom-1/4 left-1/4 h-72 w-72 rounded-full bg-brand-200/30 blur-3xl" />
<Header />
<main className="mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32">{children}</main>
<main className="relative z-10 mx-auto max-w-6xl px-6 pb-24 pt-28 lg:px-8 lg:pt-32">{children}</main>
<Footer />
</div>
);

16
src/components/layout/ScrollToTop.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export const ScrollToTop = () => {
const { pathname } = useLocation();
useEffect(() => {
const animationFrame = window.requestAnimationFrame(() => {
window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
});
return () => window.cancelAnimationFrame(animationFrame);
}, [pathname]);
return null;
};

8
src/components/ui/PrimaryButton.tsx
View File

@@ -16,11 +16,11 @@ const styles: Record<
string
> = {
solid:
'bg-brand-600 text-white shadow-subtle hover:bg-brand-500 hover:-translate-y-0.5',
'bg-brand-600 text-white shadow-subtle hover:bg-brand-500 hover:text-white hover:shadow-lg',
outline:
'border border-brand-200 bg-white text-brand-700 hover:border-brand-400 hover:-translate-y-0.5',
'border border-brand-200 bg-white text-brand-700 hover:border-brand-400 hover:bg-white/95 hover:text-brand-700 hover:shadow-md',
ghost:
'bg-transparent text-brand-600 hover:text-brand-500',
'bg-transparent text-brand-600 hover:bg-brand-50/80 hover:text-brand-700',
};
export const PrimaryButton = ({
@@ -32,7 +32,7 @@ export const PrimaryButton = ({
target,
}: PrimaryButtonProps) => {
const baseClasses =
'inline-flex items-center justify-center rounded-full px-5 py-2 text-sm font-semibold transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2';
'inline-flex items-center justify-center rounded-full px-5 py-2 text-sm font-semibold transition-all duration-300 hover:-translate-y-0.5 active:translate-y-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-300 focus-visible:ring-offset-2';
if (to) {
return (