kenso war das
This commit is contained in:
29
herosection/eslint.config.js
Normal file
29
herosection/eslint.config.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{js,jsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
ecmaFeatures: { jsx: true },
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
|
||||
},
|
||||
},
|
||||
])
|
||||
21
herosection/index.html
Normal file
21
herosection/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="de" style="color-scheme: dark;">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
(function() {
|
||||
var stored = localStorage.getItem("theme");
|
||||
var dark = stored === "dark" || (stored !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches);
|
||||
if (dark) document.documentElement.classList.add("dark");
|
||||
else document.documentElement.classList.remove("dark");
|
||||
})();
|
||||
</script>
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hero Section – Centered Image</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
herosection/logo.png
Normal file
BIN
herosection/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 613 KiB |
3543
herosection/package-lock.json
generated
Normal file
3543
herosection/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
herosection/package.json
Normal file
30
herosection/package.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "herosection",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"lucide-react": "^0.563.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"tailwindcss": "^4.1.18",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
1
herosection/public/vite.svg
Normal file
1
herosection/public/vite.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
48
herosection/src/App.jsx
Normal file
48
herosection/src/App.jsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Moon, Sun } from 'lucide-react'
|
||||
import HeroSection from './components/HeroSection.jsx'
|
||||
|
||||
function App() {
|
||||
const [dark, setDark] = useState(() => {
|
||||
const stored = localStorage.getItem('theme')
|
||||
if (stored === 'dark' || stored === 'light') return stored === 'dark'
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement
|
||||
if (dark) {
|
||||
root.classList.add('dark')
|
||||
localStorage.setItem('theme', 'dark')
|
||||
} else {
|
||||
root.classList.remove('dark')
|
||||
localStorage.setItem('theme', 'light')
|
||||
}
|
||||
}, [dark])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-neutral-900">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDark((d) => !d)}
|
||||
className="fixed top-4 right-4 z-[100] rounded-lg border border-neutral-200 bg-white/90 p-2.5 text-neutral-700 shadow-lg backdrop-blur-sm transition-colors hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800/90 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
||||
aria-label={dark ? 'Hellmodus' : 'Dark Mode'}
|
||||
>
|
||||
{dark ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
|
||||
</button>
|
||||
<HeroSection />
|
||||
<section className="relative z-40 min-h-[60vh] px-4 py-20 md:px-8 md:py-28">
|
||||
<div className="mx-auto max-w-4xl text-center">
|
||||
<h2 className="text-2xl font-semibold text-neutral-800 dark:text-neutral-100 sm:text-3xl md:text-4xl">
|
||||
What happens next
|
||||
</h2>
|
||||
<p className="mt-4 text-neutral-600 dark:text-neutral-400">
|
||||
Scroll down to explore more. This section makes the page scrollable.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
80
herosection/src/components/HeroSection.jsx
Normal file
80
herosection/src/components/HeroSection.jsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
|
||||
const TESTIMONIALS = [
|
||||
{ name: 'Manu Arora', quote: 'Fantastic AI, highly recommend it.', position: 'top-20 -left-10', rotate: '-20deg', side: 'left' },
|
||||
{ name: 'Tyler Durden', quote: 'AI revolutionized my business model.', position: 'top-1/2 -left-10 -translate-y-1/2', rotate: '-10deg', side: 'left' },
|
||||
{ name: 'Alice Johnson', quote: 'Transformed the way I work!', position: 'top-20 -right-10', rotate: '20deg', side: 'right' },
|
||||
{ name: 'Bob Smith', quote: 'Absolutely revolutionary, a game-changer.', position: 'bottom-20 -left-10', rotate: '-10deg', side: 'left' },
|
||||
{ name: 'Cathy Lee', quote: 'Improved my work efficiency and daily life.', position: 'bottom-1/2 -right-10 -translate-y-1/2', rotate: '10deg', side: 'right' },
|
||||
{ name: 'David Wright', quote: "It's like having a superpower!", position: 'bottom-20 -right-10', rotate: '20deg', side: 'right' },
|
||||
]
|
||||
|
||||
// Scroll-Fortschritt 0..1: wie weit die Hero-Section nach oben weggescrollt ist → Karten bewegen sich im Bogen nach unten
|
||||
function useScrollBow(heroRef) {
|
||||
const [progress, setProgress] = useState(0)
|
||||
useEffect(() => {
|
||||
const hero = heroRef?.current
|
||||
if (!hero) return
|
||||
const onScroll = () => {
|
||||
const rect = hero.getBoundingClientRect()
|
||||
const h = rect.height
|
||||
if (h <= 0) return
|
||||
const p = Math.max(0, Math.min(1, -rect.top / h))
|
||||
setProgress(p)
|
||||
}
|
||||
onScroll()
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
return () => window.removeEventListener('scroll', onScroll)
|
||||
}, [heroRef])
|
||||
return progress
|
||||
}
|
||||
|
||||
const EMAIL_LOGO = '/logo.png'
|
||||
|
||||
function TestimonialCard({ name, quote, position, rotate, side, scrollProgress }) {
|
||||
const dropY = scrollProgress * 80
|
||||
const flyOutX = scrollProgress * 600
|
||||
const moveX = side === 'left' ? -flyOutX : flyOutX
|
||||
const transform = `translate(${moveX}px, ${dropY}px) rotate(${rotate})`
|
||||
const opacity = Math.max(0, 1 - scrollProgress * 1.2)
|
||||
const visibility = opacity <= 0 ? 'hidden' : 'visible'
|
||||
return (
|
||||
<div
|
||||
className={`hero-edge-card absolute z-20 flex items-center gap-2 rounded-md bg-white p-4 shadow-lg dark:bg-neutral-800 ${position} hidden md:flex transition-all duration-200 ease-out`}
|
||||
style={{ transform, opacity, visibility }}
|
||||
>
|
||||
<img alt="E-Mail" width={50} height={50} className="size-12 shrink-0 object-contain" src={EMAIL_LOGO} />
|
||||
<div className="max-w-[180px]">
|
||||
<h3 className="text-xs text-neutral-800 md:text-base dark:text-neutral-200">{name}</h3>
|
||||
<p className="text-[10px] text-neutral-600 md:text-sm dark:text-neutral-400">{quote}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function HeroSection() {
|
||||
const heroRef = useRef(null)
|
||||
const scrollProgress = useScrollBow(heroRef)
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={heroRef}
|
||||
className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-50 px-4 md:px-8 dark:bg-neutral-900 animate-gradient-bg"
|
||||
>
|
||||
{/* Rand: Testimonial-Karten – bewegen sich beim Scrollen in einem Bogen nach unten */}
|
||||
{TESTIMONIALS.map((t) => (
|
||||
<TestimonialCard key={t.name} {...t} scrollProgress={scrollProgress} />
|
||||
))}
|
||||
|
||||
{/* Dezentes animiertes Grid im Hintergrund (nur auf md+) */}
|
||||
<div
|
||||
className="absolute inset-0 z-10 hidden md:block opacity-40 animate-grid-pulse bg-[length:24px_24px] bg-[linear-gradient(to_right,#8881_1px,transparent_1px),linear-gradient(to_bottom,#8881_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#fff1_1px,transparent_1px),linear-gradient(to_bottom,#fff1_1px,transparent_1px)]"
|
||||
aria-hidden
|
||||
/>
|
||||
{/* Overlay: auf Mobile sichtbar, ab md ausgeblendet */}
|
||||
<div className="absolute inset-0 z-30 h-full w-full bg-white opacity-80 md:opacity-0 dark:bg-neutral-900 pointer-events-none" aria-hidden />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeroSection
|
||||
125
herosection/src/index.css
Normal file
125
herosection/src/index.css
Normal file
@@ -0,0 +1,125 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Hero Section – Hintergrund-Animation */
|
||||
@keyframes gradient-shift {
|
||||
0%, 100% { opacity: 1; background-position: 0% 50%; }
|
||||
50% { opacity: 0.95; background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
@keyframes grid-pulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-gradient-bg {
|
||||
background: linear-gradient(135deg, rgb(250 250 250) 0%, rgb(245 245 245) 50%, rgb(250 250 250) 100%);
|
||||
background-size: 200% 200%;
|
||||
animation: gradient-shift 8s ease infinite;
|
||||
}
|
||||
|
||||
.dark .animate-gradient-bg {
|
||||
background: linear-gradient(135deg, rgb(23 23 23) 0%, rgb(38 38 38) 50%, rgb(23 23 23) 100%);
|
||||
background-size: 200% 200%;
|
||||
}
|
||||
|
||||
.animate-grid-pulse {
|
||||
animation: grid-pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero-content-in {
|
||||
animation: fade-in-up 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.hero-content-in:nth-child(9) { animation-delay: 0.1s; opacity: 0; }
|
||||
.hero-content-in:nth-child(10) { animation-delay: 0.3s; opacity: 0; }
|
||||
.hero-content-in:nth-child(11) { animation-delay: 0.5s; opacity: 0; }
|
||||
|
||||
.hero-submit-btn {
|
||||
transition: box-shadow 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.hero-submit-btn:hover {
|
||||
box-shadow: 0px -1px 0px 0px #FFFFFF50 inset, 0px 1px 0px 0px #FFFFFF50 inset, 0 0 20px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.dark .hero-submit-btn:hover {
|
||||
box-shadow: 0px -1px 0px 0px #00000030 inset, 0px 1px 0px 0px #00000030 inset, 0 0 20px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.hero-submit-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Rand-Elemente: Scroll-Animation (Marquee) */
|
||||
@keyframes marquee-scroll {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
.hero-marquee-track {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
animation: marquee-scroll 25s linear infinite;
|
||||
}
|
||||
|
||||
.hero-marquee-track:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.hero-marquee-container {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||||
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||||
}
|
||||
|
||||
.dark .hero-marquee-container {
|
||||
mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||||
-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
|
||||
}
|
||||
|
||||
/* Rand: Testimonial-Karten – Einblend-Animation (nur opacity, Rotation bleibt per inline) */
|
||||
@keyframes hero-edge-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.hero-edge-card {
|
||||
animation: hero-edge-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.hero-edge-card:nth-child(1) { animation-delay: 0.2s; opacity: 0; }
|
||||
.hero-edge-card:nth-child(2) { animation-delay: 0.35s; opacity: 0; }
|
||||
.hero-edge-card:nth-child(3) { animation-delay: 0.5s; opacity: 0; }
|
||||
.hero-edge-card:nth-child(4) { animation-delay: 0.4s; opacity: 0; }
|
||||
.hero-edge-card:nth-child(5) { animation-delay: 0.55s; opacity: 0; }
|
||||
.hero-edge-card:nth-child(6) { animation-delay: 0.7s; opacity: 0; }
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
.hero-edge-card { opacity: 0.2 !important; }
|
||||
}
|
||||
|
||||
/* Base */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
10
herosection/src/main.jsx
Normal file
10
herosection/src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
8
herosection/vite.config.js
Normal file
8
herosection/vite.config.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
})
|
||||
Reference in New Issue
Block a user