hazmat-suite/index.php

<?php include('_inc/_header-suite-start.php'); ?>

<?php /* START: Pagetitle Content */ ?>
<div class="ch-ggs-web-suite-landing-sections">
	<section class="ch-ggs-web-suite-landing-section ch-ggs-web-suite-landing-section-hero">
		<div class="container">
			<h1 class="ch-ggs-web-suite-landing-hero-title">Ihr Software-Werkzeugkasten für gefährliche Stoffe und Güter</h1>
			<div class="ch-ggs-web-suite-common-content-holder">
				<p class="ch-ggs-web-suite-landing-hero-text">
					Die HazmatSuite stellt sowohl für Experten als auch für Einsteiger verschiedene Software-Tools im Umgang mit gefährlichen Stoffen und Gütern bereit.
				</p>
				<div class="row">
					<div class="col-md-4 col-lg-3">
						<a href="#" class="btn btn-lg w-100 btn-white">
							Jetzt starten
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<div id="ch-ggs-web-suite-landing-nav" class="ch-ggs-web-suite-landing-nav d-none d-md-flex">
		<div class="container">
			<div class="nav navbar p-0">
				<ul class="navbar-nav flex-row" id="navbar-spy-sections">
					<li id="ch-ggs-web-suite-nav-item-01" class="nav-item"><a href="#ch-ggs-web-suite-section-01" class="nav-link py-3 px-3 ml-n3">Überblick <i class="ifc ifc-chevron_down"></i></a></li>
					<li id="ch-ggs-web-suite-nav-item-02" class="nav-item"><a href="#ch-ggs-web-suite-section-02" class="nav-link py-3 px-3">Die <span class="text-uppercase">Hazmat</span> Suite <i class="ifc ifc-chevron_down"></i></a></li>
					<li id="ch-ggs-web-suite-nav-item-03" class="nav-item"><a href="#ch-ggs-web-suite-section-03" class="nav-link py-3 px-3">Die Tools <i class="ifc ifc-chevron_down"></i></a></li>
				</ul>
			</div>
		</div>
	</div>
	<section id="ch-ggs-web-suite-section-01" class="ch-ggs-web-suite-landing-section ch-ggs-web-suite-landing-section-dark">
		<?php include('_inc/_sectionCardsNew.php') ?>
	</section>
	<section id="ch-ggs-web-suite-section-02" class="ch-ggs-web-suite-landing-section ch-ggs-web-suite-landing-section-dark">
		<div class="container">
			<h2 class="ch-ggs-web-suite-landing-section-title ch-ggs-web-suite-landing-section-title-image">
				<img src="assets/img/HAZMATSuite-dark.svg" alt="Logo Hazmatsuite" class="img-fluid" width="284px" height="70px">
				<span class="visually-hidden">Hazmat Suite</span>
			</h2>
			<?php include('_inc/_sectionArticleNew.php') ?>
			<?php include('_inc/_sectionArticleNew.php') ?>
			<?php include('_inc/_sectionArticleNewText.php') ?>
			<a class="ch-ggs-web-suite-cta-box">
				<h2 class="ch-ggs-web-suite-cta-box-title">Jetzt Startguthaben sichern. Eine Suite, alle Tools.</h2>
				<p>
					Während andere noch überlegen, haben wir das Problem schon gelöst. Sie glauben uns nicht? Testen Sie die HazmatSuite und das Potential unserer Gefahrstoff- und Gefahrgut-Essentials.
				</p>
				<div class="row">
					<div class="col-md-6 col-lg-5">
						<div class="btn btn-lg w-100 btn-white ch-ggs-web-suite-cta-box-btn">start now</div>
					</div>
				</div>
			</a>
		</div>
	</section>
	<section id="ch-ggs-web-suite-section-03" class="ch-ggs-web-suite-landing-section">
		<div class="container">
			<?php include('_inc/_sectionArticleNewTextIcon.php') ?>
			<?php include('_inc/_sectionArticleNewTextIcon.php') ?>
		</div>
	</section>
</div>

<?php /* END: Pagetitle Content */ ?>


<?php /* START: Main Includes Content */ ?>

<?php include('_inc/_sectionCards.php') ?>
        		
<section>
	<div class="container">
		<div class="row">
			<div class="<?php echo $GLOBALS['offsetClass'] ?>">
				<h2 class="ch-ggs-web-suite-section-title text-center">Der erste Werkzeugkasten für Gefahrstoff- und Gefahrgut</h2>
			</div>
		</div>
		<?php include('_inc/_sectionArticleLeft.php') ?>
		
		<?php include('_inc/_sectionArticleRight.php') ?>
	</div>
		
</section>


<?php include('_inc/_sectionDark.php') ?>

<?php include('_inc/_sectionPlainCards.php') ?>

<section>
	<div class="container">
		<div class="row">
			<div class="<?php echo $GLOBALS['offsetClass'] ?>">
				<h2>Fragen und Antworten</h2>
				<div id="accordion-group-1" class="accordion accordion-flush ch-ggs-accordion">
					<div class="accordion-item">
						<div class="accordion-header">
							<h3 class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1"
									aria-expanded="true" aria-controls="collapse-1">Funktionen und Vorteile</h3>
							<div id="collapse-1" class="accordion-collapse collapse" data-bs-parent="#accordion-group-1">
								<div class="accordion-body">
									<p>
										Die Vorteile von EasyDGD gegenüber anderen Desktop- oder Web-Applikationen für die Erstellung der Gefahrgut-Dokumentation sprechen für sich: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.
									</p>
									<h4>Subheadline</h4>
									<p>
										Die Vorteile von EasyDGD gegenüber anderen Desktop- oder Web-Applikationen für die Erstellung der Gefahrgut-Dokumentation sprechen für sich: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.
									</p>
								</div>
							</div>
						</div>
					</div>
					<div class="accordion-item">
						<div class="accordion-header">
							<h3 class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2"
									aria-expanded="true" aria-controls="collapse-2">Was kostet ein Abo der Hazmat Suite</h3>
							<div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-group-1">
								<div class="accordion-body">
									<p>
										Die Vorteile von EasyDGD gegenüber anderen Desktop- oder Web-Applikationen für die Erstellung der Gefahrgut-Dokumentation sprechen für sich: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.
									</p>
									<h4>Subheadline</h4>
									<p>
										Die Vorteile von EasyDGD gegenüber anderen Desktop- oder Web-Applikationen für die Erstellung der Gefahrgut-Dokumentation sprechen für sich: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section>
	<div class="container">
		<div class="row">
			<div class="<?php echo $GLOBALS['offsetClass'] ?>">
				<h2>Formularstile</h2>

				<div class="mb-3">
					<label for="form-select" class="form-label">Select</label>
					<select id="form-select" class="form-select" aria-label="Default select example">
						<option selected>Open this select menu</option>
						<option value="1">One</option>
						<option value="2">Two</option>
						<option value="3">Three</option>
					</select>
				</div>



				<div class="mb-3">
					<label for="exampleFormControlInput1" class="form-label">Email address</label>
					<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
				</div>
				<div class="mb-3">
					<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
					<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
				</div>


				<div class="ch-ggs-btns">
					<button class="btn btn-primary">speichern</button>
					<button class="btn btn-outline-primary">abbrechen</button>
				</div>

				<p class="small text-secondary mt-4">
					* Pflichtfeld
				</p>

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



<?php /* END: Main Includes Content */ ?>

<?php include('_inc/_footer-suite-start.php') ?>