Next Claimer - Copy this React, Tailwind Component to your project

Import React, { useState, useRef } from 'react' import { Box, Container, Typography, Button, Card, CardContent, useTheme, Fade, } from '@mui/material' import { styled } from '@mui/system' import { motion, useScroll, useTransform } from 'framer motion' const StyledHero = styled(Box)(({ theme }) => ({ backgroundImage: `url("https://images.unsplash.com/photo 1635776062127 d379bfcba9f8")`, backgroundSize: 'cover', backgroundPosition: 'center', minHeight: '100vh', display: 'flex', alignItems: 'center', position: 'relative', '&::before': { content: '""', position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'linear gradient(45deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%)', }, })) const FeatureCard = styled(Card)(({ theme }) => ({ width: '100%', marginBottom: theme.spacing(8), background: 'rgba(255, 255, 255, 0.95)', backdropFilter: 'blur(10px)', borderRadius: '24px', overflow: 'hidden', boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.15)', })) const GradientButton = styled(Button)(({ theme }) => ({ background: 'linear gradient(45deg, #FF6B6B 30%, #FF8E53 90%)', border: 0, borderRadius: '50px', boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', color: 'white', padding: '12px 32px', transition: 'all 0.3s ease', '&:hover': { transform: 'scale(1.05)', boxShadow: '0 6px 10px 4px rgba(255, 105, 135, .4)', }, })) const NextClaimerSection1 = () => { const theme = useTheme() const [activeFeature, setActiveFeature] = useState(0) const { scrollYProgress } = useScroll() const cardsSectionRef = useRef(null) const features = [ { title: 'Advanced Email Signature Creation', description: 'Create professional email signatures with our intuitive drag and drop builder. Customize fonts, colors, and layouts to match your brand identity.', image: 'https://images.unsplash.com/photo 1557200134 90327ee9fafa', }, { title: 'Smart Template Management', description: 'Access and manage multiple signature templates. Perfect for organizations with different departments or multiple brands.', image: 'https://images.unsplash.com/photo 1460925895917 afdab827c52f', }, { title: 'Analytics Dashboard', description: 'Track signature performance with detailed analytics. Monitor click rates, impression data, and campaign effectiveness in real time.', image: 'https://images.unsplash.com/photo 1551288049 bebda4e38f71', }, ] const y1 = useTransform(scrollYProgress, [0, 1], [0, 500]) const scrollToCards = () => { cardsSectionRef.current.scrollIntoView({ behavior: 'smooth' }) } return ( <Box sx={{ background: '#f8f9fa' }}> {/* Hero Section */} <StyledHero> <Container maxWidth='lg'> <Box position='relative' zIndex={1} textAlign='center' color='white'> <Fade in timeout={1000}> <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1.2 }} > <Typography variant='h1' component='h1' gutterBottom sx={{ fontWeight: 800, background: 'linear gradient(45deg, #FF6B6B 30%, #FF8E53 90%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', }} > nextClaimer </Typography> <Typography variant='h4' gutterBottom sx={{ fontWeight: 300 }}> Transform Your Email Communication </Typography> </motion.div> </Fade> </Box> </Container> </StyledHero> {/* Features Section */} <Container maxWidth='lg' sx={{ py: 12 }} ref={cardsSectionRef}> {features.map((feature, index) => ( <motion.div key={index} initial={{ opacity: 0, y: 100 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.8 }} > <FeatureCard> <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, }} > <Box sx={{ flex: 1, background: `url(${feature.image})`, backgroundSize: 'cover', backgroundPosition: 'center', minHeight: { xs: 300, md: 500 }, }} /> <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', p: 6, }} > <Typography variant='h3' gutterBottom sx={{ fontWeight: 700 }} > {feature.title} </Typography> <Typography variant='h6' sx={{ mb: 4, color: 'text.secondary' }} > {feature.description} </Typography> <GradientButton onClick={() => setActiveFeature(index)} sx={{ alignSelf: 'flex start' }} > Learn More </GradientButton> </Box> </Box> </FeatureCard> </motion.div> ))} </Container> {/* CTA Section */} <Box sx={{ background: 'linear gradient(45deg, #FF6B6B 30%, #FF8E53 90%)', color: 'white', py: 12, position: 'relative', zIndex: 2, }} > <Container maxWidth='lg'> <motion.div style={{ y: y1 }}> <Box textAlign='center'> <Typography variant='h3' gutterBottom sx={{ fontWeight: 700 }}> Ready to Transform Your Email Signature? </Typography> <Button variant='contained' size='large' sx={{ mt: 6, bgcolor: 'white', color: '#FF6B6B', borderRadius: '50px', padding: '12px 32px', fontSize: '1.1rem', '&:hover': { bgcolor: 'rgba(255,255,255,0.9)', transform: 'scale(1.05)', }, }} onClick={scrollToCards} > Get Started Now </Button> </Box> </motion.div> </Container> </Box> </Box> ) } export default NextClaimerSection1 In this code I posted, Ready to Transform Your Email Signature? and the get started now button underneath it comes on top of the other cards. Let's fix this and when we press this button, it scrolls down. I don't know exactly but with this effect, cards like this can come and give information about the product one by one.