Build a responsive website using PHP and Next.js for DiekerIT, showcasing their expertise in IT services, with a focus on Microsoft products, solutions, and processes.

DiekerIT_website/components/card.php

@@ -0,0 +1,16 @@
+```php
+<?php
+function createCard($title, $description, $image) {
+    return '
+    <div class="card">
+        <img src="'.$image.'" alt="'.$title.'" class="card-img-top">
+        <div class="card-body">
+            <h5 class="card-title">'.$title.'</h5>
+            <p class="card-text">'.$description.'</p>
+            <a href="#" class="btn btn-primary">Learn More</a>
+        </div>
+    </div>
+    ';
+}
+?>
+```

DiekerIT_website/components/carousel.php

@@ -0,0 +1,37 @@
+```php
+<?php
+$carouselImages = array(
+    "assets/images/banner.jpg",
+    "assets/images/about.jpg",
+    "assets/images/services.jpg",
+    "assets/images/contact.jpg"
+);
+?>
+
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+    <ol class="carousel-indicators">
+        <?php
+        for ($i = 0; $i < count($carouselImages); $i++) {
+            echo '<li data-target="#carouselExampleIndicators" data-slide-to="' . $i . '"' . ($i == 0 ? ' class="active"' : '') . '></li>';
+        }
+        ?>
+    </ol>
+    <div class="carousel-inner">
+        <?php
+        for ($i = 0; $i < count($carouselImages); $i++) {
+            echo '<div class="carousel-item' . ($i == 0 ? ' active' : '') . '">';
+            echo '<img class="d-block w-100" src="' . $carouselImages[$i] . '" alt="Slide ' . ($i + 1) . '">';
+            echo '</div>';
+        }
+        ?>
+    </div>
+    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="sr-only">Previous</span>
+    </a>
+    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="sr-only">Next</span>
+    </a>
+</div>
+```

DiekerIT_website/components/footer.php

@@ -0,0 +1,23 @@
+```php
+<?php
+echo '<footer id="footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6">
+                <h5>About DiekerIT</h5>
+                <p>DiekerIT, spearheaded by Robin Dieker, a seasoned Microsoft expert, is a leading IT services company based in Germany. Currently affiliated with Crafting IT, Robin leverages his extensive experience and proficiency to elevate our offerings. Being a former Microsoft employee, Robin possesses unparalleled knowledge in Microsoft products, solutions, and processes.</p>
+            </div>
+            <div class="col-md-6">
+                <h5>Our Services</h5>
+                <p>Our company specializes in infrastructure and client monitoring, backup solutions, and network monitoring. We primarily focus on Microsoft products, client management, and infrastructure monitoring.</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <p class="copyright">© '.date("Y").' DiekerIT. All rights reserved.</p>
+            </div>
+        </div>
+    </div>
+</footer>';
+?>
+```

DiekerIT_website/components/form.php

@@ -0,0 +1,23 @@
+```php
+<div id="contactForm" class="contact-form">
+    <form action="/pages/api/contact.js" method="post">
+        <div class="form-group">
+            <label for="name">Name</label>
+            <input type="text" class="form-control" id="name" name="name" required>
+        </div>
+        <div class="form-group">
+            <label for="email">Email</label>
+            <input type="email" class="form-control" id="email" name="email" required>
+        </div>
+        <div class="form-group">
+            <label for="message">Message</label>
+            <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
+        </div>
+        <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+</div>
+<script src="/js/main.js"></script>
+<script>
+    document.querySelector('#contactForm form').addEventListener('submit', submitContactForm);
+</script>
+```

DiekerIT_website/components/header.php

@@ -0,0 +1,24 @@
+```php
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?php echo $siteTitle; ?></title>
+    <meta name="description" content="<?php echo $siteDescription; ?>">
+    <link rel="stylesheet" href="/css/styles.css">
+    <link rel="stylesheet" href="/css/responsive.css">
+</head>
+<body>
+    <header>
+        <div id="navbar">
+            <?php include 'navbar.php'; ?>
+        </div>
+        <div class="header-content">
+            <img src="<?php echo $siteLogo; ?>" alt="DiekerIT Logo">
+            <h1><?php echo $siteTitle; ?></h1>
+            <p><?php echo $siteDescription; ?></p>
+        </div>
+    </header>
+    <main id="mainContent">
+```

DiekerIT_website/components/modal.php

@@ -0,0 +1,28 @@
+```php
+<div class="modal fade" id="siteModal" tabindex="-1" role="dialog" aria-labelledby="siteModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="siteModalLabel"></h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <!-- Modal content will be loaded here -->
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function showModal(title, content) {
+    document.getElementById('siteModalLabel').innerText = title;
+    document.querySelector('.modal-body').innerHTML = content;
+    $('#siteModal').modal('show');
+  }
+</script>
+```

DiekerIT_website/components/navbar.php

@@ -0,0 +1,31 @@
+```php
+<?php
+$siteTitle = "DiekerIT";
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/styles.css">
+    <link rel="stylesheet" href="../css/responsive.css">
+    <title><?php echo $siteTitle; ?></title>
+</head>
+<body>
+    <nav id="navbar">
+        <div class="nav-wrapper">
+            <a href="../pages/home.php" class="brand-logo"><?php echo $siteTitle; ?></a>
+            <ul id="nav-mobile" class="right hide-on-med-and-down">
+                <li><a href="../pages/home.php">Home</a></li>
+                <li><a href="../pages/about.php">About</a></li>
+                <li><a href="../pages/services.php">Services</a></li>
+                <li><a href="../pages/contact.php">Contact</a></li>
+            </ul>
+        </div>
+    </nav>
+    <script src="../js/main.js"></script>
+    <script src="../js/responsive.js"></script>
+</body>
+</html>
+```

DiekerIT_website/components/sidebar.php

@@ -0,0 +1,23 @@
+```php
+<?php
+$siteTitle = "DiekerIT";
+$siteDescription = "DiekerIT, spearheaded by Robin Dieker, a seasoned Microsoft expert, is a leading IT services company based in Germany. Currently affiliated with Crafting IT, Robin leverages his extensive experience and proficiency to elevate our offerings. Being a former Microsoft employee, Robin possesses unparalleled knowledge in Microsoft products, solutions, and processes. Our company specializes in infrastructure and client monitoring, backup solutions, and network monitoring. We primarily focus on Microsoft products, client management, and infrastructure monitoring.";
+?>
+
+<div id="sidebar">
+    <div class="sidebar-brand">
+        <h2><?php echo $siteTitle; ?></h2>
+    </div>
+
+    <div class="sidebar-menu">
+        <ul>
+            <li><a href="home.php" class="active">Home</a></li>
+            <li><a href="about.php">About</a></li>
+            <li><a href="services.php">Services</a></li>
+            <li><a href="contact.php">Contact</a></li>
+        </ul>
+    </div>
+</div>
+
+<script src="../js/sidebar.js"></script>
+```

DiekerIT_website/css/responsive.css

@@ -0,0 +1,65 @@
+/* Responsive CSS for DiekerIT Website */
+
+/* For devices smaller than 600px */
+@media only screen and (max-width: 600px) {
+    body {
+        font-size: 16px;
+    }
+
+    #navbar, #sidebar {
+        display: none;
+    }
+
+    #mainContent {
+        margin: 0;
+        width: 100%;
+    }
+
+    #serviceCards .card {
+        width: 100%;
+    }
+}
+
+/* For devices larger than 600px to 992px */
+@media only screen and (min-width: 601px) and (max-width: 992px) {
+    body {
+        font-size: 18px;
+    }
+
+    #navbar {
+        display: block;
+    }
+
+    #sidebar {
+        display: none;
+    }
+
+    #mainContent {
+        margin-left: 60px;
+        width: calc(100% - 60px);
+    }
+
+    #serviceCards .card {
+        width: calc(50% - 20px);
+    }
+}
+
+/* For devices larger than 992px */
+@media only screen and (min-width: 993px) {
+    body {
+        font-size: 20px;
+    }
+
+    #navbar, #sidebar {
+        display: block;
+    }
+
+    #mainContent {
+        margin-left: 220px;
+        width: calc(100% - 220px);
+    }
+
+    #serviceCards .card {
+        width: calc(33.33% - 20px);
+    }
+}

DiekerIT_website/css/styles.css

@@ -0,0 +1,95 @@
+/* General Styles */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+}
+
+.container {
+    width: 80%;
+    margin: auto;
+    overflow: hidden;
+}
+
+/* Header Styles */
+#navbar {
+    background-color: #333;
+    color: #fff;
+    padding: 10px 0;
+}
+
+#navbar a {
+    color: #fff;
+    text-decoration: none;
+    margin: 0 15px;
+}
+
+/* Sidebar Styles */
+#sidebar {
+    background-color: #333;
+    color: #fff;
+    padding: 15px;
+    width: 25%;
+    float: left;
+}
+
+/* Main Content Styles */
+#mainContent {
+    float: right;
+    width: 70%;
+    padding: 20px;
+}
+
+/* Footer Styles */
+#footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    clear: both;
+}
+
+/* Contact Form Styles */
+#contactForm {
+    background-color: #fff;
+    padding: 15px;
+}
+
+/* Service Cards Styles */
+#serviceCards {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.card {
+    background-color: #fff;
+    margin: 15px;
+    padding: 20px;
+    width: calc(33.33% - 30px);
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .container {
+        width: 95%;
+    }
+
+    #sidebar,
+    #mainContent {
+        width: 100%;
+        float: none;
+    }
+
+    .card {
+        width: calc(50% - 30px);
+    }
+}
+
+@media (max-width: 480px) {
+    .card {
+        width: 100%;
+    }
+}