merged navbar.js file

DevDogs-UGA · Oct 20, 2024 · c78075b · c78075b
2 parents c0933e7 + aca8539
commit c78075b
Show file tree

Hide file tree

Showing 23 changed files with 314 additions and 42 deletions.
diff --git a/.env b/.env
diff --git a/README.md b/README.md
@@ -37,6 +37,8 @@ We maintain code quality using ESLint and Prettier. Please ensure your code foll
 ## Important Notes
 
 - **Design Consistency**: Refer to our [Figma](https://www.figma.com/design/mJZGzkMqu6JHfIzPl5zCkU/Website-Design?node-id=0-1&t=6ph7juLn0PV5AIhQ-1) file for consistent styling across the website.
+- **Resources**: Images and key links mentioned in the Figma can be found in our Google Drive [Website Assets](https://drive.google.com/drive/folders/1Z9QpqmCFKjZYrDLGBTeS77htRj1zP4gy?usp=sharing) folder.
+- **Branding Guidelines**: DevDogs' logos, color palettes, fonts, and other key components of the DevDogs brand and their acceptable use can be found [here](https://drive.google.com/file/d/1_SQ3bJ5-1ss60MYbrtnG81Ot5F_NcR-R/view?usp=sharing).
 - **Colors**: Use the `color.css` file for color references throughout the website.
 
 ## How to Run Locally

diff --git a/src/app/about/events/page.js b/src/app/about/events/page.js
@@ -32,8 +32,8 @@ const EventsPage = () => {
         </p>
       </h1>
 
-      <p>Monday August 26th, 2024 from 5:30 PM to 6:30PM at MLC 150</p>
-      <p>Monday September 9th, 2024 from 5:30 PM to 6:30PM at MLC 150</p>
+      <p>Monday August 26th, 2024 from 5:30 PM to 6:30PM in MLC 150</p>
+      <p>Monday September 9th, 2024 from 5:30 PM to 6:30PM in MLC 150</p>
 
       <h1 className="font-bold text-[2rem] md:[2.5rem] mt-8 text-MidnightBlue">
         Dev{" "}
@@ -42,7 +42,7 @@ const EventsPage = () => {
         </p>
       </h1>
 
-      <p>Every Monday from 5:30 PM to 6:30PM at Boyd 222*</p>
+      <p>Every Monday from 5:30 PM to 6:30PM in (New) Poultry Science 125*</p>
       <p>
         <i>*Begins on September 16th, 2024</i>
       </p>

diff --git a/src/app/about/page.js b/src/app/about/page.js
@@ -110,14 +110,14 @@ const AboutPage = () => {
           <div className="flex items-center flex-nowrap justify-center gap-[2rem] py-4">
             <Link
               href="/about/projects"
-              className="text-lg md:text-xl rounded-full font-medium  py-2 px-4 sm:px-6 transition ease-in-out delay-150 bg-DevDogBlue text-white hover:bg-black hover:text-white "
+              className="blue text-lg md:text-xl rounded-full font-medium  py-2 px-4 sm:px-6 transition ease-in-out delay-150 text-white"
             >
               <Button>All Projects</Button>
             </Link>
             <Link
               target="_blank"
               href="/about/people"
-              className="text-lg md:text-xl rounded-full font-medium  py-2 px-4 sm:px-6 transition ease-in-out delay-150 text-white bg-[#BA0C2F] hover:bg-black hover:text-white "
+              className="red text-lg md:text-xl rounded-full font-medium  py-2 px-4 sm:px-6 transition ease-in-out delay-150 text-white"
             >
               <Button>Our People</Button>
             </Link>

diff --git a/src/app/about/projects/page.js b/src/app/about/projects/page.js
@@ -97,7 +97,7 @@ const Page = () => {
 
       <Link
         href="https://github.com/DevDogs-UGA/Optimal-Schedule-Builder"
-        className="bg-BulldogRed container transition ease-in-out duration-300 block mx-auto rounded-full max-w-[17rem] font-semibold py-3 my-[75px]  text-white hover:bg-black hover:text-white"
+        className="red container transition ease-in-out duration-300 block mx-auto rounded-full max-w-[17rem] font-semibold py-3 my-[75px]  text-white"
       >
         <Button className="">View</Button>
       </Link>

diff --git a/src/app/components/EmblaCarousel.js b/src/app/components/EmblaCarousel.js
@@ -1,20 +1,16 @@
+"use client";
 import { useCallback, useEffect, useRef } from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import Image from "next/image";
+import Link from "next/link";
 import "./embla.css";
 import PropTypes from "prop-types";
 
-// Documentation for external library used: https://www.embla-carousel.com/examples/predefined/
-
-// This carousel has a zoom in and zoom out effect on autoplay with the spotlight on the middle slide, majority of the code is from Embla Carousel. The component takes in 3 props, the slides(array of images), banner(boolean to check if you want a banner, and options(which outline the behavious of the carousel. To learn more about the different option go to the documentation at Embla Carousel))
-
-// This Number changes the space between the slides
 const TWEEN_FACTOR_BASE = 0.2;
 
 const numberWithinRange = (number, min, max) =>
   Math.min(Math.max(number, min), max);
 
-// Custom useInterval hook
 function useInterval(callback, delay) {
   const savedCallback = useRef();
 
@@ -89,12 +85,11 @@ const EmblaCarousel = (props) => {
     });
   }, []);
 
-  // Auto-scroll functionality
   useInterval(() => {
     if (emblaApi) {
       emblaApi.scrollNext();
     }
-  }, 4500); // Change slide every 4.5 seconds
+  }, 4500);
 
   useEffect(() => {
     if (!emblaApi) return;
@@ -114,30 +109,60 @@ const EmblaCarousel = (props) => {
   return (
     <div className="embla">
       <div className="embla__viewport" ref={emblaRef}>
-        <div className="embla__container ">
+        <div className="embla__container">
           {slides.map((slide, index) => (
             <div className="embla__slide" key={index}>
-              <div className="embla__slide__number relative">
-                <Image
-                  src={slide.image}
-                  alt={`Slide ${index + 1}`}
-                  className="object-cover rounded-[.75rem] my-10 sm:mb-0 h-[10rem] sm:h-[15rem] md:h-[25rem]"
-                />
-                {(slide.title || slide.description) && (
-                  <div className="absolute inset-x-0 bottom-[2rem] sm:bottom-0 bg-[#3a3a3a] text-white rounded-b-[.75rem]">
-                    {slide.title && (
-                      <h3 className="text-[1rem] p-1 sm:p-3 sm:text-[1.2rem] font-bold">
-                        {slide.title}
-                      </h3>
+              {slide.link ? (
+                <Link href={slide.link} target="_blank">
+                  <div className="embla__slide__number relative">
+                    {slide.image && (
+                      <Image
+                        src={slide.image}
+                        alt={`Slide ${index + 1}`}
+                        className="object-cover rounded-[.75rem] my-10 sm:mb-0 h-[10rem] sm:h-[15rem] md:h-[25rem]"
+                      />
                     )}
-                    {slide.description && (
-                      <p className="text-[.6rem] p-3 sm:text-[.8rem]">
-                        {slide.description}
-                      </p>
+                    {(slide.title || slide.description) && (
+                      <div className="hidden md:block absolute inset-x-0 bottom-[2rem] sm:bottom-0 bg-black/[.65] text-white rounded-b-[.75rem]">
+                        {slide.title && (
+                          <h3 className="text-[1rem] p-1 sm:p-3 sm:text-[1.5rem] font-bold">
+                            {slide.title}
+                          </h3>
+                        )}
+                        {slide.description && (
+                          <p className="text-center text-[.5rem] pb-[1rem] px-[1rem] sm:text-[1rem]">
+                            {slide.description}
+                          </p>
+                        )}
+                      </div>
                     )}
                   </div>
-                )}
-              </div>
+                </Link>
+              ) : (
+                <div className="embla__slide__number relative">
+                  {slide.image && (
+                    <Image
+                      src={slide.image}
+                      alt={`Slide ${index + 1}`}
+                      className="object-cover rounded-[.75rem] my-10 sm:mb-0 h-[10rem] sm:h-[15rem] md:h-[25rem]"
+                    />
+                  )}
+                  {(slide.title || slide.description) && (
+                    <div className="absolute inset-x-0 bottom-[2rem] sm:bottom-0 bg-black/[.65] text-white rounded-b-[.75rem]">
+                      {slide.title && (
+                        <h3 className="hidden md:block text-[1rem] p-1 sm:p-3 sm:text-[1.5rem] font-bold">
+                          {slide.title}
+                        </h3>
+                      )}
+                      {slide.description && (
+                        <p className="hidden md:block text-center text-[.6rem] p-3 sm:text-[.8rem]">
+                          {slide.description}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           ))}
         </div>
@@ -146,10 +171,16 @@ const EmblaCarousel = (props) => {
   );
 };
 
-export default EmblaCarousel;
-
 EmblaCarousel.propTypes = {
-  slides: PropTypes.array,
-  banner: PropTypes.bool,
+  slides: PropTypes.arrayOf(
+    PropTypes.shape({
+      image: PropTypes.string.isRequired,
+      title: PropTypes.string,
+      description: PropTypes.string,
+      link: PropTypes.string,
+    }),
+  ),
   options: PropTypes.object,
 };
+
+export default EmblaCarousel;
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -279,6 +279,22 @@ iframe {
   justify-content: center;
 }
 
+.red {
+  background-color: #ba0c2f;
+}
+
+.red:hover {
+  background-color: #e4002b;
+}
+
+.blue {
+  background-color: #33334d;
+}
+
+.blue:hover {
+  background-color: #222233;
+}
+
 #tiers {
   display: flex;
   justify-content: center;