File size: 2,704 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import React from "react";
import { motion } from "framer-motion";
import googlePlay from "../assets/gp badge.png";
import appStore from "../assets/apple badge.png";
export default function HeroDownloadSection() {
return (
<section
style={{
marginTop: 20,
background: "linear-gradient(135deg, #FFFFFF 0%, #FBE9D8 25%, #FB8A8A 50%, #8A3B6F 75%, #83B9FF 100%)",
color: "white",
textAlign: "center",
padding: "130px 20px",
borderRadius: "20px",
boxShadow: "0 10px 30px rgba(0,0,0,0.1)",
fontFamily: "'Poppins', sans-serif",
}}
>
{/* Hero Title */}
<motion.h1
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
style={{
fontSize: "64px",
fontWeight: "900",
marginBottom: "15px",
lineHeight: 1.1,
textTransform: "uppercase",
letterSpacing: "2px",
userSelect: "none"
}}
>
YOUR STYLE, <br />
VISUALIZED
</motion.h1>
{/* Sub-Headline */}
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4, duration: 0.8 }}
style={{
fontSize: "20px",
fontWeight: "400",
marginBottom: "40px",
maxWidth: "600px",
marginLeft: "auto",
marginRight: "auto",
userSelect: "none"
}}
>
Download sekarang dan wujudkan penampilan impianmu!
</motion.p>
{/* Download Badges */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8, duration: 0.6 }}
style={{
display: "flex",
justifyContent: "center",
gap: "20px",
flexWrap: "wrap",
userSelect: "none"
}}
>
<a
href="https://play.google.com/store/apps/details?id=YOUR_APP_ID"
target="_blank"
rel="noreferrer"
>
<motion.img
src={googlePlay}
alt="Google Play"
style={{ height: 60 }}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.3 }}
/>
</a>
<a
href="https://apps.apple.com/app/idYOUR_APP_ID"
target="_blank"
rel="noreferrer"
>
<motion.img
src={appStore}
alt="App Store"
style={{ height: 60 }}
whileHover={{ scale: 1.05 }}
transition={{ duration: 0.3 }}
/>
</a>
</motion.div>
</section>
);
}
|