From f536765b6cdc494d9b2d419e36857cc529ffb44a Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Fri, 30 Jan 2026 00:27:59 +0100
Subject: [PATCH] design

---
 app/globals.css                     | 20 +++++++++++---------
 app/page.tsx                        |  6 +++---
 src/components/BlogPostClient.tsx   | 10 +++++-----
 src/components/FileExample.tsx      |  4 ++--
 src/components/FileExamplesList.tsx |  2 +-
 src/components/Header.tsx           |  2 +-
 src/components/PageHeader.tsx       |  5 ++++-
 src/components/SearchBar.tsx        |  2 +-
 src/components/Tag.tsx              |  2 +-
 src/styles/global.css               |  6 +++---
 10 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 5fa3331..f5b1c74 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -166,15 +166,15 @@
 
   /* Buttons */
   .btn {
-    @apply inline-block px-6 py-3 bg-slate-900 text-white font-sans font-bold text-sm uppercase tracking-widest hover:bg-slate-800 hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 rounded-full shadow-sm hover:shadow-md;
+    @apply inline-flex items-center justify-center px-6 py-3 border border-slate-200 bg-white text-slate-600 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 active:translate-y-0 active:shadow-sm;
   }
 
   .btn-primary {
-    @apply bg-slate-900 hover:bg-slate-800 text-white px-6 py-2.5 rounded-full transition-all duration-300 font-bold text-sm uppercase tracking-widest;
+    @apply border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white;
   }
 
   .btn-secondary {
-    @apply bg-white text-slate-900 hover:bg-slate-50 border border-slate-200 px-6 py-2.5 rounded-full transition-all duration-300 font-bold text-sm uppercase tracking-widest;
+    @apply border-slate-200 text-slate-500 hover:border-slate-400 hover:text-slate-900;
   }
 
   /* Hide scrollbars */
@@ -223,20 +223,21 @@
     position: fixed;
     bottom: 2rem;
     right: 2rem;
-    width: 2.5rem;
-    height: 2.5rem;
+    width: 3rem;
+    height: 3rem;
     background: white;
     border: 1px solid #e2e8f0;
-    border-radius: 0.375rem;
+    border-radius: 9999px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #64748b;
-    transition: all 0.15s ease;
+    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
     opacity: 0;
     transform: translateY(8px);
+    z-index: 50;
   }
 
   .floating-back-to-top.visible {
@@ -247,8 +248,9 @@
   .floating-back-to-top:hover {
     background: #f8fafc;
     color: #1e293b;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-color: #cbd5e1;
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   }
 
   /* Reduced motion support */
diff --git a/app/page.tsx b/app/page.tsx
index abc8ec6..a69e5fa 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -71,9 +71,9 @@ export default function LandingPage() {
                     <span className="text-slate-300">ohne <br />Overhead.</span>
                   </h1>
                   <div className="pt-8">
-                    <a 
-                      href="#contact" 
-                      className="inline-flex items-center gap-4 px-8 py-4 bg-slate-900 text-white rounded-full font-bold text-sm uppercase tracking-widest hover:bg-slate-800 transition-all duration-300 group"
+                    <a
+                      href="#contact"
+                      className="inline-flex items-center gap-4 px-8 py-4 border border-slate-200 bg-white text-slate-900 rounded-full font-bold text-sm uppercase tracking-widest hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 group"
                     >
                       Projekt anfragen
                       <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
diff --git a/src/components/BlogPostClient.tsx b/src/components/BlogPostClient.tsx
index 9f4799f..340d3a2 100644
--- a/src/components/BlogPostClient.tsx
+++ b/src/components/BlogPostClient.tsx
@@ -87,9 +87,9 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
         }`}
       >
         <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
-          <button 
+          <button
             onClick={handleBack}
-            className="flex items-center gap-2 text-slate-700 hover:text-slate-900 transition-colors duration-200 group"
+            className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 group"
             aria-label="Back to home"
           >
             <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -104,7 +104,7 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
             </span>
             <button
               onClick={handleShare}
-              className="share-button-top flex items-center gap-1.5 px-3 py-1.5 bg-slate-50 hover:bg-slate-900 hover:text-white border border-slate-100 hover:border-slate-900 transition-all duration-200"
+              className="share-button-top flex items-center gap-1.5 px-3 py-1.5 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
               aria-label="Share this post"
             >
               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -116,9 +116,9 @@ export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, tit
       </nav>
 
       <div className="mt-16 pt-8 border-t border-slate-50 text-center">
-        <button 
+        <button
           onClick={handleBack}
-          className="inline-flex items-center gap-2 px-8 py-4 bg-white border-2 border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white transition-all duration-300 font-bold uppercase tracking-widest text-xs group"
+          className="btn btn-primary group"
         >
           <svg className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
diff --git a/src/components/FileExample.tsx b/src/components/FileExample.tsx
index 056587f..96a4482 100644
--- a/src/components/FileExample.tsx
+++ b/src/components/FileExample.tsx
@@ -138,7 +138,7 @@ export const FileExample: React.FC<FileExampleProps> = ({
         <div className="flex items-center gap-1 flex-shrink-0">
           <button
             type="button"
-            className={`copy-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white transition-colors ${isCopied ? 'copied' : ''}`}
+            className={`copy-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 ${isCopied ? 'copied' : ''}`}
             onClick={handleCopy}
             title="Copy to clipboard"
             aria-label={`Copy ${filename} to clipboard`}
@@ -156,7 +156,7 @@ export const FileExample: React.FC<FileExampleProps> = ({
 
           <button
             type="button"
-            className="download-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white transition-colors"
+            className="download-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
             onClick={handleDownload}
             title="Download file"
             aria-label={`Download ${filename}`}
diff --git a/src/components/FileExamplesList.tsx b/src/components/FileExamplesList.tsx
index 80919e7..a744d5a 100644
--- a/src/components/FileExamplesList.tsx
+++ b/src/components/FileExamplesList.tsx
@@ -49,7 +49,7 @@ export const FileExamplesList: React.FC<FileExamplesListProps> = ({ groups }) =>
 
               <button
                 type="button"
-                className="toggle-all-btn h-7 w-7 inline-flex items-center justify-center rounded-md border border-transparent hover:border-slate-200 hover:bg-white text-slate-500 hover:text-slate-900 transition-colors"
+                className="toggle-all-btn h-8 w-8 inline-flex items-center justify-center rounded-full border border-slate-200 bg-white text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
                 title="Toggle all"
                 onClick={() => toggleAllInGroup(group.groupId, group.files)}
               >
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 7672603..e5503ff 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -38,7 +38,7 @@ export const Header: React.FC = () => {
           </Link>
           <Link
             href="/contact"
-            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 transition-all duration-300"
+            className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 border border-slate-200 px-5 py-2.5 rounded-full hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
           >
             Anfrage
           </Link>
diff --git a/src/components/PageHeader.tsx b/src/components/PageHeader.tsx
index 74cfcef..46e1b61 100644
--- a/src/components/PageHeader.tsx
+++ b/src/components/PageHeader.tsx
@@ -28,7 +28,10 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
       )}
       
       {backLink && (
-        <Link href={backLink.href} className="inline-flex items-center gap-3 text-slate-400 hover:text-slate-900 mb-12 transition-all duration-300 font-bold text-[10px] uppercase tracking-[0.3em] group">
+        <Link
+          href={backLink.href}
+          className="inline-flex items-center gap-3 px-4 py-2 border border-slate-200 rounded-full text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 mb-12 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 font-bold text-[10px] uppercase tracking-[0.3em] group"
+        >
           <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" /> {backLink.label}
         </Link>
       )}
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index ad85f31..6e8dd9d 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -65,7 +65,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({ value: propValue, onChange
         {value && (
           <button
             onClick={clearSearch}
-            className="absolute right-6 top-1/2 -translate-y-1/2 text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors"
+            className="absolute right-4 top-1/2 -translate-y-1/2 px-3 py-1 border border-slate-200 rounded-full text-[10px] font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-[calc(50%+2px)] hover:shadow-lg hover:shadow-slate-100"
             aria-label="Clear search"
             type="button"
           >
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
index 0a60acb..e7c5a7f 100644
--- a/src/components/Tag.tsx
+++ b/src/components/Tag.tsx
@@ -11,7 +11,7 @@ export const Tag: React.FC<TagProps> = ({ tag, className = '' }) => {
   return (
     <Link
       href={`/tags/${tag}`}
-      className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 bg-white border border-slate-200 px-4 py-2 rounded-full hover:border-slate-400 hover:text-slate-900 transition-all duration-300 ${className}`}
+      className={`inline-block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-500 bg-white border border-slate-200 px-4 py-2 rounded-full hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 ${className}`}
     >
       {tag}
     </Link>
diff --git a/src/styles/global.css b/src/styles/global.css
index b5e4a78..3f8085a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -178,15 +178,15 @@
 
   /* Buttons */
   .btn {
-    @apply inline-block px-4 py-2 bg-slate-900 text-white font-sans font-medium hover:bg-slate-700 transition-colors rounded;
+    @apply inline-flex items-center justify-center px-6 py-3 border border-slate-200 bg-white text-slate-600 font-sans font-bold text-sm uppercase tracking-widest rounded-full transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-slate-100 active:translate-y-0 active:shadow-sm;
   }
 
   .btn-primary {
-    @apply bg-blue-600 hover:bg-blue-700 text-white px-3 py-1.5 rounded transition-colors;
+    @apply border-slate-900 text-slate-900 hover:bg-slate-900 hover:text-white;
   }
 
   .btn-secondary {
-    @apply bg-white text-slate-700 hover:bg-slate-100 border border-slate-300 px-3 py-1.5 rounded transition-colors;
+    @apply border-slate-200 text-slate-500 hover:border-slate-400 hover:text-slate-900;
   }
 
   /* Hide scrollbars */