File size: 1,354 Bytes
e637e9c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | import React from "react";
import { motion } from "framer-motion";
import logo from "../assets/logo.png"; // ganti dengan logo kamu
export default function Header() {
// Fungsi untuk menggulir halaman ke bagian paling atas (koordinat y=0)
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth", // Memberikan animasi gulir yang mulus
});
};
return (
<header
style={{
position: "sticky",
top: 0,
width: "100%",
background: "linear-gradient(135deg, #FFFFFF 0%, #FBE9D8 25%, #FB8A8A 50%, #8A3B6F 75%, #83B9FF 100%)",
padding: "10px 0",
boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
zIndex: 1000,
display: "flex",
justifyContent: "center",
alignItems: "center",
height: 80, // tetap tinggi header
userSelect: "none"
}}
>
<motion.img
src={logo}
alt="Fitsion Logo"
style={{
maxHeight: "150px",
// Menambahkan gaya kursor dan userSelect pada logo
cursor: "pointer",
userSelect: "none"
}}
// PENTING: Menambahkan onClick HANYA pada logo
onClick={scrollToTop}
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
/>
</header>
);
} |