1
import React from "react";
2
import calendarDay1 from "./calendar-day-1.svg";
3
import chevronDown from "./chevron-down.svg";
4
import clockThree1 from "./clock-three-1.svg";
5
import "./style.css";
6
 
7
export const BackgroundImage = () => {
8
  return (
9
    <div className="background-image">
10
      <div className="webinar-info">
11
        <div className="webinar-details">
12
          <div className="subtitle">LIVE WEBINAR ON</div>
13
 
14
          <p className="title">The Roadmap to Operational Excellence in 2025</p>
15
        </div>
16
 
17
        <div className="date-and-time">
18
          <div className="div">
19
            <img className="img" alt="Calendar day" src={calendarDay1} />
20
 
21
            <div className="div-2">
22
              <div className="text-wrapper">APRIL 27</div>
23
 
24
              <div className="text-wrapper-2">SUNDAY</div>
25
            </div>
26
          </div>
27
 
28
          <div className="div">
29
            <img className="img" alt="Clock three" src={clockThree1} />
30
 
31
            <div className="div-2">
32
              <div className="text-wrapper">11:00 AM</div>
33
 
34
              <div className="text-wrapper-2">PACIFIC TIME</div>
35
            </div>
36
          </div>
37
        </div>
38
 
39
        <button className="button">
40
          <div className="text">Register now</div>
41
        </button>
42
      </div>
43
 
44
      <div className="registration-form">
45
        <div className="form-title">Register Now</div>
46
 
47
        <div className="form-fields">
48
          <div className="name-fields">
49
            <div className="label-text-wrapper">
50
              <div className="label-text">First Name</div>
51
            </div>
52
 
53
            <div className="label-text-wrapper">
54
              <div className="label-text">Last Name</div>
55
            </div>
56
          </div>
57
 
58
          <div className="div-wrapper">
59
            <div className="label-text">Business Email Address</div>
60
          </div>
61
 
62
          <div className="div-wrapper">
63
            <div className="label-text">Your Job Title</div>
64
          </div>
65
 
66
          <div className="div-wrapper">
67
            <div className="label-text">Company Name</div>
68
          </div>
69
 
70
          <div className="webinar-source-field">
71
            <p className="label-text">How did yoy hear about this webinar?</p>
72
 
73
            <img
74
              className="checkbox-no-label"
75
              alt="Chevron down"
76
              src={chevronDown}
77
            />
78
          </div>
79
        </div>
80
 
81
        <div className="consent-fields">
82
          <div className="selection-control">
83
            <div className="checkbox-no-label">
84
              <div className="checkbox-off" />
85
            </div>
86
 
87
            <p className="label">
88
              By submitting this form, I consent to FutureBridge&#39;s Privacy
89
              Policy.*
90
            </p>
91
          </div>
92
 
93
          <div className="selection-control">
94
            <div className="checkbox-no-label">
95
              <div className="checkbox-off" />
96
            </div>
97
 
98
            <p className="label">
99
              I consent to receive communication from FutureBridge. I can change
100
              preferences or unsubscribe anytime.*
101
            </p>
102
          </div>
103
        </div>
104
 
105
        <button className="submit-button">
106
          <div className="text-2">Register</div>
107
        </button>
108
      </div>
109
    </div>
110
  );
111
};