From 9126589de35573816c8c8afad89ac8b7b3cb83c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Sun, 1 Mar 2026 09:07:18 +0100 Subject: [PATCH] refactor: align landing page and 404 with Calculate blueprint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Hero: remove framer-motion, CSS stagger animations, glass pill CTA button, refined typography and scroll indicator - Stats: remove framer-motion, Lucide icons, tighter glass cards with mono labels - ToolsGrid: remove framer-motion, editorial section heading, 4-col xl grid - ToolCard: replace framer-motion motion.Link with plain Link + CSS hover, compact layout (icon→title→desc→badges+arrow), ElementType icon prop - Footer: remove framer-motion, matches sidebar footer style - BackToTop: remove framer-motion, JS scroll progress bar (1px primary line), compact glass button - not-found: remove framer-motion and shadcn Button, glass pill CTA, 120px mono 404, CSS stagger - page.tsx: remove unnecessary 'use client' directive Co-Authored-By: Claude Sonnet 4.6 --- app/not-found.tsx | 94 +++++++++++---------------- app/page.tsx | 2 - components/BackToTop.tsx | 76 +++++++--------------- components/Footer.tsx | 47 +++++--------- components/Hero.tsx | 134 ++++++++++++++++----------------------- components/Stats.tsx | 79 +++++++---------------- components/ToolCard.tsx | 93 +++++++++------------------ components/ToolsGrid.tsx | 54 +++++++--------- 8 files changed, 204 insertions(+), 375 deletions(-) diff --git a/app/not-found.tsx b/app/not-found.tsx index 9bda4cd..a41154d 100644 --- a/app/not-found.tsx +++ b/app/not-found.tsx @@ -1,73 +1,53 @@ -'use client'; - import Link from 'next/link'; -import { motion } from 'framer-motion'; import AnimatedBackground from '@/components/AnimatedBackground'; import Logo from '@/components/Logo'; -import { Button } from '@/components/ui/button'; -import { Home } from 'lucide-react'; +import { ArrowLeft } from 'lucide-react'; export default function NotFound() { - return (
- -
-
- {/* Logo */} - - - - {/* 404 heading */} - +
+ + {/* Logo */} +
+ +
+ + {/* 404 */} +
+ 404 - + +
- {/* Subtitle */} - - Page Not Found - + {/* Message */} +
+

Page not found

+

+ The tool or page you're looking for doesn't exist or has been moved. +

+
- {/* Description */} - + - The tool or page you are looking for doesn't exist or has been moved. - - - {/* CTA Button */} - - - - - + + Back to Home +
diff --git a/app/page.tsx b/app/page.tsx index f591f49..f8c2c27 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,3 @@ -'use client'; - import AnimatedBackground from '@/components/AnimatedBackground'; import Hero from '@/components/Hero'; import Stats from '@/components/Stats'; diff --git a/components/BackToTop.tsx b/components/BackToTop.tsx index 4fb954e..3d26ea3 100644 --- a/components/BackToTop.tsx +++ b/components/BackToTop.tsx @@ -1,76 +1,44 @@ 'use client'; -import { motion, useScroll, useSpring } from 'framer-motion'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; +import { ChevronUp } from 'lucide-react'; export default function BackToTop() { const [isVisible, setIsVisible] = useState(false); - const { scrollYProgress } = useScroll(); - const scaleX = useSpring(scrollYProgress, { - stiffness: 100, - damping: 30, - restDelta: 0.001, - }); + const barRef = useRef(null); useEffect(() => { - const toggleVisibility = () => { - if (window.pageYOffset > 300) { - setIsVisible(true); - } else { - setIsVisible(false); + const onScroll = () => { + setIsVisible(window.scrollY > 300); + if (barRef.current) { + const el = document.documentElement; + const scrolled = el.scrollTop / (el.scrollHeight - el.clientHeight); + barRef.current.style.transform = `scaleX(${scrolled})`; } }; - - window.addEventListener('scroll', toggleVisibility); - return () => window.removeEventListener('scroll', toggleVisibility); + window.addEventListener('scroll', onScroll, { passive: true }); + return () => window.removeEventListener('scroll', onScroll); }, []); - const scrollToTop = () => { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); - }; - return ( <> - {/* Progress bar */} - {/* Back to top button */} {isVisible && ( - window.scrollTo({ top: 0, behavior: 'smooth' })} + className="fixed bottom-6 right-6 w-8 h-8 glass rounded-lg flex items-center justify-center text-muted-foreground/40 hover:text-primary hover:border-primary/40 transition-all duration-200 z-40" aria-label="Back to top" + style={{ animation: 'fadeIn 0.2s ease-out both' }} > - - - - - {/* Tooltip */} - - Back to top - - + + )} ); diff --git a/components/Footer.tsx b/components/Footer.tsx index 3ef138e..9ce4345 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,47 +1,34 @@ -'use client'; - -import { motion } from 'framer-motion'; import { GitFork, Heart } from 'lucide-react'; export default function Footer() { const currentYear = new Date().getFullYear(); return ( -