Spaces:

OneCosmicDev
/

quantum-flux-automation-nexus

Running

App Files Files Community

OneCosmicDev commited on Oct 22

Commit

da32bc7

verified ·

1 Parent(s): 31378f4

can you put some next.js?

Browse files

Files changed (7) hide show

app/components/footer.js +43 -0
app/components/navbar.js +20 -0
app/layout.js +33 -0
app/page.js +28 -0
next.config.js +12 -0
script.js +16 -23
style.css +33 -14

app/components/footer.js ADDED Viewed

	@@ -0,0 +1,43 @@

+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-white py-12 px-4 border-t border-gray-800">
+      <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div>
+          <h3 className="text-teal-400 text-xl mb-4">Sysmotix</h3>
+          <p className="mb-4">Quebec's premier AI automation consultancy helping SMEs scale intelligently.</p>
+          <div className="flex space-x-4">
+            <a href="#" className="text-white hover:text-teal-400">
+              <i data-feather="linkedin"></i>
+            </a>
+            <a href="#" className="text-white hover:text-teal-400">
+              <i data-feather="twitter"></i>
+            </a>
+            <a href="#" className="text-white hover:text-teal-400">
+              <i data-feather="facebook"></i>
+            </a>
+          </div>
+        </div>
+        <div>
+          <h3 className="text-teal-400 text-xl mb-4">Quick Links</h3>
+          <ul>
+            <li><a href="#solutions" className="hover:text-teal-400">Solutions</a></li>
+            <li><a href="#process" className="hover:text-teal-400">Process</a></li>
+            <li><a href="#technology" className="hover:text-teal-400">Technology</a></li>
+            <li><a href="#results" className="hover:text-teal-400">Results</a></li>
+          </ul>
+        </div>
+        <div>
+          <h3 className="text-teal-400 text-xl mb-4">Contact</h3>
+          <ul>
+            <li><a href="mailto:[email protected]" className="hover:text-teal-400">[email protected]</a></li>
+            <li><a href="tel:+15145551234" className="hover:text-teal-400">+1 (514) 555-1234</a></li>
+            <li>Montreal, Quebec</li>
+          </ul>
+        </div>
+      </div>
+      <div className="max-w-6xl mx-auto mt-8 pt-8 border-t border-gray-800 text-sm text-gray-400">
+        &copy; {new Date().getFullYear()} Sysmotix. All rights reserved.
+      </div>
+    </footer>
+  )
+}

app/components/navbar.js ADDED Viewed

	@@ -0,0 +1,20 @@

+'use client'
+export default function Navbar() {
+  return (
+    <nav className="bg-gray-800/80 backdrop-blur-md p-6 fixed w-full top-0 z-50 border-b border-gray-700">
+      <div className="flex justify-between items-center max-w-6xl mx-auto">
+        <div className="text-white font-bold text-xl">
+          <span className="text-teal-400">Sysmotix</span>
+        </div>
+        <ul className="flex space-x-8">
+          <li><a href="#solutions" className="text-white hover:text-teal-400 transition-colors">Solutions</a></li>
+          <li><a href="#process" className="text-white hover:text-teal-400 transition-colors">Process</a></li>
+          <li><a href="#technology" className="text-white hover:text-teal-400 transition-colors">Technology</a></li>
+          <li><a href="#results" className="text-white hover:text-teal-400 transition-colors">Results</a></li>
+          <li><a href="#" className="bg-teal-400 hover:bg-teal-300 text-slate-900 px-4 py-2 rounded-full font-semibold transition-all">Contact Us</a></li>
+        </ul>
+      </div>
+    </nav>
+  )
+}

app/layout.js ADDED Viewed

	@@ -0,0 +1,33 @@

+import './globals.css'
+import Head from 'next/head'
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <Head>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+        <script src="https://unpkg.com/feather-icons"></script>
+        <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
+      </Head>
+      <body className="text-white">
+        <div id="vanta-background" className="vanta-background"></div>
+        {children}
+        <script src="/components/navbar.js"></script>
+        <script src="/components/footer.js"></script>
+        <script src="/script.js"></script>
+        <script dangerouslySetInnerHTML={{__html: `
+          feather.replace();
+          VANTA.NET({
+            el: "#vanta-background",
+            color: 0x102A43,
+            backgroundColor: 0x010A13,
+            points: 12,
+            maxDistance: 20,
+            spacing: 15
+          });
+        `}}></script>
+      </body>
+    </html>
+  )
+}

app/page.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import './style.css'
+export default function Home() {
+  return (
+    <main className="container mx-auto px-4 py-12 max-w-6xl bg-opacity-90 bg-slate-900 rounded-xl shadow-2xl">
+      {/* Hero Section */}
+      <section className="text-center py-20">
+        <h1 className="text-5xl font-bold mb-6">Transform Your Business with <span className="text-teal-400">AI Automation</span></h1>
+        <p className="text-xl mb-8 max-w-2xl mx-auto">Quebec's trusted partner for intelligent workflow automation. Prove the ROI before you commit.</p>
+        <button className="bg-teal-400 hover:bg-teal-300 text-slate-900 font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
+          Get Your Free Pilot
+        </button>
+      </section>
+      {/* Rest of your existing index.html content goes here */}
+      {/* ... */}
+      {/* Final CTA */}
+      <section className="text-center py-20">
+        <h2 className="text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>
+        <p className="text-xl mb-8 max-w-2xl mx-auto">Let's start with a free pilot to prove the value before you commit.</p>
+        <button className="bg-teal-400 hover:bg-teal-300 text-slate-900 font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
+          Get Your Free Pilot
+        </button>
+      </section>
+    </main>
+  )
+}

next.config.js ADDED Viewed

	@@ -0,0 +1,12 @@

+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    domains: ['static.photos'],
+  },
+  experimental: {
+    appDir: true,
+  },
+}
+module.exports = nextConfig

script.js CHANGED Viewed

@@ -1,28 +1,21 @@
-// Smooth scrolling for anchor links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-    anchor.addEventListener('click', function (e) {
-        e.preventDefault();
-        document.querySelector(this.getAttribute('href')).scrollIntoView({
-            behavior: 'smooth'
-        });
-    });
-});
 // Form handling would go here
 document.addEventListener('DOMContentLoaded', () => {
-    // Any initialization code
-});
-// Intersection Observer for scroll animations
-const observer = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-        if (entry.isIntersecting) {
-            entry.target.classList.add('opacity-100', 'translate-y-0');
-            entry.target.classList.remove('opacity-0', 'translate-y-10');
-        }
-    });
-}, { threshold: 0.1 });
-document.querySelectorAll('.animate-on-scroll').forEach(el => {
-    observer.observe(el);
-});

 // Form handling would go here
 document.addEventListener('DOMContentLoaded', () => {
+    // Initialize feather icons
+    if (window.feather) {
+        feather.replace();
+    }
+    // Initialize Vanta.js effect if the element exists
+    if (document.getElementById('vanta-background') && window.VANTA) {
+        VANTA.NET({
+            el: "#vanta-background",
+            color: 0x102A43,
+            backgroundColor: 0x010A13,
+            points: 12,
+            maxDistance: 20,
+            spacing: 15
+        });
+    }
+});

style.css CHANGED Viewed

@@ -1,35 +1,54 @@
-/* Global Styles */
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    line-height: 1.6;
-    color: #f8fafc;
 }
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-    width: 8px;
 }
 ::-webkit-scrollbar-track {
-    background: #0f172a;
 }
 ::-webkit-scrollbar-thumb {
-    background: #334155;
-    border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: #475569;
 }
 /* Animation for floating elements */
 @keyframes float {
-    0% { transform: translateY(0px); }
-    50% { transform: translateY(-10px); }
-    100% { transform: translateY(0px); }
 }
 .floating {
-    animation: float 6s ease-in-out infinite;
-}

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+:root {
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 6, 8, 26;
+  --background-end-rgb: 1, 10, 19;
+}
 body {
+  color: rgb(var(--foreground-rgb));
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  line-height: 1.6;
+}
+.vanta-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
 }
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
+  width: 8px;
 }
 ::-webkit-scrollbar-track {
+  background: #0f172a;
 }
 ::-webkit-scrollbar-thumb {
+  background: #334155;
+  border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
+  background: #475569;
 }
 /* Animation for floating elements */
 @keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
 }
 .floating {
+  animation: float 6s ease-in-out infinite;
+}