updates

.github/workflows/nextjs.yml

@@ -0,0 +1,93 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -1,2 +1,36 @@
-# website
-New website using Next.JS
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

website/app/components/AboutUs.tsx → app/components/AboutUs.tsx

@@ -1,14 +1,13 @@
 import Image from 'next/image';
 import hardware from '../../public/images/aboutusimg.jpeg'
-import ContactUs from './ContactUs';
 
 export default function AboutUs() {
   return (
-    <div id="full-container" className="bg-white select-none font-inter text-black border-2 border-red-500">
+    <div id="full-container" className="bg-white select-none font-inter text-black p-2">
       <h1 className="text-center text-7xl pb-20 pt-10 font-black">About Paragon</h1>
 
       <div className="flex items-start">
-        <div className="border-2 border-green-500 ml-[10%] w-[50%] p-2 relative" id="info">
+        <div className="ml-[10%] w-[50%] p-2 relative" id="info">
           <p className="text-3xl">
             At <span className="text-[#FF4800] font-bold">Paragon Autonomous</span>, we empower communities with cutting-edge drone technology designed to detect and suppress wildfires before they escalate. Our mission is to aid first responders by protecting lives, homes, and wildlife.
           </p>
@@ -29,7 +28,7 @@ export default function AboutUs() {
         />
       </div>
 
-      <div id="flight-path" className="flex flex-wrap justify-center select-none border-2 border-purple-500 mt-4 text-center p-6">
+      <div id="flight-path" className="flex flex-wrap justify-center select-none mt-4 text-center p-6">
   <h1 className="text-6xl p-6 w-full font-black">OUR FLIGHT PATH</h1>
 
   <div className="group rounded-3xl w-[50%] min-w-[300px] p-6 bg-[#D9D9D9] transition-all duration-300 hover:bg-gray-800 m-4 drop-shadow-[0_10px_15px_rgba(0,0,0,0.7)] hover:drop-shadow-[0_15px_20px_rgba(0,0,0,0.9)]">
@@ -60,7 +59,7 @@ export default function AboutUs() {
   </div>
 
   <div className="group rounded-3xl w-[45%] min-w-[300px] p-6 bg-[#D9D9D9] transition-colors duration-300 hover:bg-gray-800 m-4 drop-shadow-[0_10px_15px_rgba(0,0,0,0.7)] hover:drop-shadow-[0_15px_20px_rgba(0,0,0,0.9)]">
-    <h1 className="text-[#FF4800] text-5xl"><b>What's Next?</b></h1>
+    <h1 className="text-[#FF4800] text-5xl"><b>What&aposs Next?</b></h1>
     <br />
     <p className="text-2xl transition-colors duration-300 group-hover:text-white">
     We are expanding partnerships with fire departments, environmental agencies, and emergency teams to scale autonomous wildfire prevention. With continued innovation, we aim to make AI-driven fire detection and suppression the industry standard, protecting more communities and ecosystems.</p>

app/components/ContactUs.tsx

@@ -0,0 +1,126 @@
+'use client';
+import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
+// import emailjs from 'emailjs-com';
+
+type FormData = {
+  name: string;
+  email: string;
+  message: string;
+  category: string;
+};
+
+type ContactUsProps = {
+  onClose: () => void;
+  widthClass?: string;
+};
+
+export default function ContactUs({ onClose, widthClass = 'max-w-2xl' }: ContactUsProps) {
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    email: '',
+    message: '',
+    category: 'Website Error',
+  });
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    // Trigger fade-in transition on mount
+    setIsVisible(true);
+  }, []);
+
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
+  ) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // try {
+    //   await emailjs.send(
+    //     'your_service_id',
+    //     'your_template_id',
+    //     {
+    //       name: formData.name,
+    //       to_email: 'example@paragonautonomous.com',
+    //       from_email: formData.email,
+    //       message: formData.message,
+    //       category: formData.category,
+    //     },
+    //     'your_public_key'
+    //   );
+    //   alert('Message sent successfully!');
+    //   setFormData({ name: '', email: '', message: '', category: 'Website Error' });
+    // } catch (error) {
+    //   console.error('Error sending email:', error);
+    //   alert('Failed to send message.');
+    // }
+  };
+
+  return (
+    <div
+      className={`relative bg-[#FF8C00] p-6 rounded-2xl w-full ${widthClass} mx-auto mt-10 transition-opacity duration-500 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }`}
+    >
+      {/* Close button in top right corner */}
+      <button
+        onClick={onClose}
+        className="absolute top-2 right-2 text-white text-2xl font-bold"
+      >
+        &times;
+      </button>
+      <h2 className="text-white text-xl font-bold mb-4 text-center">Contact Us</h2>
+      <form onSubmit={handleSubmit} className="flex flex-col space-y-4">
+        <div className="flex gap-4">
+          <input
+            type="text"
+            name="name"
+            placeholder="Your Name"
+            value={formData.name}
+            onChange={handleChange}
+            className="p-2 rounded border border-white bg-white text-black w-1/2"
+            required
+          />
+          <input
+            type="email"
+            name="email"
+            placeholder="Your Email"
+            value={formData.email}
+            onChange={handleChange}
+            className="p-2 rounded border border-white bg-white text-black w-1/2"
+            required
+          />
+        </div>
+        <textarea
+          name="message"
+          placeholder="Your Message"
+          value={formData.message}
+          onChange={handleChange}
+          className="p-2 rounded border border-white bg-white text-black h-24"
+          required
+        />
+        <select
+          name="category"
+          value={formData.category}
+          onChange={handleChange}
+          className="p-2 rounded border border-white bg-white text-black"
+        >
+          {["Website Error", "Application Error", "Drone Error", "Business Interest", "Other"].map(
+            (option) => (
+              <option key={option} value={option}>
+                {option}
+              </option>
+            )
+          )}
+        </select>
+        <button
+          type="submit"
+          className="bg-white text-[#FF8C00] font-bold py-2 px-4 rounded hover:bg-gray-200"
+        >
+          Send Message
+        </button>
+      </form>
+    </div>
+  );
+}

website/app/components/FlightPath.tsx → app/components/FlightPath.tsx

@@ -19,7 +19,7 @@ export default function FlightPath() {
                 </div>
                 <div className="grid grid-cols-2 gap-4 m-2">
                     <div className="bg-[#C0C0C0] rounded-3xl p-3">
-                        <h3 className="font-bold text-lg text-[#FF4800]">What's next?</h3>
+                        <h3 className="font-bold text-lg text-[#FF4800]">What&aposs next?</h3>
                         <p>We are expanding partnerships with fire departments, environmental agencies, and emergency teams to scale autonomous wildfire prevention. With continued innovation, we aim to make AI-driven fire detection and suppression the industry standard, protecting more communities and ecosystems</p>
                     </div>
                     <div className="bg-[#C0C0C0] rounded-3xl p-3">

website/app/components/Homepage.tsx → app/components/Homepage.tsx

@@ -6,7 +6,7 @@ export default function Homepage() {
             {/* First Section - Full Screen Background */}
             <section 
                 id="home" 
-                className="h-screen bg-[url('/img/front-image.jpeg')] bg-no-repeat bg-center bg-black/50 bg-blend-overlay bg-cover flex items-center justify-center text-white"
+                className="h-screen bg-[url('/images/front-image.jpeg')] bg-no-repeat bg-center bg-black/50 bg-blend-overlay bg-cover flex items-center justify-center text-white"
             >
                 <h1 className="text-4xl font-bold text-center">A Safer World, Powered By Paragon</h1>
             </section>
@@ -16,7 +16,7 @@ export default function Homepage() {
                 <div className="w-1/2 flex justify-center">
                     <div className="relative h-48 w-48 md:h-96 md:w-96">
                         <Image
-                            src="/img/front-page-fire.png"
+                            src="/images/front-page-fire.png"
                             alt="Front page fire"
                             layout="fill"
                             objectFit="cover"

app/components/Navbar.tsx

@@ -0,0 +1,41 @@
+'use client';
+import { useState } from "react";
+import ContactUs from "./ContactUs"; // adjust the import path as needed
+
+export default function Navbar() {
+  const [showContact, setShowContact] = useState<boolean>(false);
+
+  return (
+    <>
+      <nav className="fixed top-0 left-0 right-0 bg-gray-800 bg-opacity-40 p-4 z-50">
+        <ul className="flex font-bold justify-center text-lg gap-10">
+          <li className="flex font-bold text-[#80B918] text-2xl align-left">PARAGON</li>
+          <li>
+            <a href="#home">Home</a>
+          </li>
+          <li>
+            <a href="#aboutus">About</a>
+          </li>
+          <li>
+            <a href="#partnerships">Partnerships</a>
+          </li>
+          <li>
+            <a href="#products">Products</a>
+          </li>
+          <li className="rounded-lg bg-gradient-to-r from [#FFF200] to [#FF4800]">
+            <button onClick={() => setShowContact(true)}>Get In Touch</button> 
+          </li>
+        </ul>
+      </nav>
+
+      {showContact && (
+        <div className="fixed top-0 left-0 right-0 z-40 flex justify-center items-start pointer-events-auto">
+          {/* mt-16 pushes the modal below the navbar */}
+          <div className="mt-16 ">
+            <ContactUs onClose={() => setShowContact(false)} widthClass="max-w-4xl" />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

website/app/components/Partnerships.tsx → app/components/Partnerships.tsx

@@ -21,7 +21,7 @@ export default function Partnerships() {
                     <p>We Collaborate with fire safety leaders, AI developers, and research institutions to advance wildfire detection technology and optimize fire suppression methods</p>
                 </div>
             </div>
-            <p className="text">"Drone have given us an aerial perspective we never had before- allowing for early detection and smarter resource allocation." - Wildfire Conservation Specialist, Arizona</p>
+            <p className="text">&quotDrone have given us an aerial perspective we never had before- allowing for early detection and smarter resource allocation.&quot - Wildfire Conservation Specialist, Arizona</p>
             <p>Partner with us button</p>
         </section>
     );