import React from 'react'

import GalleryCard2 from './gallery-card2'
import Question1 from './question1'
import projectStyles from '.style.module.css'
import styles from './home.module.css'

const Home = (props) => {
  return (
    <div className={styles['container']}>
      <div className={styles['header']}></div>
      <div className={styles['hero']}>
        <div
          className={` ${styles['hero1']} ${projectStyles['hero-container']} `}
        >
          <div className={styles['container01']}>
            <h1
              className={` ${styles['hero-heading']} ${projectStyles['heading1']} `}
            >
              Kyle Stevens
            </h1>
            <span
              className={` ${styles['hero-sub-heading']} ${projectStyles['body-large']} `}
            >
              <span>
                <span>
                  <span>
                    Capturing the essence of the 70&apos;s film photography
                  </span>
                  <span>
                    <span
                      dangerouslySetInnerHTML={{
                        __html: ' ',
                      }}
                    />
                  </span>
                </span>
                <span>
                  <span>
                    <span
                      dangerouslySetInnerHTML={{
                        __html: ' ',
                      }}
                    />
                  </span>
                  <span>
                    <span
                      dangerouslySetInnerHTML={{
                        __html: ' ',
                      }}
                    />
                  </span>
                </span>
              </span>
              <span>
                <span>
                  <span>
                    <span
                      dangerouslySetInnerHTML={{
                        __html: ' ',
                      }}
                    />
                  </span>
                  <span>
                    <span
                      dangerouslySetInnerHTML={{
                        __html: ' ',
                      }}
                    />
                  </span>
                </span>
                <span>
                  <span>
                    <span
                      dangerouslySetInnerHTML={{
                        __html: ' ',
                      }}
                    />
                  </span>
                  <span>
                    <span
                      dangerouslySetInnerHTML={{
                        __html: ' ',
                      }}
                    />
                  </span>
                </span>
              </span>
            </span>
            <div className={styles['btn-group']}>
              <button
                name="contact"
                id="contactmain"
                className={` ${styles['hero-button1']} ${projectStyles['button-filled']} `}
              >
                Get In Touch!
              </button>
            </div>
          </div>
        </div>
      </div>
      <div className={styles['features']}>
        <div className={projectStyles['features-container']}>
          <div className={styles['features1']}>
            <div className={styles['container02']}>
              <span className={styles['text14']}>Join the revolution</span>
              <h2
                className={` ${styles['features-heading']} ${projectStyles['heading2']} `}
              >
                Go Retro, Fight The Current.
              </h2>
              <span
                className={` ${styles['features-sub-heading']} ${projectStyles['body-large']} `}
              >
                <span>
                  <span>
                    <span>
                      Experience the nostalgia of film photography with our
                      retro-themed website
                    </span>
                    <span>
                      <span
                        dangerouslySetInnerHTML={{
                          __html: ' ',
                        }}
                      />
                    </span>
                  </span>
                  <span>
                    <span>
                      <span
                        dangerouslySetInnerHTML={{
                          __html: ' ',
                        }}
                      />
                    </span>
                    <span>
                      <span
                        dangerouslySetInnerHTML={{
                          __html: ' ',
                        }}
                      />
                    </span>
                  </span>
                </span>
                <span>
                  <span>
                    <span>
                      <span
                        dangerouslySetInnerHTML={{
                          __html: ' ',
                        }}
                      />
                    </span>
                    <span>
                      <span
                        dangerouslySetInnerHTML={{
                          __html: ' ',
                        }}
                      />
                    </span>
                  </span>
                  <span>
                    <span>
                      <span
                        dangerouslySetInnerHTML={{
                          __html: ' ',
                        }}
                      />
                    </span>
                    <span>
                      <span
                        dangerouslySetInnerHTML={{
                          __html: ' ',
                        }}
                      />
                    </span>
                  </span>
                </span>
              </span>
            </div>
            <div className={styles['container03']}></div>
            <video
              src="https://youtu.be/dQw4w9WgXcQ?si=4-FG2Wvew1WFLO1h"
              poster="https://play.teleporthq.io/static/svg/videoposter.svg"
              autoPlay="true"
              className={styles['video']}
            ></video>
          </div>
        </div>
      </div>
      <div className={styles['gallery']}>
        <div className={styles['container04']}>
          <div className={styles['container05']}>
            <div className={styles['container06']}>
              <GalleryCard2
                rootClassName="rootClassName2"
                imageSrc="https://www.instagram.com/p/CttmmKQoxmX/?img_index=1"
              ></GalleryCard2>
            </div>
            <div className={styles['container07']}>
              <GalleryCard2
                imageSrc="https://www.instagram.com/p/C0hZkrqshbL/?utm_source=ig_web_button_share_sheet&amp;igsh=MzRlODBiNWFlZA=="
                rootClassName="rootClassName3"
              ></GalleryCard2>
            </div>
          </div>
          <div className={styles['container08']}>
            <GalleryCard2
              imageSrc="https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDIzfHxmb29kfGVufDB8fHx8MTYyNjQ0OTY1Mg&amp;ixlib=rb-1.2.1&amp;h=1000"
              rootClassName="rootClassName"
            ></GalleryCard2>
          </div>
        </div>
        <div className={styles['container09']}>
          <GalleryCard2
            imageSrc="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixid=Mnw5MTMyMXwwfDF8c2VhcmNofDE5fHxmb29kfGVufDB8fHx8MTYyNjQ0OTY1Mg&amp;ixlib=rb-1.2.1&amp;h=1000"
            rootClassName="rootClassName4"
          ></GalleryCard2>
        </div>
      </div>
      <div className={styles['pricing']}>
        <div className={projectStyles['pricing-container']}>
          <div className={styles['container10']}>
            <span className={projectStyles['overline']}>
              <span>Pricing</span>
              <br></br>
            </span>
            <h2 className={styles['pricing-heading']}>
              <span
                className={` ${projectStyles['heading2']} ${projectStyles['heading2']} ${projectStyles['heading2']} ${projectStyles['heading2']} ${projectStyles['heading2']} ${projectStyles['heading2']} ${projectStyles['heading2']} `}
              >
                Get in touch for a custom quote!
              </span>
              <br></br>
              <span className={styles['text34']}>
                        or see below for pricing packages!
              </span>
              <br></br>
            </h2>
            <span
              className={` ${styles['pricing-sub-heading']} ${projectStyles['body-large']} `}
            >
              <span>
                <span>
                  Unlock the retro magic with our affordable pricing options
                </span>
              </span>
            </span>
          </div>
          <div className={styles['container11']}>
            <div
              className={` ${projectStyles['free-pricing-card']} ${styles['pricing-card']} `}
            >
              <div className={styles['container12']}>
                <span
                  className={` ${styles['text38']} ${projectStyles['heading3']} `}
                >
                  GOLD PACKAGE
                </span>
                <span className={projectStyles['body-small']}>
                  This package covers your basics, think of it as the no thrills
                  option that&apos;ll get you the essentials.
                </span>
              </div>
              <div className={styles['container13']}>
                <span className={styles['text39']}>£</span>
                <span className={styles['free-plan-price']}>99</span>
              </div>
              <div className={styles['container14']}>
                <div className={styles['container15']}>
                  <span className={styles['text40']}>✔</span>
                  <span className={projectStyles['body-small']}>
                    10 images (digital)
                  </span>
                </div>
                <div className={styles['container16']}>
                  <span className={styles['text41']}>✔</span>
                  <span className={projectStyles['body-small']}>
                    Colour graded and retouched
                  </span>
                </div>
                <div className={styles['container17']}>
                  <span className={styles['text42']}>✔</span>
                  <span className={projectStyles['body-small']}>
                    An hour of shooting
                  </span>
                </div>
                <div className={styles['container18']}>
                  <span className={styles['text43']}>✔</span>
                  <span className={projectStyles['body-small']}>
                    Average 2-3 day turn around
                  </span>
                </div>
              </div>
            </div>
            <div
              className={` ${projectStyles['basic-pricing-card']} ${styles['pricing-card1']} `}
            >
              <div className={styles['container19']}>
                <span
                  className={` ${styles['text44']} ${projectStyles['heading3']} `}
                >
                  PROVIA PACKAGE
                </span>
                <span className={projectStyles['body-small']}>
                  This package is a great value middle ground. you get some nice
                  to haves without spending too much on the luxury stuff, for
                  that, look to your right.
                </span>
              </div>
              <div className={styles['container20']}>
                <span className={styles['text45']}>£</span>
                <span className={styles['basic-plan-pricing']}>229</span>
                <span className={styles['text46']}></span>
              </div>
              <div className={styles['container21']}>
                <div className={styles['container22']}>
                  <span className={styles['text47']}>✔</span>
                  <span>
                    <span
                      className={` ${projectStyles['body-small']} ${projectStyles['body-small']} ${projectStyles['body-small']} `}
                    >
                      25 images (Digital +6x4 prints)
                    </span>
                    <br></br>
                    <span>shot on 35mm film or digital</span>
                    <br></br>
                  </span>
                </div>
                <div className={styles['container23']}>
                  <span className={styles['text53']}>✔</span>
                  <span>Colour graded and retouched</span>
                </div>
                <div className={styles['container24']}>
                  <span className={styles['text54']}>✔</span>
                  <span>Two hours of shooting</span>
                </div>
                <div className={styles['container25']}>
                  <span className={styles['text55']}>✔</span>
                  <span>Average 3-4 day turn around</span>
                </div>
                <div className={styles['container26']}>
                  <span className={styles['text56']}>✔</span>
                  <span>USB copy of the photos</span>
                </div>
              </div>
            </div>
            <div
              className={` ${projectStyles['pro-pricing-card']} ${styles['pricing-card2']} `}
            >
              <div className={styles['container27']}>
                <span
                  className={` ${styles['text57']} ${projectStyles['heading3']} `}
                >
                  <span>RETRACHROME PACKAGE</span>
                  <br></br>
                </span>
                <span className={projectStyles['body-small']}>
                  For the few looking for the best in class when it comes to
                  experience, look no further. this is where the real fun
                  begins.
                </span>
              </div>
              <div className={styles['container28']}>
                <span className={styles['text60']}>£</span>
                <span className={styles['pro-plan-pricing']}>400</span>
              </div>
              <div className={styles['container29']}>
                <div className={styles['container30']}>
                  <span className={styles['text61']}>✔</span>
                  <span>
                     40 Images (Digital + 6x4 prints) shot on medium format
                    film. +digital
                  </span>
                </div>
                <div className={styles['container31']}>
                  <span className={styles['text63']}>✔</span>
                  <span className={projectStyles['body-small']}>
                    Colour Graded and professionally retouched (externally)
                  </span>
                </div>
                <div className={styles['container32']}>
                  <span className={styles['text64']}>✔</span>
                  <span className={projectStyles['body-small']}>
                    Two hours shooting
                  </span>
                </div>
                <div className={styles['container33']}>
                  <span className={styles['text65']}>✔</span>
                  <span className={projectStyles['body-small']}>
                    Average 5-7 Day turn around
                  </span>
                </div>
                <div className={styles['container34']}>
                  <span className={styles['text66']}>✔</span>
                  <span className={projectStyles['body-small']}>
                    USB copy of the photos
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles['banner']}>
        <div
          className={` ${projectStyles['banner-container']} ${styles['banner1']} `}
        >
          <h1
            className={` ${styles['banner-heading']} ${projectStyles['heading2']} `}
          >
            More interested in video? Get in touch for a custom quote!
          </h1>
          <span
            className={` ${styles['banner-sub-heading']} ${projectStyles['body-small']} `}
          >
            <span>
              <span>
                <span>
                  Relive the nostalgia of the 70&apos;s with our retro-themed
                  photography services. Our team of experienced photographers
                  will capture your special moments using vintage film cameras,
                  creating timeless and unique images that will transport you
                  back in time. Whether it&apos;s a wedding, family portrait, or
                  any other occasion, we are here to help you create memories
                  that will last a lifetime.
                </span>
                <span>
                  <span
                    dangerouslySetInnerHTML={{
                      __html: ' ',
                    }}
                  />
                </span>
              </span>
              <span>
                <span>
                  <span
                    dangerouslySetInnerHTML={{
                      __html: ' ',
                    }}
                  />
                </span>
                <span>
                  <span
                    dangerouslySetInnerHTML={{
                      __html: ' ',
                    }}
                  />
                </span>
              </span>
            </span>
            <span>
              <span>
                <span>
                  <span
                    dangerouslySetInnerHTML={{
                      __html: ' ',
                    }}
                  />
                </span>
                <span>
                  <span
                    dangerouslySetInnerHTML={{
                      __html: ' ',
                    }}
                  />
                </span>
              </span>
              <span>
                <span>
                  <span
                    dangerouslySetInnerHTML={{
                      __html: ' ',
                    }}
                  />
                </span>
                <span>
                  <span
                    dangerouslySetInnerHTML={{
                      __html: ' ',
                    }}
                  />
                </span>
              </span>
            </span>
          </span>
          <button
            name="contact"
            id="contact"
            className={` ${styles['banner-button']} ${projectStyles['button-filled']} `}
          >
            Contact
          </button>
        </div>
      </div>
      <div className={styles['faq']}>
        <div className={projectStyles['faq-container']}>
          <div className={styles['faq1']}>
            <div className={styles['container35']}>
              <span className={projectStyles['overline']}>
                <span>FAQ</span>
                <br></br>
              </span>
              <h2
                className={` ${styles['text84']} ${projectStyles['heading2']} `}
              >
                Common questions
              </h2>
              <span
                className={` ${styles['text85']} ${projectStyles['body-large']} `}
              >
                <span>
                  Here are some of the most common questions that we get.
                </span>
                <br></br>
              </span>
            </div>
            <div className={styles['container36']}>
              <Question1
                answer="To purchase prints from our gallery, simply click on the image you are interested in and select the desired size and quantity. Then, proceed to the checkout page to complete your purchase."
                question="How can I purchase prints from your gallery?"
              ></Question1>
              <Question1
                answer="Yes, we offer international shipping. Please note that additional shipping fees may apply for international orders."
                question="Do you offer international shipping?"
              ></Question1>
              <Question1
                answer="We accept all major credit cards, including Visa, Mastercard, American Express, and Discover. We also accept payments through PayPal."
                question="What payment methods do you accept?"
              ></Question1>
              <Question1
                answer="Unfortunately, we do not accept returns or exchanges for prints. However, if your print arrives damaged or there is an issue with your order, please contact our customer support team for assistance."
                question="Can I return or exchange a print?"
              ></Question1>
              <Question1
                answer="At the moment, we do not offer framing services. However, all of our prints are carefully packaged to ensure safe delivery. You can easily find frames for our prints at most home decor stores."
                question="Do you offer framing services?"
              ></Question1>
            </div>
          </div>
        </div>
      </div>
      <div className={styles['footer']}></div>
    </div>
  )
}

export default Home