src/components/Events/index.tsx

import React from "react";

export default function EventContents(): JSX.Element {
    return <>
        <section>
          <div className="container">

            <div className="row margin-second">
              <div className="col-lg-8 offset-lg-2 text-center">
                <h2 className="section-title">CloudStack Events</h2>
                <p className="px18 mt-4">
There’s always plenty of CloudStack Events happening in different
parts of the world. These range from Meet-ups, User Groups to
CloudStack Collaboration Conference events. Each event will feature a
lot of opportunities to learn, collaborate and engage with the
CloudStack community. The CloudStack Collaboration Conferences are
valuable for both developers and users, and are a great way to get
involved with the community.
		</p>
              </div>
            </div>

            <div className="horizontal-card">
              <div className="hc-header">Upcoming Events:</div>
              <div className="row">
                <div className="col-lg-9 pt-3 px-4">
                  <img src="/img/CoC2026.png" alt="" className="events-img events-overview-img"/>
                  <p className="title mt-2">Community over Code 2026</p>
                  <p className="events-info"><img src="img/pin_icon.png" className="me-2" alt=""/>Glascow, Scotland</p>
                  <p className="events-info"><img src="img/calendar_icon.png" className="me-2" alt=""/>October 11-14, 2026</p>
                </div>
                <div className="col-lg-3 px-4 events-btn-margin d-flex justify-content-center justify-content-lg-end align-items-center">
                  <a href="https://web.cvent.com/event/ac71ce47-2b5f-424c-abfe-5b48255315fb/register" target="_blank" rel="noopener noreferrer" className="btn btn-primary me-3">Register</a>
                  <a href="/blog/coceu-2026" className="btn btn-outline-secondary me-3">Read More</a>
                </div>
              </div>
              <div className="row">
                <div className="col-lg-9 pt-3 px-4">
                  <img src="/img/CCC-2026.jpg" alt="" className="events-img events-overview-img"/>
                  <p className="title mt-2">CloudStack Collaboration Conference 2026</p>
                  <p className="events-info"><img src="img/pin_icon.png" className="me-2" alt=""/>Edinburgh, Scotland</p>
                  <p className="events-info"><img src="img/calendar_icon.png" className="me-2" alt=""/>November 18-20, 2026</p>
                </div>
                <div className="col-lg-3 px-4 events-btn-margin d-flex justify-content-center justify-content-lg-end align-items-center">
                  <a href="https://www.eventbrite.com/e/cloudstack-collaboration-conference-2026-tickets-1975705589603?aff=oddtdtcreator" className="btn btn-primary me-3">Register</a>
		  <a href="https://www.cloudstackcollab.org/" target="_blank" className="btn btn-outline-secondary me-3" >Read More</a>
                </div>
              </div>
            </div>

            <div className="horizontal-card">
              <div className="hc-header">Past Events:</div>
              <div className="row">
                <div className="col-lg-9 pt-3 px-4">
                  <img src="/img/CSEUG-2026-05-21.png" alt="" className="events-img events-overview-img"/>
                  <p className="title mt-2">CloudStack European User Group 2026</p>
                  <p className="events-info"><img src="img/pin_icon.png" className="me-2" alt=""/>the Hague, the Netherlands</p>
                  <p className="events-info"><img src="img/calendar_icon.png" className="me-2" alt=""/>May 21, 2026</p>
                </div>
                <div className="col-lg-3 px-4 events-btn-margin d-flex justify-content-center justify-content-lg-end align-items-center">
                  <a href="/blog/cseug26-roundup" target="_blank" rel="noopener noreferrer" className="btn btn-outline-secondary me-3">Read More</a>
                   <a href="https://www.youtube.com/watch?v=GTN-l-B-iPY&list=PLnIKk7GjgFlbrStHohANRr8-IuX4EE1pq" target="_blank" rel="noopener noreferrer" className="btn btn-primary me-3">Watch</a>
                </div>
              </div>
              <div className="row">
                <div className="col-lg-9 pt-3 px-4">
                  <img src="/img/CloudFest2026.png" alt="" className="events-img events-overview-img"/>
                  <p className="title mt-2">Meet Apache CloudStack at CloudFest 2026</p>
                  <p className="events-info"><img src="img/pin_icon.png" className="me-2" alt=""/>Rust, Germany</p>
                  <p className="events-info"><img src="img/calendar_icon.png" className="me-2" alt=""/>March 23-26, 2026</p>
                </div>
                <div className="col-lg-3 px-4 events-btn-margin d-flex justify-content-center justify-content-lg-end align-items-center">
                  <a href="/blog/cloudfest-2026" target="_blank" target="_blank" className="btn btn-outline-secondary me-3" >Read More</a>
                </div>
              </div>
              <div className="row">
                <div className="col-lg-9 pt-3 px-4">
                  <img src="/img/ccc-2025.jpg" alt="" className="events-img events-overview-img"/>
                  <p className="title mt-2">CloudStack Collaboration Conference 2025</p>
                  <p className="events-info"><img src="img/pin_icon.png" className="me-2" alt=""/>Milan, Italy</p>
                  <p className="events-info"><img src="img/calendar_icon.png" className="me-2" alt=""/>November 19-21, 2025</p>
                </div>
                <div className="col-lg-3 px-4 events-btn-margin d-flex justify-content-center justify-content-lg-end align-items-center">
                  <a href="https://www.cloudstackcollab.org/event-roundup-cloudstack-collaboration-conference-2025/" target="_blank" className="btn btn-outline-secondary me-3" >Read More</a>
		  <a href="https://www.youtube.com/playlist?list=PLnIKk7GjgFlZd5FgXpLP1MJmaB9cFesSk" target="_blank" className="btn btn-primary me-3">Watch</a>
                </div>
              </div>
              <div className="row">
                <div className="col-lg-9 pt-3 px-4">
                  <img src="/img/cseug-2025-autumn.png" alt="" className="events-img events-overview-img"/>
                  <p className="title mt-2">Autumn Edition: CloudStack European User Group 2025</p>
                  <p className="events-info"><img src="img/pin_icon.png" className="me-2" alt=""/>London, UK</p>
                  <p className="events-info"><img src="img/calendar_icon.png" className="me-2" alt=""/>September 18th, 2025</p>
                </div>
                <div className="col-lg-3 px-4 events-btn-margin d-flex justify-content-center justify-content-lg-end align-items-center">
                  <a href="/blog/cseug-2025-london" target="_blank" className="btn btn-outline-secondary me-3" >Read More</a>
                  <a href="https://www.youtube.com/playlist?list=PLnIKk7GjgFlYq0GjNqEhYt6UhQT3lH3YB" target="_blank" className="btn btn-primary me-3">Watch</a>
                </div>
              </div>
              <div className="row">
                <div className="col-lg-9 pt-3 px-4">
                  <img src="/img/csiug2025.png" alt="" className="events-img events-overview-img"/>
                  <p className="title mt-2">CloudStack India User Group 2025</p>
                  <p className="events-info"><img src="img/pin_icon.png" className="me-2" alt=""/>Greater Noida, India</p>
                  <p className="events-info"><img src="img/calendar_icon.png" className="me-2" alt=""/>July 11th, 2025</p>
                </div>
                <div className="col-lg-3 px-4 events-btn-margin d-flex justify-content-center justify-content-lg-end align-items-center">
                  <a href="/blog/csiug25-roundup" target="_blank" className="btn btn-outline-secondary me-3" >Read More</a>
                  <a href="https://www.youtube.com/playlist?list=PLnIKk7GjgFlaO1t3mtHeJ_g_MKBQKnfkR" target="_blank" className="btn btn-primary me-3">Watch</a>
                </div>
              </div>
            </div>

            <div className="text-center load-more">
              <a href="/blog/tags/roundup" className="btn btn-outline-secondary">See Past Events</a>
            </div>

          </div>
        </section>
    </>
}