feat(website): website photos uploaded

apps/website/next.config.js

@@ -2,6 +2,15 @@
 const config = {
   reactStrictMode: true,
 
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
+
   /** Enables hot reloading for local packages without a build step */
   transpilePackages: [
     "@amaxa/api",

apps/website/src/app/(marketing)/_components/header.tsx

@@ -23,15 +23,13 @@ export const Header = () => {
       <NavigationSection />
       <div className="hidden gap-4 md:flex  md:flex-row">
         <Link href={"/apply"} passHref>
-          <button className="rounded-xl border border-black bg-black px-4 py-2 text-sm text-white transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]">
+          <button
+            className="rounded-xl border border-primary bg-primary px-4 py-2 text-sm text-white transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]"
+            disabled
+          >
             Apply now
           </button>
         </Link>
-        <Link href={"/sign-in"} passHref>
-          <button className="rounded-xl border border-black bg-white px-4 py-2 text-sm text-black transition duration-200 hover:shadow-[4px_4px_0px_0px_rgba(0,0,0)]">
-            Login
-          </button>
-        </Link>
       </div>
     </div>
   );

apps/website/src/app/(marketing)/_components/nav.tsx

@@ -15,30 +15,23 @@ export default function NavigationSection() {
     <NavigationMenu className="hidden md:block">
       <NavigationMenuList>
         <NavigationMenuItem>
-          <Link href="/#projects" legacyBehavior passHref>
+          <Link href="/project" legacyBehavior passHref>
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
               Explore Our Projects
             </NavigationMenuLink>
           </Link>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <Link href="/team" legacyBehavior passHref>
+          <Link href="/about-us" legacyBehavior passHref>
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-              Meet the Team
+              How we work
             </NavigationMenuLink>
           </Link>
         </NavigationMenuItem>
         <NavigationMenuItem>
-          <Link href="/stories" legacyBehavior passHref>
-            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-              Read Stories
-            </NavigationMenuLink>
-          </Link>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <Link href="/support-us" legacyBehavior passHref>
+          <Link href="/team" legacyBehavior passHref>
             <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-              Support Us
+              Meet the Team
             </NavigationMenuLink>
           </Link>
         </NavigationMenuItem>

apps/website/src/app/(marketing)/_components/project-content/ProjectContentShell.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+import { cn } from "@amaxa/ui";
+
+import { PersonCard } from "./_components/person-card";
+
+export const ProjectContentShell = (props: {
+  header?: {
+    titile: string;
+  };
+  content: string[];
+  people?: {
+    name: string;
+    role: string;
+    image: string;
+  }[];
+  images?: string[];
+}) => {
+  return (
+    <div>
+      <div className="items-start">
+        <div className="container px-4 md:px-6">
+          {props.header && (
+            <h1 className="text-5xl font-bold">{props.header.titile}</h1>
+          )}
+          {props.images && (
+            <div className="relative mx-auto grid h-[300px] w-full max-w-7xl grid-cols-1 gap-4 p-10 md:grid-cols-3">
+              {props.images.map((image) => (
+                <ImageComponent image={image} />
+              ))}
+            </div>
+          )}
+          <div className="grid w-full gap-8">
+            {props.content.map((content) => (
+              <div className="flex flex-col justify-center space-y-4">
+                <div className="space-y-2">
+                  <p className="text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed ">
+                    {content}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+          {props.people && (
+            <div className="py-6">
+              <h2 className="py-3 text-3xl font-bold">Meet the Team</h2>
+              <div className="grid grid-cols-3 grid-rows-3">
+                {props.people.map((person) => (
+                  <PersonCard
+                    name={person.name}
+                    role={person.role}
+                    image={person.image}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ImageComponent = ({ image }: { image: string }) => {
+  return (
+    <motion.img
+      layoutId={`image-${image}-image`}
+      src={image}
+      height="500"
+      width="500"
+      className={cn(
+        "absolute inset-0 h-full w-full object-cover object-top transition duration-200",
+      )}
+      alt="thumbnail"
+    />
+  );
+};