Merge pull request SpaceyaTech#46 from SpaceyaTech/feature/footer-cta

Feature: Develop CTA & Footer

e2e-tests/footer/footer.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Footer Component", () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to the page where the Footer is rendered
+    await page.goto("/");
+  });
+
+  test("should render the Footer component", async ({ page }) => {
+    const footer = await page.locator('[data-test="Footer"]');
+    await expect(footer).toBeVisible();
+  });
+
+  test("should render social media icons with correct links", async ({
+    page,
+  }) => {
+    // Check for Colabs logo link
+    const colabsLogoLink = page.locator('img[alt="Colabs logo"]');
+    await expect(colabsLogoLink).toBeVisible();
+
+    // Check for X icon link
+    const xIconLink = page.locator('img[alt="X Icon"]');
+    await expect(xIconLink).toBeVisible();
+    await expect(xIconLink).toHaveAttribute("src", /x-icon\.png/);
+    const xLink = page.locator('a[href="http://www.x.com"]');
+    await expect(xLink).toHaveAttribute("target", "_blank");
+
+    // Check for LinkedIn icon link
+    const linkedinIconLink = page.locator('img[alt="Linkedin Icon"]');
+    await expect(linkedinIconLink).toBeVisible();
+    await expect(linkedinIconLink).toHaveAttribute("src", /linkedin-icon\.png/);
+    const linkedinLink = page.locator('a[href="http://www.linkedin.com"]');
+    await expect(linkedinLink).toHaveAttribute("target", "_blank");
+  });
+
+  test("should render internal links with correct routes", async ({ page }) => {
+    // Check internal navigation links
+    const aboutLink = page.locator("text=About");
+    const hackathonsLink = page.locator("text=Hackathons");
+    const leaderboardLink = page.locator("text=Leaderboard");
+    const privacyLink = page.locator("text=Privacy & Terms");
+    const cookiesLink = page.locator("text=Cookies");
+
+    // Assert visibility of links
+    await expect(aboutLink).toBeVisible();
+    await expect(hackathonsLink).toBeVisible();
+    await expect(leaderboardLink).toBeVisible();
+    await expect(privacyLink).toBeVisible();
+    await expect(cookiesLink).toBeVisible();
+
+    // Assert href attributes for navigation links
+    await expect(aboutLink).toHaveAttribute("href", "/");
+    await expect(hackathonsLink).toHaveAttribute(
+      "href",
+      "/dashboard/hackathons",
+    );
+    await expect(leaderboardLink).toHaveAttribute(
+      "href",
+      "/dashboard/leaderboards",
+    );
+    await expect(privacyLink).toHaveAttribute("href", "/");
+    await expect(cookiesLink).toHaveAttribute("href", "/");
+  });
+
+  test("should render copyright notice", async ({ page }) => {
+    const copyrightNotice = page.locator(
+      "text=© 2024 Colabs by SpaceYaTech. All rights reserved.",
+    );
+    await expect(copyrightNotice).toBeVisible();
+  });
+});

e2e-tests/footer/footerCTA.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("FooterCTA Component", () => {
+  test.beforeEach(async ({ page }) => {
+    // Replace with the route that renders the FooterCTA component
+    await page.goto("http://localhost:3000");
+  });
+
+  test("should render the FooterCTA component", async ({ page }) => {
+    const footerCTA = await page.locator('[data-test="FooterCTA"]');
+    await expect(footerCTA).toBeVisible();
+  });
+
+  test("should display the main text", async ({ page }) => {
+    const mainText = await page.locator(
+      "text=Experience counts. Get it on Colabs.",
+    );
+    await expect(mainText).toBeVisible();
+  });
+
+  test("should display the secondary text", async ({ page }) => {
+    const secondaryText = await page.locator(
+      "text=Colabs is where you cut your teeth on enterprise projects. We have over 100 repositories on all tech tracks, carefully picked for you.",
+    );
+    await expect(secondaryText).toBeVisible();
+  });
+
+  test("should render the Join Colabs for free button", async ({ page }) => {
+    const joinButton = await page.locator("text=Join Colabs for free");
+    await expect(joinButton).toBeVisible();
+    await expect(joinButton).toHaveAttribute(
+      "href",
+      "/auth/signup?returnTo=%2Fdashboard",
+    );
+    await joinButton.click();
+  });
+
+  test("should render the Launch a Hackathon button", async ({ page }) => {
+    const hackathonButton = await page.locator("text=Launch a Hackathon");
+    await expect(hackathonButton).toBeVisible();
+    await expect(hackathonButton).toHaveAttribute(
+      "href",
+      "/dashboard/hackathons",
+    );
+  });
+
+  test("should display images", async ({ page }) => {
+    const robotImage = await page.locator('img[alt="Standing robot"]');
+    const ellipseImage = await page.locator('img[alt="ellipse background"]');
+
+    await expect(robotImage).toBeVisible();
+    await expect(ellipseImage).toBeVisible();
+  });
+
+  test("Join Colabs for free button navigates correctly", async ({ page }) => {
+    const joinButton = await page.locator("text=Join Colabs for free");
+    await expect(joinButton).toBeVisible();
+    await joinButton.click();
+    await expect(joinButton).toHaveAttribute(
+      "href",
+      "/auth/signup?returnTo=%2Fdashboard",
+    );
+  });
+
+  test("Launch a Hackathon button navigates correctly", async ({ page }) => {
+    const hackathonButton = await page.locator("text=Launch a Hackathon");
+    await expect(hackathonButton).toBeVisible();
+    //setting this up to force a click because the rocket icon is in the way of the button
+    await hackathonButton.click({ force: true });
+  });
+});

index.html

@@ -1,19 +1,23 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/colabs.png" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-      rel="stylesheet"
-    />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Colabs</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/png" href="/colabs.png" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet" />
+  <!-- Added inconsolata font -->
+  <link href="https://fonts.googleapis.com/css2?family=Inconsolata:[email protected]&display=swap" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Colabs</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * Read environment variables from file.
@@ -45,10 +45,10 @@ export default defineConfig({
       use: { ...devices["Desktop Firefox"] },
     },
 
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
 
     /* Test against mobile viewports. */
     // {

src/routes/-components/Footer.tsx

@@ -0,0 +1,47 @@
+import ColabsLogo from "../../assets/logo-container.png";
+import XIcon from "../../assets/x-icon.png";
+import LinkedinIcon from "../../assets/linkedin-icon.png";
+import { Link } from "@tanstack/react-router";
+
+export default function Footer() {
+  return (
+    <footer className="mt-8 pl-4 md:mt-48 lg:mt-96" data-test="Footer">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between lg:justify-around">
+        <div className="flex items-center justify-start gap-4">
+          {/* Social Icons */}
+          <Link to="/">
+            <img src={ColabsLogo} alt="Colabs logo" />
+          </Link>
+          <a href="http://www.x.com" target="_blank" rel="noopener noreferrer">
+            <img src={XIcon} alt="X Icon" className="h-6 w-6 object-contain" />{" "}
+          </a>
+          <a
+            href="http://www.linkedin.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <img
+              src={LinkedinIcon}
+              alt="Linkedin Icon"
+              className="h-6 w-6 object-contain"
+            />
+          </a>
+        </div>
+
+        {/* Internal Links */}
+        <div className="my-5 flex flex-col gap-2 text-[#feffff] md:flex-row md:items-center md:gap-3 md:pr-4 lg:justify-between lg:gap-6">
+          <Link to="/">About</Link>
+          <Link to="/dashboard/hackathons">Hackathons</Link>
+          <Link to="/dashboard/leaderboards">Leaderboard</Link>
+          <Link to="/">Privacy & Terms</Link>
+          <Link to="/">Cookies</Link>
+        </div>
+      </div>
+
+      {/* Footer copyright notice */}
+      <p className="mb-8 text-xs font-medium text-[#BEB8B8] md:text-center md:text-sm">
+        &copy; 2024 Colabs by SpaceYaTech. All rights reserved.
+      </p>
+    </footer>
+  );
+}

src/routes/-components/FooterCTA.tsx

@@ -0,0 +1,48 @@
+import { Link } from "@tanstack/react-router";
+import rocketIcon from "../../assets/rocket.png";
+import robot from "../../assets/robot-assistant.png";
+import ellipse from "../../assets/ellipse.png";
+export const FooterCTA = () => {
+  return (
+    <div
+      data-test="FooterCTA"
+      className="relative flex flex-col items-center gap-4 p-4 md:gap-10 md:p-10 lg:flex lg:flex-row lg:pl-[20%]"
+    >
+      <div className="z-10 lg:flex lg:w-1/2 lg:flex-col lg:gap-6">
+        <p className="text-[32px] font-bold text-white lg:text-[55px] lg:leading-[60.5px]">
+          Experience counts. Get it on Colabs.
+        </p>
+        <p className="font-ff-inconsolata text-lg font-bold leading-6 text-[#9f9c9c] lg:text-xl">
+          Colabs is where you cut your teeth on enterprise projects. We have
+          over 100 repositories on all tech tracks, carefully picked for you.
+        </p>
+        <div className="mt-5 flex flex-col gap-2 md:flex-row md:justify-around lg:justify-start lg:gap-4">
+          <Link
+            to="/auth/signup"
+            search={{ returnTo: "/dashboard" }}
+            className="btn bg-brand-green-6 px-4 py-2 text-white md:w-[40%] lg:w-auto lg:text-lg"
+          >
+            Join Colabs for free
+          </Link>
+          <Link
+            to="/dashboard/hackathons"
+            className="btn bg-brand-green-8 px-4 py-2 text-brand-green-7 outline outline-1 outline-brand-green-8 md:w-[40%] lg:w-auto lg:text-lg"
+          >
+            Launch a Hackathon <img src={rocketIcon} alt="Rocket icon" />
+          </Link>
+        </div>
+      </div>
+
+      <img
+        src={robot}
+        alt="Standing robot"
+        className="z-10 mt-4 pl-[30%] md:mt-6 md:w-[50%] md:pl-[15%] lg:w-auto"
+      />
+      <img
+        src={ellipse}
+        alt="ellipse background"
+        className="absolute bottom-0 right-2 top-96 z-0 md:right-2 md:top-0 lg:top-10"
+      />
+    </div>
+  );
+};

src/routes/-components/HomePage.tsx

@@ -4,6 +4,8 @@ import RepositoriesSection from "./RepositoriesSection";
 
 import { projects } from "@/data/projects";
 import { ToolsSection } from "./tools-section/ToolsSection";
+import { FooterCTA } from "./FooterCTA";
+import Footer from "./Footer";
 
 export function HomePage() {
   return (
@@ -18,8 +20,10 @@ export function HomePage() {
           Go to Dashboard
         </Link>
       </div>
-      <ToolsSection/>
+      <ToolsSection />
       <RepositoriesSection projects={projects} />
+      <FooterCTA />
+      <Footer />
     </div>
   );
 }

src/routes/-components/trial.tsx

@@ -0,0 +1,45 @@
+import { Link } from "@tanstack/react-router";
+import rocketIcon from "../../assets/rocket.png";
+import robot from "../../assets/robot assistant standing and looking.png";
+import ellipse from "../../assets/ellipse.png";
+export const Footer = () => {
+  return (
+    <div className="flex flex-col items-center gap-4 p-4 md:gap-10 lg:relative lg:flex-row lg:p-[100px] lg:pl-[20%]">
+      <div className="border-blue-700 lg:flex lg:flex-col lg:gap-6">
+        <p className="text-[32px] font-bold text-white lg:text-[55px] lg:leading-[60.5px]">
+          Experience counts. Get it on Colabs.
+        </p>
+        <p className="font-ff-inconsolata text-lg font-bold leading-6 text-[#9f9c9c] lg:text-xl">
+          Colabs is where you cut your teeth on enterprise projects. We have
+          over 100 repositories on all tech tracks, carefully picked for you.
+        </p>
+        <div className="mt-5 flex flex-col gap-2 md:flex-row md:justify-around lg:justify-start lg:gap-4">
+          <Link
+            to="/auth/signup"
+            search={{ returnTo: "/dashboard" }}
+            className="btn bg-brand-green-6 px-4 py-2 text-white md:w-[40%] lg:w-auto lg:text-lg"
+          >
+            Join Colabs for free
+          </Link>
+          <Link
+            to="/dashboard/hackathons"
+            className="bg-brand-green-8 outline-brand-green-8 btn px-4 py-2 text-brand-green-7 outline outline-1 md:w-[40%] lg:w-auto lg:text-lg"
+          >
+            Launch a Hackathon <img src={rocketIcon} alt="Rocket icon" />
+          </Link>
+        </div>
+      </div>
+
+      <img
+        src={robot}
+        alt="Standing robot"
+        className="mt-4 pl-[30%] md:mt-4 md:w-[50%] md:pl-[15%]"
+      />
+      <img
+        src={ellipse}
+        alt="ellipse background"
+        className="hidden lg:absolute lg:bottom-0 lg:top-10 lg:-z-10 lg:block lg:translate-y-[30%]"
+      />
+    </div>
+  );
+};

tailwind.config.js

@@ -8,6 +8,7 @@ export default {
     extend: {
       fontFamily: {
         "ff-poppins": ["Poppins", "sans-serif"],
+        "ff-inconsolata": ["Inconsolata", "monospace"],
       },
       colors: {
         brand: {
@@ -29,6 +30,9 @@ export default {
             3: "#19FDC7",
             4: "#144E40",
             5: "#294740",
+            6: "#2D8067",
+            7: "#9AF5E0",
+            8: "#294740CC",
           },
         },
         sidebar: {
@@ -41,6 +45,7 @@ export default {
           border: "oklch(var(--sidebar-border))",
           ring: "oklch(var(--sidebar-ring))",
         },
+        heading: "E9EDEC",
       },
     },
   },