knso/Webklar.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Background Beams

Browse Source 
test ob live seite bei commiten geapatet wird
This commit is contained in:
Basilosaurusrex
2025-11-25 14:49:39 +01:00
parent f027651f9b
commit 6e7eec9d66
2 changed files with 152 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/page.tsx
View File

@@ -14,6 +14,7 @@ import PillNav from "@/components/PillNav";
import TimelineDemo from "@/components/ui/timeline-demo";
import { HoverEffect } from "@/components/ui/card-hover-effect";
import HeroScrollDemo from "@/components/ui/container-scroll-animation-demo";
import { BackgroundBeams } from "@/components/ui/background-beams";
import Link from 'next/link';
// Scroll animation hook
@@ -628,25 +629,28 @@ export default function AboutServicePage() {
<section
id="services"
ref={servicesRef}
className="relative px-4 sm:px-8 py-12 sm:py-20 rounded-t-[2rem] sm:rounded-t-[3rem] rounded-b-[2rem] sm:rounded-b-[3rem] mx-2 sm:mx-4 backdrop-blur-sm"
className="relative overflow-hidden px-4 sm:px-8 py-12 sm:py-20 rounded-t-[2rem] sm:rounded-t-[3rem] rounded-b-[2rem] sm:rounded-b-[3rem] mx-2 sm:mx-4 backdrop-blur-sm"
style={{ backgroundColor: colors.primary }}
>
<div className="max-w-7xl mx-auto">
<BackgroundBeams className="opacity-70 mix-blend-screen pointer-events-none" />
<div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/70" />
<div className="relative z-10 max-w-7xl mx-auto">
<div className="text-center mb-12 sm:mb-16">
<h2 className={`text-3xl sm:text-5xl md:text-6xl font-bold mb-4 sm:mb-6 transition-all duration-1000 ${
<h2 className={`text-3xl sm:text-5xl md:text-6xl font-bold mb-4 sm:mb-6 transition-all duration-1000 bg-clip-text text-transparent bg-gradient-to-b from-neutral-50/90 via-neutral-200/80 to-neutral-400/70 ${
servicesInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`} style={{ color: colors.tertiary }}>
}`}>
Unsere Leistungen
</h2>
<p className={`text-lg sm:text-xl transition-all duration-1000 delay-200 ${
<p className={`text-lg sm:text-xl transition-all duration-1000 delay-200 text-neutral-100/80 ${
servicesInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
}`} style={{ color: colors.background }}>
}`}>
Alles aus einer Hand für Ihren digitalen Erfolg
</p>
</div>
<div
className={`transition-all duration-1000 ${
className={`relative z-10 transition-all duration-1000 ${
servicesInView ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
}`}
>