leumas-private-shared/src/FiverrGigCard/FiverrGigCard.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useEffect } from 'react';
import { Card, CardContent, Typography, Container, Grid } from '@mui/material';
import { Helmet, HelmetProvider } from 'react-helmet-async';

const FiverrGigCard = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.id = 'fiverr-seller-widget-script-c2b365ca-b271-4447-ae14-ca2f2a8ad3ec';
    script.src = 'https://widgets.fiverr.com/api/v1/seller/bermudezw1008?widget_id=c2b365ca-b271-4447-ae14-ca2f2a8ad3ec';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);

    return () => {
      if (document.getElementById('fiverr-seller-widget-script-c2b365ca-b271-4447-ae14-ca2f2a8ad3ec')) {
        document.body.removeChild(script);
      }
    };
  }, []);

  return (
    <HelmetProvider>
      <Container>
        <Helmet>
          <title>Promote Your Fiverr Gig</title>
          <meta name="description" content="Check out my Fiverr gig for top-notch services!" />
          <meta name="keywords" content="Fiverr, freelance, gig, services" />
          <meta property="og:title" content="Promote Your Fiverr Gig" />
          <meta property="og:description" content="Check out my Fiverr gig for top-notch services!" />
          <meta property="og:image" content="https://your-image-url.com/your-image.jpg" />
        </Helmet>
        <Grid container spacing={4} justifyContent="center">
          <Grid item xs={12} md={6}>
            <Card>
              <CardContent>
                <Typography variant="h5" component="div" gutterBottom>
                  My Fiverr Gig
                </Typography>
                <Typography variant="body2" color="text.secondary" gutterBottom>
                  I offer exceptional services to meet your needs. Whether it's web development, graphic design, or digital marketing, I am here to provide top-notch solutions.
                </Typography>
                <div
                  itemScope
                  itemType="http://schema.org/Person"
                  className="fiverr-seller-widget"
                  style={{ display: 'inline-block' }}
                >
                  <a
                    itemProp="url"
                    href="https://www.fiverr.com/bermudezw1008"
                    rel="nofollow"
                    target="_blank"
                    style={{ display: 'inline-block' }}
                  >
                    <div
                      className="fiverr-seller-content"
                      id="fiverr-seller-widget-content-c2b365ca-b271-4447-ae14-ca2f2a8ad3ec"
                      itemProp="contentURL"
                      style={{ display: 'none' }}
                    ></div>
                    <div id="fiverr-widget-seller-data" style={{ display: 'none' }}>
                      <div itemProp="name">bermudezw1008</div>
                      <div itemScope itemType="http://schema.org/Organization">
                        <span itemProp="name">Fiverr</span>
                      </div>
                      <div itemProp="jobtitle">Seller</div>
                      <div itemProp="description">
                        Hello, my name is Will. I'm a versatile programmer fluent in multiple languages and technologies, including JavaScript, Python, and C++. I specialize in custom API development, seamless integration, and creating dynamic websites. Whether it's coding, automation, or digital assets, I bring precision and innovation to every project. Let's collaborate!
                      </div>
                    </div>
                  </a>
                </div>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Container>
    </HelmetProvider>
  );
};

export default FiverrGigCard;