From f7205ed8f66401d957106af30500abc38273564c Mon Sep 17 00:00:00 2001 From: DeathKaioken Date: Tue, 28 Oct 2025 20:17:13 +0100 Subject: [PATCH] beautify: page tranistion / loginform --- .../animation/pageTransitionEffect.tsx | 112 ++++++++++++++---- src/app/login/components/LoginForm.tsx | 71 +++++++---- 2 files changed, 138 insertions(+), 45 deletions(-) diff --git a/src/app/components/animation/pageTransitionEffect.tsx b/src/app/components/animation/pageTransitionEffect.tsx index dab72c2..f405d63 100644 --- a/src/app/components/animation/pageTransitionEffect.tsx +++ b/src/app/components/animation/pageTransitionEffect.tsx @@ -2,34 +2,102 @@ import { motion, AnimatePresence } from 'framer-motion'; import { usePathname } from 'next/navigation'; -import React from 'react'; +import Image from 'next/image'; +import React, { useEffect, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; const PageTransitionEffect = ({ children }: { children: React.ReactNode }) => { const pathname = usePathname(); + const DELAY_MS = 200; + const EXIT_DURATION = 0.7; // slow the fade/slide-out a bit - const variants = { - hidden: { opacity: 0, x: 0, y: 20 }, - enter: { opacity: 1, x: 0, y: 0 }, - exit: { opacity: 0, x: 0, y: -20 }, - }; + const [mounted, setMounted] = useState(false); + const [showOverlay, setShowOverlay] = useState(true); + const [overlayExit, setOverlayExit] = useState(false); + const delayT = useRef(null); + + useEffect(() => setMounted(true), []); + + // Exit overlay shortly after route change (200ms) + useEffect(() => { + setShowOverlay(true); + setOverlayExit(false); + if (delayT.current) clearTimeout(delayT.current); + delayT.current = window.setTimeout(() => setOverlayExit(true), DELAY_MS); + return () => { + if (delayT.current) clearTimeout(delayT.current); + }; + }, [pathname]); + + // Prevent scroll while overlay is visible + useEffect(() => { + if (!mounted) return; + const prev = document.documentElement.style.overflow; + if (showOverlay) document.documentElement.style.overflow = 'hidden'; + return () => { + document.documentElement.style.overflow = prev; + }; + }, [showOverlay, mounted]); return ( - window.scrollTo(0, 0)} - > - - {children} - - + <> + window.scrollTo(0, 0)}> + + {children} + + + + {/* Client-only portal overlay with header gradient (no delay, default timing) */} + {mounted && + showOverlay && + createPortal( + { + if (overlayExit) { + setShowOverlay(false); + window.scrollTo(0, 0); + } + }} + className="fixed inset-0 z-[999999] flex items-center justify-center" + style={{ + background: + 'linear-gradient(135deg, #0F1D37 0%, #0A162A 50%, #081224 100%)', + }} + > +
+ Profit Planet +
+
+ , + document.body + )} + ); }; diff --git a/src/app/login/components/LoginForm.tsx b/src/app/login/components/LoginForm.tsx index b6a8f1a..5c8f4c9 100644 --- a/src/app/login/components/LoginForm.tsx +++ b/src/app/login/components/LoginForm.tsx @@ -82,7 +82,32 @@ export default function LoginForm() { }) } - const isMobile = typeof window !== 'undefined' && window.innerWidth < 768 + const screenWidth = typeof window !== 'undefined' ? window.innerWidth : 1200 + const isMobile = screenWidth < 768 + const isTablet = screenWidth >= 768 && screenWidth <= 1024 + const isSmallLaptop = screenWidth > 1024 && screenWidth <= 1366 + + // Calculate responsive values + const getFormWidth = () => { + if (isMobile) return '98vw' + if (isTablet) return '85vw' + if (isSmallLaptop) return '50vw' + return '40vw' + } + + const getFormScale = () => { + if (isMobile) return undefined + if (isTablet) return 'scale(0.95)' + if (isSmallLaptop) return 'scale(0.9)' + return 'scale(0.85)' + } + + const getFormMaxWidth = () => { + if (isMobile) return 'none' + if (isTablet) return '600px' + if (isSmallLaptop) return '650px' + return '700px' + } return (

@@ -215,8 +240,8 @@ export default function LoginForm() {

Welcome back! Login to continue. @@ -225,7 +250,7 @@ export default function LoginForm() {

@@ -235,7 +260,7 @@ export default function LoginForm() { htmlFor="email" className="block text-base font-semibold text-[#0F172A] mb-1" style={{ - fontSize: isMobile ? '0.875rem' : undefined, + fontSize: isMobile ? '0.875rem' : isTablet ? '0.9rem' : undefined, marginBottom: isMobile ? '0.25rem' : undefined, }} > @@ -250,8 +275,8 @@ export default function LoginForm() { onChange={handleInputChange} className="appearance-none block w-full px-4 py-3 border border-gray-300 rounded-lg placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition" style={{ - fontSize: isMobile ? '0.875rem' : undefined, - padding: isMobile ? '0.4rem 0.75rem' : undefined, + fontSize: isMobile ? '0.875rem' : isTablet ? '0.9rem' : undefined, + padding: isMobile ? '0.4rem 0.75rem' : isTablet ? '0.5rem 0.875rem' : undefined, }} placeholder="deine@email.com" required @@ -264,7 +289,7 @@ export default function LoginForm() { htmlFor="password" className="block text-base font-semibold text-[#0F172A] mb-1" style={{ - fontSize: isMobile ? '0.875rem' : undefined, + fontSize: isMobile ? '0.875rem' : isTablet ? '0.9rem' : undefined, marginBottom: isMobile ? '0.25rem' : undefined, }} > @@ -280,8 +305,8 @@ export default function LoginForm() { onChange={handleInputChange} className="appearance-none block w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-[#8D6B1D] text-base bg-white text-[#0F172A] transition" style={{ - fontSize: isMobile ? '0.875rem' : undefined, - padding: isMobile ? '0.4rem 2.5rem 0.4rem 0.75rem' : '0.75rem 3rem 0.75rem 1rem', + fontSize: isMobile ? '0.875rem' : isTablet ? '0.9rem' : undefined, + padding: isMobile ? '0.4rem 2.5rem 0.4rem 0.75rem' : isTablet ? '0.5rem 2.75rem 0.5rem 0.875rem' : '0.75rem 3rem 0.75rem 1rem', }} placeholder="Dein Passwort" required @@ -347,8 +372,8 @@ export default function LoginForm() { : 'bg-gradient-to-r from-[#8D6B1D] via-[#A67C20] to-[#C49225] hover:from-[#7A5E1A] hover:to-[#B8851F] focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:ring-offset-2' }`} style={{ - fontSize: isMobile ? '0.9rem' : undefined, - padding: isMobile ? '0.6rem 1rem' : undefined, + fontSize: isMobile ? '0.9rem' : isTablet ? '0.95rem' : undefined, + padding: isMobile ? '0.6rem 1rem' : isTablet ? '0.7rem 1.25rem' : undefined, }} > {loading ? ( @@ -378,7 +403,7 @@ export default function LoginForm() {
@@ -388,7 +413,7 @@ export default function LoginForm() {
Noch kein Account? @@ -397,13 +422,13 @@ export default function LoginForm() {

Profit Planet is available by invitation only. @@ -411,7 +436,7 @@ export default function LoginForm() {

Contact us for an invitation!