Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
c8018254dd |
311
assets/css/custom.css
Normal file
311
assets/css/custom.css
Normal file
@ -0,0 +1,311 @@
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# General
|
||||
--------------------------------------------------------------*/
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #3E66F8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #5472F9;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .font-heading {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Sections General
|
||||
--------------------------------------------------------------*/
|
||||
section {
|
||||
padding: 80px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-title h2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 3px;
|
||||
background: #3E66F8;
|
||||
bottom: 0;
|
||||
left: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.section-title p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Header
|
||||
--------------------------------------------------------------*/
|
||||
.header {
|
||||
transition: all 0.5s;
|
||||
z-index: 997;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.header.header-scrolled {
|
||||
background: #fff;
|
||||
padding: 15px 0;
|
||||
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header .logo {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.header .logo a {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.header .logo img {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Navigation Menu
|
||||
--------------------------------------------------------------*/
|
||||
.navbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar a, .navbar a:focus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0 10px 30px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #555555;
|
||||
white-space: nowrap;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
|
||||
color: #3E66F8;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Hero Section
|
||||
--------------------------------------------------------------*/
|
||||
.hero {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #3E66F8 0%, #5472F9 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.hero .btn-get-started {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
padding: 10px 30px;
|
||||
border-radius: 0.5rem;
|
||||
transition: 0.5s;
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.hero .btn-get-started:hover {
|
||||
background: #fff;
|
||||
color: #3E66F8;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Services
|
||||
--------------------------------------------------------------*/
|
||||
.services .icon-box {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
|
||||
transition: all 0.3s ease-in-out;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
border-bottom: 3px solid #fff;
|
||||
}
|
||||
|
||||
.services .icon-box:hover {
|
||||
transform: translateY(-10px);
|
||||
border-color: #3E66F8;
|
||||
}
|
||||
|
||||
.services .icon {
|
||||
margin: 0 auto 20px auto;
|
||||
padding-top: 10px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: #eef0ff;
|
||||
}
|
||||
|
||||
.services .icon i {
|
||||
font-size: 36px;
|
||||
line-height: 1;
|
||||
color: #3E66F8;
|
||||
}
|
||||
|
||||
.services .title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.services .title a {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.services .description {
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Contact
|
||||
--------------------------------------------------------------*/
|
||||
.contact .info-box {
|
||||
color: #444444;
|
||||
text-align: center;
|
||||
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
|
||||
padding: 20px 0 30px 0;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.contact .info-box i {
|
||||
font-size: 32px;
|
||||
color: #3E66F8;
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
border: 2px dotted #f0f2ff;
|
||||
}
|
||||
|
||||
.contact .info-box h3 {
|
||||
font-size: 20px;
|
||||
color: #777777;
|
||||
font-weight: 700;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.contact .php-email-form {
|
||||
box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
|
||||
padding: 30px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.contact .php-email-form .form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.contact .php-email-form input, .contact .php-email-form textarea {
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
|
||||
border-color: #3E66F8;
|
||||
}
|
||||
|
||||
.contact .php-email-form button[type="submit"] {
|
||||
background: #3E66F8;
|
||||
border: 0;
|
||||
padding: 10px 30px;
|
||||
color: #fff;
|
||||
transition: 0.4s;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.contact .php-email-form button[type="submit"]:hover {
|
||||
background: #5472F9;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Footer
|
||||
--------------------------------------------------------------*/
|
||||
.footer {
|
||||
background: #fff;
|
||||
padding: 30px 0;
|
||||
font-size: 14px;
|
||||
box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footer .copyright {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer .credits {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Toast Notification */
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1055;
|
||||
}
|
||||
83
assets/js/main.js
Normal file
83
assets/js/main.js
Normal file
@ -0,0 +1,83 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Header scroll class
|
||||
*/
|
||||
const selectHeader = document.querySelector('.header');
|
||||
if (selectHeader) {
|
||||
const headerScrolled = () => {
|
||||
if (window.scrollY > 100) {
|
||||
selectHeader.classList.add('header-scrolled');
|
||||
} else {
|
||||
selectHeader.classList.remove('header-scrolled');
|
||||
}
|
||||
}
|
||||
window.addEventListener('load', headerScrolled);
|
||||
document.addEventListener('scroll', headerScrolled);
|
||||
}
|
||||
|
||||
/**
|
||||
* Contact form submission
|
||||
*/
|
||||
const contactForm = document.querySelector('.php-email-form');
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(this);
|
||||
const action = this.getAttribute('action');
|
||||
|
||||
fetch(action, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showToast('Success', 'Your message has been sent successfully!', 'success');
|
||||
contactForm.reset();
|
||||
} else {
|
||||
showToast('Error', data.error || 'An error occurred. Please try again.', 'danger');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showToast('Error', 'A network error occurred. Please try again.', 'danger');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toast notification handler
|
||||
*/
|
||||
function showToast(title, message, type) {
|
||||
const toastContainer = document.getElementById('toast-container');
|
||||
if (!toastContainer) return;
|
||||
|
||||
const toastId = 'toast-' + Date.now();
|
||||
const toastHTML = `
|
||||
<div id="${toastId}" class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
<strong>${title}:</strong> ${message}
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
toastContainer.insertAdjacentHTML('beforeend', toastHTML);
|
||||
|
||||
const toastElement = document.getElementById(toastId);
|
||||
const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
|
||||
toast.show();
|
||||
|
||||
toastElement.addEventListener('hidden.bs.toast', () => {
|
||||
toastElement.remove();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
381
index.php
381
index.php
@ -1,150 +1,253 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
@ini_set('display_errors', '1');
|
||||
@error_reporting(E_ALL);
|
||||
@date_default_timezone_set('UTC');
|
||||
// mail/MailService.php is required for the contact form.
|
||||
require_once __DIR__ . '/mail/MailService.php';
|
||||
|
||||
$phpVersion = PHP_VERSION;
|
||||
$now = date('Y-m-d H:i:s');
|
||||
// Handle Contact Form Submission
|
||||
if ($_SERVER["REQUEST_METHOD"] == "POST") {
|
||||
// This is an AJAX request
|
||||
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$name = filter_var(trim($_POST["name"]), FILTER_SANITIZE_STRING);
|
||||
$email = filter_var(trim($_POST["email"]), FILTER_VALIDATE_EMAIL);
|
||||
$message = filter_var(trim($_POST["message"]), FILTER_SANITIZE_STRING);
|
||||
$subject = "New Contact Form Message from $name";
|
||||
|
||||
if (empty($name) || empty($email) || empty($message)) {
|
||||
echo json_encode(['success' => false, 'error' => 'Please fill in all fields.']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Use the MailService to send the email.
|
||||
// The recipient is configured in mail/config.php or .env
|
||||
$result = MailService::sendContactMessage($name, $email, $message, null, $subject);
|
||||
|
||||
if ($result['success']) {
|
||||
echo json_encode(['success' => true]);
|
||||
} else {
|
||||
// In a real app, you would log the detailed error.
|
||||
// error_log("MailService Error: " . $result['error']);
|
||||
echo json_encode(['success' => false, 'error' => 'Sorry, we could not send your message at this time.']);
|
||||
}
|
||||
exit;
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>New Style</title>
|
||||
<?php
|
||||
// Read project preview data from environment
|
||||
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
|
||||
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
||||
?>
|
||||
<?php if ($projectDescription): ?>
|
||||
<!-- Meta description -->
|
||||
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
|
||||
<!-- Open Graph meta tags -->
|
||||
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<!-- Twitter meta tags -->
|
||||
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
|
||||
<?php endif; ?>
|
||||
<?php if ($projectImageUrl): ?>
|
||||
<!-- Open Graph image -->
|
||||
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<!-- Twitter image -->
|
||||
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
|
||||
<?php endif; ?>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||
animation: bg-pan 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes bg-pan {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 100%; }
|
||||
}
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--card-bg-color);
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.loader {
|
||||
margin: 1.25rem auto 1.25rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.hint {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap; border: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
code {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
|
||||
<title>Darex</title>
|
||||
<meta name="description" content="Built with Flatlogic Generator">
|
||||
<meta name="keywords" content="darex, innovative solutions, web development, mobile apps, ui/ux design, cloud services, data analytics, custom software, flatlogic generator">
|
||||
|
||||
<!-- Social Media Meta Tags -->
|
||||
<meta property="og:title" content="Darex">
|
||||
<meta property="og:description" content="Built with Flatlogic Generator">
|
||||
<meta property="og:image" content="https://flatlogic-blog-pictures.s3.us-east-1.amazonaws.com/misc/defult-thumbnail.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="https://flatlogic-blog-pictures.s3.us-east-1.amazonaws.com/misc/defult-thumbnail.png">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link href="assets/img/favicon.png" rel="icon">
|
||||
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
|
||||
|
||||
<!-- Vendor CSS Files -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
|
||||
|
||||
<!-- Template Main CSS File -->
|
||||
<link href="assets/css/custom.css?v=<?php echo time(); ?>" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your website…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
|
||||
<!-- ======= Header ======= -->
|
||||
<header id="header" class="header fixed-top d-flex align-items-center">
|
||||
<div class="container d-flex align-items-center justify-content-between">
|
||||
|
||||
<div class="logo">
|
||||
<h1 class="text-light"><a href="index.php"><span>Darex</span></a></h1>
|
||||
</div>
|
||||
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
|
||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||
|
||||
<nav id="navbar" class="navbar">
|
||||
<ul>
|
||||
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
|
||||
<li><a class="nav-link scrollto" href="#about">About</a></li>
|
||||
<li><a class="nav-link scrollto" href="#services">Services</a></li>
|
||||
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
<i class="bi bi-list mobile-nav-toggle"></i>
|
||||
</nav><!-- .navbar -->
|
||||
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||
</footer>
|
||||
</header><!-- End Header -->
|
||||
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero" class="hero d-flex align-items-center">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center">
|
||||
<h1 data-aos="fade-up">Innovative Solutions for a Digital World</h1>
|
||||
<h2 data-aos="fade-up" data-aos-delay="100">We are a team of talented designers making websites with Bootstrap</h2>
|
||||
<a href="#about" class="btn-get-started scrollto" data-aos="fade-up" data-aos-delay="200">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section><!-- End Hero -->
|
||||
|
||||
<main id="main">
|
||||
|
||||
<!-- ======= About Section ======= -->
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>About Us</h2>
|
||||
<p>We are a forward-thinking technology company dedicated to crafting elegant and effective solutions. Our passion is turning complex problems into beautiful, intuitive digital experiences.</p>
|
||||
</div>
|
||||
|
||||
<div class="row content">
|
||||
<div class="col-lg-6">
|
||||
<p>
|
||||
At Darex, we believe in the power of technology to transform businesses. We specialize in creating custom software that meets the unique needs of our clients.
|
||||
</p>
|
||||
<ul>
|
||||
<li><i class="bi bi-check-circle"></i> Custom web and mobile application development.</li>
|
||||
<li><i class="bi bi-check-circle"></i> User-centric UI/UX design and branding.</li>
|
||||
<li><i class="bi bi-check-circle"></i> Scalable cloud architecture and deployment.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 pt-4 pt-lg-0">
|
||||
<p>
|
||||
Our team of experts works collaboratively to deliver high-quality products that drive growth and efficiency. We are committed to excellence and long-term partnerships with our clients.
|
||||
</p>
|
||||
<a href="#contact" class="btn btn-primary">Contact Us</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section><!-- End About Section -->
|
||||
|
||||
<!-- ======= Services Section ======= -->
|
||||
<section id="services" class="services bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>Our Services</h2>
|
||||
<p>We offer a wide range of services to help your business succeed in the digital age.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||||
<div class="icon-box w-100">
|
||||
<div class="icon"><i class="bi bi-briefcase"></i></div>
|
||||
<h4 class="title"><a href="">Web Development</a></h4>
|
||||
<p class="description">Creating powerful, fast, and scalable web applications tailored to your business needs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||||
<div class="icon-box w-100">
|
||||
<div class="icon"><i class="bi bi-card-checklist"></i></div>
|
||||
<h4 class="title"><a href="">UI/UX Design</a></h4>
|
||||
<p class="description">Designing intuitive and beautiful user interfaces that provide an exceptional user experience.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||||
<div class="icon-box w-100">
|
||||
<div class="icon"><i class="bi bi-bar-chart"></i></div>
|
||||
<h4 class="title"><a href="">Data Analytics</a></h4>
|
||||
<p class="description">Turning your data into actionable insights to drive business growth and strategy.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||||
<div class="icon-box w-100">
|
||||
<div class="icon"><i class="bi bi-binoculars"></i></div>
|
||||
<h4 class="title"><a href="">Cloud Solutions</a></h4>
|
||||
<p class="description">Leveraging the power of the cloud for scalable, secure, and reliable infrastructure.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section><!-- End Services Section -->
|
||||
|
||||
<!-- ======= Contact Section ======= -->
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
|
||||
<div class="section-title">
|
||||
<h2>Contact Us</h2>
|
||||
<p>Have a question or want to work with us? Drop us a line.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-12 mt-5 mt-lg-0 d-flex align-items-stretch">
|
||||
<form action="index.php" method="post" role="form" class="php-email-form w-100">
|
||||
<div class="row">
|
||||
<div class="form-group col-md-6">
|
||||
<label for="name">Your Name</label>
|
||||
<input type="text" name="name" class="form-control" id="name" required>
|
||||
</div>
|
||||
<div class="form-group col-md-6">
|
||||
<label for="name">Your Email</label>
|
||||
<input type="email" class="form-control" name="email" id="email" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="name">Message</label>
|
||||
<textarea class="form-control" name="message" rows="10" required></textarea>
|
||||
</div>
|
||||
<div class="my-3">
|
||||
<div class="loading">Loading</div>
|
||||
<div class="error-message"></div>
|
||||
<div class="sent-message">Your message has been sent. Thank you!</div>
|
||||
</div>
|
||||
<div class="text-center"><button type="submit">Send Message</button></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section><!-- End Contact Section -->
|
||||
|
||||
</main><!-- End #main -->
|
||||
|
||||
<!-- ======= Footer ======= -->
|
||||
<footer id="footer" class="footer">
|
||||
<div class="container">
|
||||
<div class="copyright">
|
||||
© Copyright <strong><span>Darex</span></strong>. All Rights Reserved
|
||||
</div>
|
||||
<div class="credits">
|
||||
Built with <a href="https://flatlogic.com/">Flatlogic Generator</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer><!-- End Footer -->
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div id="toast-container" class="toast-container"></div>
|
||||
|
||||
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
|
||||
|
||||
<!-- Vendor JS Files -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Template Main JS File -->
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user