Merge pull request #9 from UTDNebula/jason/testimonials

Testimonials section

src/components/Footer.tsx

@@ -2,103 +2,107 @@ import Image from "next/image";
 
 const Footer = () => {
 	return (
-		<footer className="bg-royal w-screen rounded-t-[3.125rem] pb-10">
-			<div className="flex justify-between px-40 py-28">
+		<footer className="bg-royal w-screen rounded-t-[3.125rem] pb-10 md:px-40 px-8 text-white text-sm">
+			<div className="flex justify-between py-16 sm:py-28 flex-wrap gap-8">
 				<Image
 					src="/logo-name-white.svg"
 					alt="logo"
 					width="360"
 					height="53"
 				/>
-				<div className="text-white items-center flex flex-col">
-					<button>
-						<Image
-							src="/arrow.svg"
-							alt="arrow"
-							width="20"
-							height="20"
-							className="rotate-180"
-						/>
-					</button>
-					<p>Top</p>
-				</div>
+				<a href="#" className="order-first sm:order-1">
+					<div className="text-white items-center flex flex-col rounded-full border border-white border-opacity-0 hover:border-opacity-100 p-2 transition">
+						<button>
+							<Image
+								src="/arrow.svg"
+								alt="arrow"
+								width="20"
+								height="20"
+								className="rotate-180"
+								/>
+						</button>
+						<p>Top</p>
+					</div>
+				</a>
 			</div>
-			<div className="grid grid-cols-4 px-40">
-				<div className="text-white text-sm">
-					<h3 className="text-xl font-semibold mb-8">About us</h3>
-					<p className="pb-3">About</p>
-					<p className="pb-3">Roles</p>
-					<p className="pb-3">Members</p>
-					<p className="pb-3">Blog</p>
-					<p className="pb-3">Boot Camp</p>
+			<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10">
+				<div className="flex flex-col gap-3">
+					<h3 className="text-xl font-semibold mb-4">About us</h3>
+					<p className="">About</p>
+					<p className="">Roles</p>
+					<p className="">Members</p>
+					<p className="">Blog</p>
+					<p className="">Boot Camp</p>
 				</div>
-				<div className="text-white text-sm">
-					<h3 className="text-xl font-semibold mb-8">Projects</h3>
-					<p className="pb-3">Planner</p>
-					<p className="pb-3">Sk.edge</p>
-					<p className="pb-3">Jupiter</p>
-					<p className="pb-3">Survival Guide</p>
-					<p className="pb-3">API & Trends</p>
+				<div className="flex flex-col gap-3">
+					<h3 className="text-xl font-semibold mb-4">Projects</h3>
+					<p className="">Planner</p>
+					<p className="">Sk.edge</p>
+					<p className="">Jupiter</p>
+					<p className="">Survival Guide</p>
+					<p className="">API & Trends</p>
 				</div>
-				<div className="text-white text-sm">
-					<h3 className="text-xl font-semibold mb-8">Resources</h3>
-					<p className="pb-3">Roles</p>
-					<p className="pb-3">Project Governance</p>
-					<p className="pb-3">Meetings</p>
-					<p className="pb-3">Design Guide</p>
+				<div className="flex flex-col gap-3">
+					<h3 className="text-xl font-semibold mb-4">Resources</h3>
+					<p className="">Roles</p>
+					<p className="">Project Governance</p>
+					<p className="">Meetings</p>
+					<p className="">Design Guide</p>
 				</div>
-				<div className="text-white text-sm">
-					<h3 className="text-xl font-semibold mb-8">
-						Let&#39;s Keep In Touch
-					</h3>
+				<div className="flex flex-col gap-4 lg:ml-auto">
 					<Image
 						src="/join-discord.svg"
 						alt="discord"
 						width="200"
 						height="60"
-						className="mb-8"
+						className="mb-6"
 					/>
-					<div className="flex">
-						<div className="flex items-center mr-5">
-							<Image
-								src="/twitter.svg"
-								alt="twitter"
-								width="30"
-								height="30"
-								className="mr-2"
-							/>
-							<p>Twitter</p>
-						</div>
-						<div className="flex items-center">
-							<Image
-								src="/youtube.svg"
-								alt="youtube"
-								width="30"
-								height="30"
-								className="mr-2"
-							/>
-							<p>Youtube</p>
-						</div>
-					</div>
+					<a className="flex items-center gap-2 " href="https://instagram.com/utdnebula">
+						<Image
+							src="/instagram.svg"
+							alt="Instagram logo"
+							width="30"
+							height="30"
+						/>
+						<p>Instagram</p>
+					</a>
+					<a className="flex items-center gap-2 " href="https://linkedin.com/company/utdnebula">
+						<Image
+							src="/linkedin.svg"
+							alt="LinkedIn logo"
+							width="30"
+							height="30"
+						/>
+						<p>LinkedIn</p>
+					</a>
+					<a className="flex items-center gap-2 " href="https://github.com/utdnebula">
+						<Image
+							src="/github.svg"
+							alt="GitHub logo"
+							width="30"
+							height="30"
+						/>
+						<p>GitHub</p>
+					</a>
 				</div>
 			</div>
-			<div className="px-40 pt-40">
-				<div className="border-t-2 border-white px-40" />
-				<div className="flex justify-between pt-8">
-					<div className="flex text-white text-sm">
-						<p className="mr-8">Terms of Service</p>
-						<p className="mr-8">Privacy Policy</p>
-						<p className="mr-8">Security</p>
-						<p className="mr-8">Sitemap</p>
+			<div className="md:pt-40 pt-10">
+				<div className="border-t-2 border-white" />
+				<div className="flex md:flex-row flex-col justify-between gap-8 pt-8">
+					<div className="flex gap-x-8 gap-y-1 justify-around md:justify-normal flex-wrap">
+						<p className="">Terms of Service</p>
+						<p className="">Privacy Policy</p>
+						<p className="">Security</p>
+						<p className="">Sitemap</p>
 					</div>
-					<div>
-						<p className="text-white text-sm">
+					<div className="md:text-right text-center text-xs">
+						<p className="">
 							© 2023 Nebula Labs Maintainers. All rights{" "}
 							reserved.
 						</p>
-						<p className="text-white text-sm text-right">
+						<p className="">
 							Site design by{" "}
-							<b className="underline">Hilary Nguyen</b>
+							<a href="https://hilary-nguyen.com/" className="font-bold underline">Hilary Nguyen</a>
 						</p>
 					</div>
 				</div>

src/components/Testimonials.tsx

@@ -0,0 +1,68 @@
+import Image from "next/image";
+import ArrowButton from "@/../public/testimonials/arrow-button.svg";
+import Amrit from "@/../public/testimonials/amrit.png";
+import JC from "@/../public/testimonials/jc.png";
+import Kevin from "@/../public/testimonials/kevin.png";
+
+const testimonials = [
+    {
+        name: 'Amrit',
+        classification: 'Junior',
+        image: Amrit,
+        quote: '“Being a part of Nebula has been a huge part of my college career. I\'ve made some of my best friends and had some of my best experiences being a part of the group. I love creating software that helps students and I love teaching people web technologies.”'
+    },
+    {
+        name: 'Kevin',
+        classification: 'Sophomore',
+        image: Kevin,
+        quote: '“I love the team, I love the product, I love the unique challenges that the project presents. What more can I ask for :)”'
+    }, 
+    {
+        name: 'JC',
+        classification: 'Junior',
+        image: JC,
+        quote: '“I enjoyed interacting with an open source project which I’d never done before. The team working skills are also great to know and the people I have interacted with so far have been great.”'
+    }
+]
+
+const Testimonials = () => (
+    <>
+      <div className="flex flex-col gap-8 text-center items-center mx-auto mt-24 my-12 max-w-3xl px-4">
+        <h4 className="text-gradient font-semibold lg:font-bold text-4xl">We Got Something For Everyone</h4>
+        <p>Our organization has something for everyone. Whether you&apos;re a seasoned pro or just starting out, we offer a range of opportunities to help you grow and develop.</p>
+      </div>
+      <div className="flex overflow-x-scroll text-white scroll-smooth" style={{scrollSnapType: 'x mandatory'}}>
+        {testimonials.map((t, idx, arr)=>(
+          <div id={`testimonial-${idx}`} key={`testimonial-${t.name}`} className="flex flex-shrink-0 w-screen px-8 snap-start lg:px-32 xl:px-48 relative">
+            <div className="bg-royal rounded-3xl flex-shrink-0 flex flex-col md:flex-row w-fit items-center md:items-center text-center gap-8 p-8 font-medium md:text-lg md:justify-start">
+                <Image className="md:w-2/5 lg:w-1/5" src={t.image} alt={t.name} />
+                <span className="contents md:flex flex-col md:text-left gap-8 md:h-full md:justify-center relative">
+                    <p>{t.quote}</p>
+                    <h3 className="text-2xl font-bold">
+                    {t.name}, {t.classification}
+                    </h3>
+
+                    <span className="flex gap-3 mt-auto mb-8 md:mb-0 md:mt-0 place-self-end md:absolute md:bottom-0 items-center">
+                        <button onClick={()=>{
+                          const el = document.querySelector(`#testimonial-${Math.max(0, idx-1)}`)
+                          el?.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'start'})
+                        }}>
+                            <Image src={ArrowButton} alt="arrow" />
+                        </button>
+                        <p className="h-min">{idx+1}/{arr.length}</p>
+                        <button onClick={()=>{
+                          const el = document.querySelector(`#testimonial-${Math.min(arr.length-1, idx+1)}`)
+                          el?.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'start'})
+                        }}>
+                            <Image src={ArrowButton} alt="arrow" className="rotate-180"  />
+                        </button>
+                    </span>
+                </span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+)
+
+export default Testimonials

src/components/WhoWeAre.tsx

@@ -1,13 +1,11 @@
 function WhoWeAre() {
   return (
-    <div className="xl:pt-32 px-40 flex justify-between">
-      <div className="w-[340px]">
-        <h1 className="font-inter font-bold text-[80px] text-transparent bg-clip-text bg-gradient-to-br from-[#3634BB] via-royal to-[#6166FA]">
-          Who We Are
-        </h1>
-      </div>
+    <div className="xl:pt-32 px-8 md:px-32 xl:px-64 flex justify-between flex-col lg:flex-row mx-auto font-inter gap-8 lg:gap-16 lg:text-left text-center my-16">
+      <h1 className="font-bold lg:text-6xl text-2xl text-gradient leading-tight">
+        Who&nbsp;We Are
+      </h1>
       <div>
-        <h3 className="font-inter text-[40px] w-[600px]">
+        <h3 className="lg:text-4xl text-lg lg:leading-normal">
           We&apos;re a community of student developers and designers crafting
           innovative tools to empower UT Dallas students, one galaxy at a time.
         </h3>

src/pages/index.tsx

@@ -7,6 +7,7 @@ import Arrow from "@/../public/arrow.svg";
 import WhoWeAre from "@/components/WhoWeAre";
 import useBlobBg from "@/lib/useBlobBg";
 import CTA from "@/components/CTA";
+import Testimonials from "@/components/Testimonials";
 
 
 const Header = () => {
@@ -55,7 +56,7 @@ const Home = () => (
     <WhoWeAre />
     {/* <div>projects</div> */}
     {/* <div>projects</div> */}
-    {/* <div>testimonials</div> */}
+    <Testimonials/>
     {/* <div>beliefs</div> */}
     <CTA/>
     <Footer />

src/styles/globals.css

@@ -2,4 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
 
+.text-gradient {
+  @apply text-transparent bg-clip-text bg-gradient-to-br from-[#3634BB] via-royal to-cornflower-500;
+}