File size: 3,301 Bytes
8b105ad |
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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
import React, { useEffect } from "react";
import styled from "styled-components";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import { useNavigate } from "react-router-dom";
// Register ScrollTrigger plugin with GSAP
gsap.registerPlugin(ScrollTrigger);
// Styled Components for Styling
const Section = styled.section`
padding: 5rem 0;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 50vh; /* Full viewport height */
@media(max-width:768px){
height: 60vh;
}
`;
const Container = styled.div`
text-align: center;
`;
const Title = styled.h1`
font-size: 2.5rem;
color: #3f3f3f;
opacity: 0; /* Initially hidden */
transform: translateY(50px); /* Initially moved down */
`;
const Button = styled.button`
margin-top: 2rem;
padding: 1rem 2rem;
font-weight: bold;
background: #3267B9;
color: white;
border-radius: 30px;
border: none;
font-size: 1.125rem;
cursor: pointer;
transform: scale(0.9); /* Initially scaled down */
opacity: 0; /* Initially hidden */
transition: opacity 1s ease-out, transform 1s ease-out 0.5s;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
&:hover {
background: #3f7ad3;
}
`;
const BookDemo = () => {
const navigate = useNavigate(); // For page navigation
useEffect(() => {
// GSAP ScrollTrigger for animating the title
gsap.fromTo(
"#demo-title",
{
opacity: 0,
y: 50, // Initially moved down
},
{
opacity: 1,
y: 0, // Final position
duration: 1,
ease: "power4.out",
scrollTrigger: {
trigger: "#demo-title",
start: "top 80%", // Start the animation when the title hits 80% of the viewport
end: "top 30%", // End the animation when the title hits 30% of the viewport
scrub: true, // Smooth scrolling effect
},
}
);
// GSAP ScrollTrigger for animating the button
gsap.fromTo(
"#demo-button",
{
opacity: 0,
scale: 0.9, // Initially scaled down
},
{
opacity: 1,
scale: 1, // Final scale
duration: 1,
delay: 0.5, // Delay button animation after the title
ease: "power4.out",
scrollTrigger: {
trigger: "#demo-button",
start: "top 80%", // Start the animation when the button hits 80% of the viewport
end: "top 30%", // End the animation when the button hits 30% of the viewport
scrub: true, // Smooth scrolling effect
},
}
);
}, []);
// Button click handler: Redirecting to the contact page
const handleBookDemo = () => {
// Here we use navigate to redirect to the contact page
navigate("/contact", {
state: {
formType: "demo", // Pass some state to pre-select form type
product: "VarDiG SaaS", // Pre-select product
},
});
};
return (
<Section>
<Container>
<Title id="demo-title">
Seems interesting? Book a Demo
</Title>
<Button id="demo-button" onClick={handleBookDemo} data-testid='demo-button'>
Book Demo
</Button>
</Container>
</Section>
);
};
export default BookDemo; |