Site v1 (#143)

* feat: change font

* feat: SEOConfig

* feat: hero section done

* feat: how it works

* feat: benefits

* feat: testimonials

* feat: video demo

* feat: CTA Card

* feat: footer

* feat: add animations

* responsives

* typo, deactivate testimonials, add gh icon

---------

Co-authored-by: DOZIBE NWABUOKU <101020067+doziben@users.noreply.github.com>

backend/embeddings/index_files.py

@@ -185,6 +185,7 @@ def search(self, query: str, specific_doc: str | None):
                 limit=3,
                 with_payload=True
             )
+            print(results)
             if specific_doc is not None:
                 # Without the clean it won't find the document
                 specific_doc_clean = specific_doc.replace('https://', '').replace('http://', '').replace('/', '_')

site/hooks/useMediaQuery.ts

@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+
+const getMatches = (query: string): boolean => {
+  // Prevents SSR issues
+  if (typeof window !== "undefined") {
+    return window.matchMedia(query).matches;
+  }
+  return false;
+};
+
+export default function useMediaQuery(width: number): boolean {
+  const query = `(min-width: ${width}px)`;
+
+  const [matches, setMatches] = useState<boolean>(getMatches(query));
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+
+  useEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Listen matchMedia
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener("change", handleChange);
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener("change", handleChange);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query]);
+
+  return matches;
+}
+
+// export default function useMediaQuery(width: number) {
+//   const [outcome, setOutcome] = useState<boolean>(true);
+
+//   useEffect(() => {
+//     if (typeof window !== "undefined") {
+//       const getMatch = window?.matchMedia(`max-width: ${width}px`).matches;
+//       setOutcome(getMatch);
+//     }
+//   }, [width]);
+
+//   if (typeof window !== "undefined") {
+//     window.addEventListener("resize", (e) => {
+//       const windowWidth = document.body.clientWidth;
+//       const result = windowWidth >= width;
+
+//       setOutcome(result);
+//     });
+//   }
+
+//   return outcome;
+// }

site/package.json

@@ -13,6 +13,7 @@
     "@types/node": "20.2.5",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
+    "aos": "^2.3.4",
     "autoprefixer": "10.4.14",
     "gray-matter": "^4.0.3",
     "next": "13.4.4",
@@ -22,9 +23,13 @@
     "react-html-parser": "^2.0.2",
     "react-icons": "^4.9.0",
     "react-render-html": "^0.6.0",
+    "react-scroll-parallax": "^3.4.5",
     "remark": "^15.0.1",
     "remark-html": "^16.0.1",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4"
+  },
+  "devDependencies": {
+    "@types/aos": "^3.0.7"
   }
 }

site/pages/_app.tsx

@@ -1,6 +1,21 @@
-import './styles/globals.css'
-import type { AppProps } from 'next/app'
+import "./styles/globals.css";
+import type { AppProps } from "next/app";
+import { ParallaxProvider } from "react-scroll-parallax";
+import { useEffect } from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
+
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  useEffect(() => {
+    AOS.init({});
+    AOS.refresh();
+  });
+
+
+  return (
+    <ParallaxProvider>
+      <Component {...pageProps} />
+    </ParallaxProvider>
+  );
 }

site/pages/components/Benefits.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import Container from "./Container";
+import Image from "next/image";
+
+import ill1 from "../../public/static/bene-1.svg";
+import ill2 from "../../public/static/bene-2.svg";
+import ill3 from "../../public/static/bene-3.svg";
+import ill4 from "../../public/static/bene-4.svg";
+import ill5 from "../../public/static/bene-5.svg";
+import ill6 from "../../public/static/bene-6.svg";
+
+const data = [
+  {
+    icon: ill1,
+    title: "Save time and effort with intelligent analysis.",
+    body: "Focus on what matters.  AIxplora automates tedious analysis, summarizing key points and identifying crucial information in seconds.",
+  },
+  {
+    icon: ill2,
+    title: "Gain deeper understanding of complex information.",
+    body: "AIxplora goes beyond surface-level analysis, revealing hidden patterns and connections within your data.",
+  },
+  {
+    icon: ill3,
+    title: "Make data-driven decisions with confidence",
+    body: "We provide the insights you need, empowering you to make data-driven choices with complete confidence.",
+  },
+  {
+    icon: ill4,
+    title: "Improve collaboration and knowledge sharing",
+    body: "AIxplora Cloud fosters seamless collaboration by allowing teams to share insights and analyze data collectively. ",
+  },
+  {
+    icon: ill5,
+    title: "Enhance customer experience with AI-powered website responses",
+    body: "AIxplora Widget delivers instant, accurate answers to customer queries directly on your website.",
+  },
+  {
+    icon: ill6,
+    title: "Always Learning: AIxplora gets smarter with use.",
+    body: "Over time, the AI engine tailors its analysis to your specific needs and data, providing even more relevant insights. You can always extend the knowledge of AIxplora.",
+  },
+];
+
+export default function Benefits() {
+  return (
+    <section className="benefits-bg">
+      <Container className="py-20 " id="benefits">
+        <div className=" max-w-[33.5rem] mb-8">
+          <p className="font-bold mb-5 gradient-text">BENEFITS</p>
+          <h1 className="mb-5">
+            Unlock the True Potential{" "}
+            <span className="opacity-40">of Your Data</span>
+          </h1>
+          <p className="opacity-50 lg:text-xl">
+            We use advanced AI to unlock hidden insights, summarize key points,
+            and streamline data management.
+          </p>
+        </div>
+
+        <ul className="grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+          {data?.map((benefit, ind) => {
+            return (
+              <li
+                className="flex flex-col gap-3"
+                key={benefit.title}
+                data-aos="fade-up"
+                data-aos-delay={`${ind * 50}`}
+                data-aos-duration="1000"
+              >
+                <figure>
+                  <Image src={benefit.icon} alt={`${benefit.title} icon`} />
+                </figure>
+
+                <h6 className="text-xl font-bold mb-2">{benefit.title}</h6>
+                <p className="opacity-50 leading-loose">{benefit.body}</p>
+              </li>
+            );
+          })}
+        </ul>
+      </Container>
+    </section>
+  );
+}

site/pages/components/CTACard.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Container from "./Container";
+import Image from "next/image";
+import ctaBg from "../../public/static/cta-bg.svg";
+import mac from "../../public/icons/mac-alt.svg";
+import windows from "../../public/icons/windows-alt.svg";
+
+export default function CTACard() {
+  return (
+    <Container className="py-8 ">
+      <section
+        className="cta-bg relative overflow-hidden rounded-[2rem] px-3 py-[2.5rem] lg:py-[5rem]"
+        data-aos="flip-left"
+        data-aos-duration="800"
+      >
+        <div className="flex flex-col justify-center text-center items-center gap-10 relative z-[5]">
+          <h3 className="text-white mx-auto max-w-[31rem] ">
+            <span className="opacity-40">
+              Ready to Extract Meaning from Your Files?
+            </span>{" "}
+            Get Started with <span className="gradient-text">AIxplora.</span>
+          </h3>
+
+          <div className="flex justify-center flex-col gap-3 lg:flex-row lg:items-center">
+            <a href="https://github.com/grumpyp/aixplora">
+              <button className="w-full btn_1_alt">
+                <Image src={mac} alt="mac" />
+                Download for Mac
+              </button>
+            </a>
+
+            <a href="https://www.dropbox.com/scl/fi/jnscprr2lvj1acr88xh09/AIxplora-Setup-0.0.2.exe?rlkey=0cl3xsmgqmzyo8o1rov08gcnl&dl=0">
+              <button className="w-full btn_2_alt">
+                <Image src={windows} alt="windows" />
+                Download for Windows
+              </button>
+            </a>
+          </div>
+        </div>
+
+        <figure className="absolute w-full top-[-50%]">
+          <Image style={{ width: "100%" }} src={ctaBg} alt="bg" />
+        </figure>
+      </section>
+    </Container>
+  );
+}