Landing page text redesign and minor refactoring

.github/workflows/prettier.yml

@@ -39,6 +39,6 @@ jobs:
               repo: context.repo.repo,
               body: "Some files aren't properly formatted. Would you like me to lint them for you?"
             })
-            
+
       - name: Run Prettier
         run: pnpm exec prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}"

src/app/globals.css

@@ -141,6 +141,20 @@ tbody {
   scroll-margin-top: 70px;
 }
 
+.gradient-title {
+  background: linear-gradient(#ffffff, #999999);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.gradient-subtitle {
+  background: linear-gradient(180deg, #ffffff, #bcbcbc);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 .white-glow {
   -webkit-box-shadow: 0px 0px 177px 27px rgba(120, 110, 138, 0.44);
   -moz-box-shadow: 0px 0px 177px 27px rgba(120, 110, 138, 0.44);

src/app/page.tsx

@@ -71,7 +71,7 @@ export default async function Home() {
           >
             {text.aboutUsSubtitle}
           </h1>
-          <p className="text-white text-center lg:text-right py-10 whitespace-pre-wrap text-balance max-w-lg">
+          <p className="gradient-subtitle text-center lg:text-right py-10 whitespace-pre-wrap text-balance max-w-lg">
             {text.aboutUsText}
           </p>
         </div>
@@ -89,7 +89,7 @@ export default async function Home() {
           >
             {text.joinUsSubtitle}
           </h1>
-          <p className="text-stone-400 text-center lg:text-left py-10">
+          <p className="gradient-subtitle text-center lg:text-left py-10">
             {text.joinUsText}
           </p>
           <Link href="/portal/forms/241">

src/components/general/execSection.tsx

@@ -143,7 +143,7 @@ export default function ExecSection() {
                     alt={exec.name}
                     width={110}
                     height={110}
-                    className="rounded-2xl"
+                    className="rounded-2xl drop-shadow-xl"
                   />
                   <p className="mt-2 font-bold text-center text-lg">
                     {exec.name}

src/components/general/footerSection.tsx

@@ -12,11 +12,11 @@ export default function FooterSection() {
   return (
     <section
       id={"contact"}
-      className="flex flex-col items-center py-10 relative gap-10 text-center bg-[#3A3543] min-h-[200px] z-20 px-20 w-full "
+      className="flex flex-col items-center py-16 relative gap-10 text-center bg-[#3A3543] min-h-[200px] z-20 px-20 w-full "
     >
       <div
         className={
-          "flex md:flex-row flex-col justify-between w-full text-left gap-4 text-[#F5F6FF]  z-40"
+          "flex md:flex-row flex-col justify-between w-full text-left gap-4 text-[#F5F6FF] z-40"
         }
       >
         <div

src/components/general/hero.tsx

@@ -7,58 +7,61 @@ const text = {
   titleEnd: "🪐",
   description:
     "A student-run software engineering team devoted to building software projects in a collaborative and professional environment",
-  joinus: "Join Our Team",
+  joinUs: "Join Our Team",
 };
 
 export default function LandingPage() {
   return (
     <div className="flex flex-col w-full overflow-hidden min-h-1/2 items-center">
       <div
         className={
-          "flex flex-col-reverse md:flex-row justify-between  w-full max-w-[1340px] min-h-96 py-16  px-20 gap-20"
+          "flex flex-col-reverse md:flex-row justify-between w-full max-w-[1360px] min-h-96 py-12 px-6 gap-20"
         }
       >
-        <div className="relative text-white flex flex-col justify-center items-center md:items-start text-left w-full gap-6 md:max-w-2xl flex-1">
-          <h1 className="text-[56px]  font-heading ">
-            <span className="text-white">{text.title}</span>
+        <div className="relative text-white flex flex-col justify-center items-center md:items-start sm:text-left text-center w-full gap-6 md:max-w-2xl flex-1">
+          <h1 className="md:text-[56px] sm:text-[44px] text-[32px] font-heading pt-12">
+            <span className="gradient-title drop-shadow-2xl">{text.title}</span>
             <span> {text.titleEnd}</span>
           </h1>
-          <p className=" text-lg text-center md:text-left text-white ">
+          <p className="text-lg w-full text-center md:text-left gradient-subtitle">
             {text.description}
           </p>
           <Link href="/portal/forms/241">
-            <Button className="p-3 px-6" size={"xl"}>
-              <span className="text-lg">{text.joinus}</span>
+            <Button className="p-3 px-6" size={"xl"} icon>
+              <span className="text-lg">{text.joinUs}</span>
             </Button>
           </Link>
         </div>
         <div
           className={
-            "relative flex md:flex-1 flex-shrink-0 md:h-full h-40 max-w-96  "
+            "relative flex md:flex-1 flex-shrink-0 md:h-full h-40 max-w-96"
           }
         >
-          <div className="absolute -top-10 z-2 -left-32">
+          <div className="absolute -top-10 -left-32">
             <Image
-              src="/images/planet_2.svg"
+              src="/images/planet_purple.svg"
               alt="planet"
-              width={300}
-              height={300}
+              width={400}
+              height={400}
+              className="sm:mx-auto w-24 h-20 md:w-auto md:h-auto ml-52 mt-48 sm:mt-0 sm:w-auto"
             />
           </div>
-          <div className="md:absolute hidden top-20 z-2 -right-32">
+          <div className="absolute top-28 -right-8 z-0">
             <Image
-              src="/images/planet_1.svg"
+              src="/images/planet_blue.svg"
               alt="planet"
               width={500}
               height={500}
+              className="sm:mx-auto w-20 h-20 md:w-auto md:h-auto mr-24 mt-16 sm:mt-0 sm:w-auto"
             />
           </div>
-          <div className="absolute -top-10 z-1 -right-20">
+          <div className="absolute md:-bottom-72 sm:-bottom-36 -right-2">
             <Image
               src="/images/stars.svg"
               alt="planet"
               width={450}
-              height={300}
+              height={400}
+              className="md:w-72 md:h-72 sm:w-36 sm:h-36 w-20 h-20 mt-44 sm:mt-0 mr-32"
             />
           </div>
         </div>