A lot... again

IhsenBouallegue · Jul 3, 2024 · 3ca8fef · 3ca8fef
1 parent 86ceee0
commit 3ca8fef
Show file tree

Hide file tree

Showing 18 changed files with 260 additions and 123 deletions.
diff --git a/customtypes/sponsors/index.json b/customtypes/sponsors/index.json
@@ -34,13 +34,11 @@
                 "label": "Category",
                 "placeholder": "",
                 "options": [
-                  "TUDSaT Sponsors",
                   "TRACE Prime Sponsor",
-                  "TRACE Sponsors",
                   "RAPID Prime Sponsor",
-                  "RAPID Sponsors"
-                ],
-                "default_value": "TUDSaT Sponsors"
+                  "Our Sponsors",
+                  "Our Academic Partners"
+                ]
               }
             },
             "logo": {

diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
+    "@icons-pack/react-simple-icons": "^9.6.0",
     "@prismicio/client": "^7.4.1",
     "@prismicio/next": "^1.5.0",
     "@prismicio/react": "^2.7.4",

diff --git a/prismicio-types.d.ts b/prismicio-types.d.ts
@@ -394,17 +394,14 @@ export interface SponsorsDocumentDataSponsorsItem {
    *
    * - **Field Type**: Select
    * - **Placeholder**: *None*
-   * - **Default Value**: TUDSaT Sponsors
    * - **API ID Path**: sponsors.sponsors[].category
    * - **Documentation**: https://prismic.io/docs/field#select
    */
   category: prismic.SelectField<
-    | "TUDSaT Sponsors"
     | "TRACE Prime Sponsor"
-    | "TRACE Sponsors"
     | "RAPID Prime Sponsor"
-    | "RAPID Sponsors",
-    "filled"
+    | "Our Sponsors"
+    | "Our Academic Partners"
   >;
 
   /**
@@ -858,6 +855,66 @@ export interface HeroSliceDefaultPrimary {
    * - **Documentation**: https://prismic.io/docs/field#key-text
    */
   body: prismic.KeyTextField;
+
+  /**
+   * CTA Primary Text field in *Hero → Default → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: hero.default.primary.cta_primary_text
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  cta_primary_text: prismic.KeyTextField;
+
+  /**
+   * CTA Primary Link field in *Hero → Default → Primary*
+   *
+   * - **Field Type**: Link
+   * - **Placeholder**: *None*
+   * - **API ID Path**: hero.default.primary.cta_primary_link
+   * - **Documentation**: https://prismic.io/docs/field#link-content-relationship
+   */
+  cta_primary_link: prismic.LinkField;
+
+  /**
+   * CTA Secondary Text field in *Hero → Default → Primary*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: *None*
+   * - **API ID Path**: hero.default.primary.cta_secondary_text
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  cta_secondary_text: prismic.KeyTextField;
+
+  /**
+   * CTA Secondary Link field in *Hero → Default → Primary*
+   *
+   * - **Field Type**: Link
+   * - **Placeholder**: *None*
+   * - **API ID Path**: hero.default.primary.cta_secondary_link
+   * - **Documentation**: https://prismic.io/docs/field#link-content-relationship
+   */
+  cta_secondary_link: prismic.LinkField;
+
+  /**
+   * Background Image 1 field in *Hero → Default → Primary*
+   *
+   * - **Field Type**: Image
+   * - **Placeholder**: *None*
+   * - **API ID Path**: hero.default.primary.background_image_1
+   * - **Documentation**: https://prismic.io/docs/field#image
+   */
+  background_image_1: prismic.ImageField<never>;
+
+  /**
+   * Background Image 2 field in *Hero → Default → Primary*
+   *
+   * - **Field Type**: Image
+   * - **Placeholder**: *None*
+   * - **API ID Path**: hero.default.primary.background_image_2
+   * - **Documentation**: https://prismic.io/docs/field#image
+   */
+  background_image_2: prismic.ImageField<never>;
 }
 
 /**

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -10,7 +10,7 @@ export default async function Footer() {
   const footer = await client.getSingle("footer");
 
   return (
-    <footer className="mt-14 sm:mt-16 md:mt-20 lg:mt-24 p-4 sm:p-6 md:p-8 lg:p-10 bg-primary text-secondary-foreground flex items-center justify-between">
+    <footer className="mt-14 sm:mt-16 md:mt-20 lg:mt-24 p-4 sm:p-6 bg-primary text-secondary-foreground flex items-center justify-between">
       <Image src="tudsat_logo.svg" alt="logo" width={52} height={52} />
       <nav>
         <ul className="flex">
@@ -36,6 +36,7 @@ export default async function Footer() {
             {social.social_platform === "instagram" && <Icons.instagram />}
             {social.social_platform === "linkedin" && <Icons.linkedin />}
             {social.social_platform === "youtube" && <Icons.youtube />}
+            {social.social_platform === "discord" && <Icons.discord />}
           </PrismicNextLink>
         ))}
       </div>

diff --git a/src/components/header-links.tsx b/src/components/header-links.tsx
@@ -18,8 +18,7 @@ export function MainNav({ items }: { items: Content.HeaderDocumentDataNavigation
   return (
     <div className="flex gap-6 md:gap-10">
       <Link href="/" className="hidden items-center space-x-2 md:flex">
-        <Image src="tudsat_logo.svg" alt="logo" width={52} height={52} />
-        <span className="hidden font-bold sm:inline-block sm:text-2xl">{siteConfig.name}</span>
+        <Image className="p-2" src="tudsat_logo.svg" alt="logo" width={92} height={92} />
       </Link>
       {items?.length ? (
         <nav className="hidden gap-6 md:flex">

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -1,35 +1,17 @@
 import { cn } from "@/lib/utils";
+import { createClient } from "@/prismicio";
 import Link from "next/link";
-import { buttonVariants } from "./ui/button";
 import { MainNav } from "./header-links";
-import { createClient } from "@/prismicio";
-import { SliceZone } from "@prismicio/react";
-import { components } from "@/slices";
-import { SubMenuDocument } from "../../prismicio-types";
-import { isFilledRelatedData } from "@/lib/isFilledRelatedData";
+import { buttonVariants } from "./ui/button";
 
 export default async function Header() {
   const client = createClient();
-  const header = await client.getSingle("header", { fetchLinks: ["navigation.child_menu"] });
-  const layout = await getLayoutData();
-  // console.log(layout.data.slices[0]?.primary.sub_menu.data.slices[1].primary);
+  const header = await client.getSingle("header");
 
   return (
     <header className="container z-40 relative">
       <div className="flex h-20 items-center justify-between py-6">
         <MainNav items={header.data.navigation} />
-        {/* <SliceZone slices={layout.data.slices} components={components} /> */}
-        {/* {layout.data.slices.map((slice) => (
-          <div>
-            {slice.primary.label}
-            {slice.variation === "withSubMenu" &&
-              isFilledRelatedData(slice.primary.sub_menu, "sub_menu", "slices") &&
-              isSubmenu(slice.primary.sub_menu) &&
-              slice.primary.sub_menu.data.slices.map((sub_menu_item) => (
-                <div>{sub_menu_item.primary.label}</div>
-              ))}
-          </div>
-        ))} */}
         <nav>
           <Link
             href="/membership"
@@ -42,50 +24,3 @@ export default async function Header() {
     </header>
   );
 }
-
-const isSubmenu = (submenu: object): submenu is SubMenuDocument => {
-  return (submenu as SubMenuDocument).data !== undefined;
-};
-
-export async function getLayoutData() {
-  const client = createClient();
-
-  const layoutData = await client.getSingle("layout", {
-    graphQuery: `{
-      layout {
-        ...layoutFields
-        slices {
-          ...on menu_item {
-            variation {
-              ...on default {
-                primary {
-                  ...primaryFields
-                }
-              }
-              ...on withSubMenu {
-                primary {
-                  label
-                  sub_menu {
-                    slices {
-                      ...on sub_menu_item {
-                      variation {
-                        ...on default {
-                          primary {
-                              ...primaryFields
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }`,
-  });
-
-  return layoutData;
-}
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -29,6 +29,7 @@ import {
   Linkedin,
   Mail,
 } from "lucide-react";
+import { SiDiscord, SiInstagram, SiLinkedin, SiX, SiYoutube } from "@icons-pack/react-simple-icons";
 
 export type Icon = LucideIcon;
 
@@ -71,11 +72,12 @@ export const Icons = {
       ></path>
     </svg>
   ),
-  twitter: Twitter,
   check: Check,
-  instagram: Instagram,
-  youtube: Youtube,
-  linkedin: Linkedin,
+  x: SiX,
+  instagram: SiInstagram,
+  youtube: SiYoutube,
+  linkedin: SiLinkedin,
+  discord: SiDiscord,
   mail: Mail,
 };
 

diff --git a/src/components/mobile-nav.tsx b/src/components/mobile-nav.tsx
@@ -62,11 +62,16 @@ export function MobileNav({ items }: { items: Content.HeaderDocumentDataNavigati
       </SheetTrigger>
       <SheetContent side="left" className="pr-0">
         <Link href="/" className="flex items-center" onClick={() => setOpen(false)}>
-          <Image className="mr-2 h-4 w-4" src="tudsat_logo.svg" alt="logo" width={24} height={24} />
-          <span className="font-bold">{siteConfig.name}</span>
+          <Image
+            className="ml-4 h-20 w-20"
+            src="tudsat_logo.svg"
+            alt="logo"
+            width={48}
+            height={48}
+          />
         </Link>
         <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
-          <div className="flex flex-col space-y-3">
+          <div className="flex flex-col space-y-6">
             {items?.map(
               (item) =>
                 // biome-ignore lint/correctness/useJsxKeyInIterable: <explanation>

diff --git a/src/components/starry-sky-canvas.tsx b/src/components/starry-sky-canvas.tsx
@@ -6,35 +6,26 @@ import { useRef } from "react";
 
 export default function StarrySkyCanvas() {
   return (
-    <div className="fixed inset-x-0 -z-20 h-screen">
-      <Canvas dpr={[1, 2]} gl={{ alpha: true }} shadows>
-        <PerspectiveCamera makeDefault position={[0, 0, 10]} />
+    <div className="fixed -z-50 h-screen w-screen">
+      <Canvas>
         <StarsCanvas />
-        <hemisphereLight intensity={0.5} />
-        <directionalLight position={[0, 2, 5]} castShadow intensity={1} />
       </Canvas>
     </div>
   );
 }
 
 function StarsCanvas() {
-  const ref = useRef<any>();
-  useFrame((_, delta) => {
-    if (ref.current) {
-      ref.current.rotation && (ref.current.rotation.x -= delta / 100);
-      ref.current.rotation && (ref.current.rotation.y -= delta / 150);
+  const starsRef = useRef<THREE.Group>(null);
+
+  useFrame(() => {
+    if (starsRef.current) {
+      starsRef.current.rotation.y += 0.0001; // Adjust the speed of rotation here
+      starsRef.current.rotation.x += 0.0001;
     }
   });
   return (
-    <Stars
-      ref={ref}
-      radius={50}
-      depth={400}
-      count={3000}
-      factor={15}
-      saturation={0}
-      fade
-      speed={2}
-    />
+    <group ref={starsRef}>
+      <Stars radius={50} depth={400} count={1000} factor={16} saturation={0} fade speed={2} />
+    </group>
   );
 }
diff --git a/src/slices/Article/index.tsx b/src/slices/Article/index.tsx
@@ -13,7 +13,7 @@ export type ArticleProps = SliceComponentProps<Content.ArticleSlice>;
 const Article = ({ slice }: ArticleProps): JSX.Element => {
   return (
     <Bounded data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
-      <article className="prose lg:prose-xl dark:prose-invert w-full prose-img:rounded-lg prose-img:mx-auto">
+      <article className="prose lg:prose-xl dark:prose-invert w-full prose-img:rounded-lg prose-img:mx-auto prose-img:max-w-[70%]">
         <PrismicRichText field={slice.primary.content} />
       </article>
     </Bounded>

diff --git a/src/slices/Hero/index.tsx b/src/slices/Hero/index.tsx
@@ -1,6 +1,7 @@
 import Bounded from "@/components/bounded";
 import { Button } from "@/components/ui/button";
 import type { Content } from "@prismicio/client";
+import { PrismicNextImage, PrismicNextLink } from "@prismicio/next";
 import type { SliceComponentProps } from "@prismicio/react";
 import Image from "next/image";
 
@@ -15,16 +16,20 @@ export type HeroProps = SliceComponentProps<Content.HeroSlice>;
 const Hero = ({ slice }: HeroProps): JSX.Element => {
   return (
     <Bounded data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
-      <div className="relative isolate px-6 lg:px-8 w-full">
-        <div className="relative mx-auto max-w-2xl pb-32 py-16 sm:py-24 lg:py-36 z-20">
+      <div className="relative isolate px-0 lg:px-8 w-full">
+        <div className="relative mx-auto max-w-2xl pb-32 sm:py-24 lg:py-36 z-20">
           <div className="text-center">
             <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
               {slice.primary.heading}
             </h1>
-            <p className="mt-6 text-lg leading-8 ">{slice.primary.body}</p>
+            <p className="mt-6 text-lg leading-8 max-w-[90%] md:max-w-[60%] m-auto backdrop-blur-sm">
+              {slice.primary.body}
+            </p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
-              <Button>Join Now</Button>
-              <Button variant="link">Learn more</Button>
+              <Button>{slice.primary.cta_primary_text}</Button>
+              <PrismicNextLink field={slice.primary.cta_secondary_link}>
+                <Button variant="link">{slice.primary.cta_secondary_text}</Button>
+              </PrismicNextLink>
             </div>
           </div>
         </div>
@@ -41,13 +46,25 @@ const Hero = ({ slice }: HeroProps): JSX.Element => {
             }}
           />
         </div>
-
-        <div className="absolute left-[10%] top-[30%] transition-all duration-1000">
-          <Image className="animate-float" src="/frodo.png" alt="Frodo" width={300} height={400} />
+        <div className="absolute w-full h-full top-0 left-0 -z-30">
+          <PrismicNextImage
+            className="absolute transform-gpu origin-top-left animate-fly h-[300px] md:-rotate-[15deg] md:h-[400px] w-auto"
+            field={slice.primary.background_image_2}
+            width={300}
+            height={300}
+          />
         </div>
 
-        <div className="absolute right-[10%] top-[50%] transition-all duration-1000">
-          <Image className="animate-float" src="/trace.png" alt="Trace" width={200} height={400} />
+        <div
+          className="absolute w-full h-full animate-spin top-0 left-0 -z-30"
+          style={{ animationDuration: "60s" }}
+        >
+          <PrismicNextImage
+            className="origin-[100] h-[100px] md:h-[150px] w-auto"
+            field={slice.primary.background_image_1}
+            width={300}
+            height={300}
+          />
         </div>
 
         <div