diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..2ceaed3 --- /dev/null +++ b/assets/css/custom.css @@ -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; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..0d1a09b --- /dev/null +++ b/assets/js/main.js @@ -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 = ` + + `; + + 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(); + }); + } + +}); diff --git a/index.php b/index.php index 7205f3d..a44cfa5 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,253 @@ 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; + } +} ?> - + + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + Darex + + + + + + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… + + +
- + + + +
+
+
+
+

Innovative Solutions for a Digital World

+

We are a team of talented designers making websites with Bootstrap

+ Get Started +
+
+
+
+ +
+ + +
+
+ +
+

About Us

+

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.

+
+ +
+
+

+ 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. +

+
    +
  • Custom web and mobile application development.
    • +
  • User-centric UI/UX design and branding.
    • +
  • Scalable cloud architecture and deployment.
    • +
+
+
+

+ 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. +

+ Contact Us +
+
+ +
+
+ + +
+
+ +
+

Our Services

+

We offer a wide range of services to help your business succeed in the digital age.

+
+ +
+
+
+
+

Web Development

+

Creating powerful, fast, and scalable web applications tailored to your business needs.

+
+
+ +
+
+
+

UI/UX Design

+

Designing intuitive and beautiful user interfaces that provide an exceptional user experience.

+
+
+ +
+
+
+

Data Analytics

+

Turning your data into actionable insights to drive business growth and strategy.

+
+
+ +
+
+
+

Cloud Solutions

+

Leveraging the power of the cloud for scalable, secure, and reliable infrastructure.

+
+
+ +
+ +
+
+ + +
+
+ +
+

Contact Us

+

Have a question or want to work with us? Drop us a line.

+
+ +
+ +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
Loading
+
+
Your message has been sent. Thank you!
+
+
+
+
+ +
+ +
+
+ +
+ + + + + +
+ + + + + + + + + - + + \ No newline at end of file