feat(gsap): style features of byteping using gsap & split text js

app/Home.css

@@ -108,6 +108,16 @@
  overflow-y: hidden;
 }
 
+.featureContainer {
+ overflow-x: hidden;
+}
+
+.featureVideo,
+.featureImage {
+ height: 512px;
+ border-radius: 12px;
+}
+
 @media (max-width: 1280px) {
  .hero-img {
  background-image: url(../public/images/heroBannerMobile.webp);
@@ -121,4 +131,9 @@
  .whatMakesItDifferent {
  font-size: 52px;
  }
+
+ .featureVideo,
+ .featureImage {
+ height: 300px;
+ }
 }

app/components/Feature.tsx

@@ -0,0 +1,141 @@
+import Container from "@/styles/Container.styled";
+import Flex from "@/styles/Flex.styled";
+import Text from "@/styles/Text.styled";
+import Image from "next/image";
+import React, { useEffect } from "react";
+import { gsap, ScrollTrigger } from "gsap/all";
+
+interface FeatureProps {
+ textOnLeft?: boolean;
+ isAImage?: boolean;
+ imageSrc?: string;
+ imageAltText?: string;
+ videoSrc?: string;
+ videoAltText?: string;
+ headingText?: string;
+ headingPara?: string;
+}
+
+const Feature = ({
+ textOnLeft = true,
+ isAImage = false,
+ imageSrc,
+ videoSrc,
+ imageAltText,
+ videoAltText,
+ headingText,
+ headingPara
+}: FeatureProps) => {
+ useEffect(() => {
+ gsap.registerPlugin(ScrollTrigger);
+ const features = document.querySelectorAll(".featureContainer");
+ features.forEach((feature) => {
+ const featureText = feature.querySelector(".featureText");
+ const featureAsset = feature.querySelector(".featureAsset");
+ const tl = gsap.timeline({
+ scrollTrigger: {
+ trigger: feature,
+ start: "top bottom",
+ end: "bottom 90%",
+ scrub: true
+ }
+ });
+ tl.fromTo(featureText, { xPercent: -100, opacity: 0 }, { xPercent: 0, opacity: 1 });
+ tl.fromTo(featureAsset, { xPercent: 100, opacity: 0 }, { xPercent: 0, opacity: 1 }, "<");
+ });
+ }, []);
+ return (
+ <Flex
+ className="featureContainer"
+ as={"section"}
+ mFlexDirection={textOnLeft ? "column" : "column-reverse"}
+ height="100vh"
+ padding="48px"
+ mPadding="24px"
+ alignItems="center"
+ justifyContent="center"
+ gap="64px"
+ mGap="48px"
+ >
+ {textOnLeft && (
+ <Flex
+ as={"main"}
+ gap="24px"
+ flexDirection="column"
+ width="calc(45% - 64px)"
+ mWidth="100%"
+ className="featureText"
+ >
+ <Text
+ as={"h2"}
+ fontSize="48px"
+ mFontSize="28px"
+ fontWeight="900"
+ letterSpacing="2px"
+ textTransform="uppercase"
+ fontFamily="sans-serif"
+ color="#707172"
+ tabIndex={0}
+ className="focus-outline"
+ >
+ {headingText}
+ </Text>
+ <Text as={"p"} fontSize="18px" fontWeight="400" tabIndex={0} className="focus-outline">
+ {headingPara}
+ </Text>
+ </Flex>
+ )}
+ <Container as={"aside"} width="45%" mWidth="100%" className="featureAsset">
+ {isAImage ? (
+ <Image
+ src={imageSrc ? imageSrc : "This is a image"}
+ fill
+ alt={imageAltText ? imageAltText : ""}
+ className="featureImage"
+ />
+ ) : (
+ <iframe
+ className="featureVideo"
+ width="100%"
+ height="360"
+ allowFullScreen
+ frameBorder={0}
+ src={videoSrc ? videoSrc : "https://www.youtube.com/embed/ElZfdU54Cp8?si=Bsr85Bsc_wbeTEkG"}
+ title={videoAltText ? videoAltText : "This is a video"}
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+ ></iframe>
+ )}
+ </Container>
+ {!textOnLeft && (
+ <Flex
+ as={"main"}
+ gap="24px"
+ flexDirection="column"
+ width="calc(45% - 64px)"
+ mWidth="100%"
+ className="featureText"
+ >
+ <Text
+ as={"h2"}
+ fontSize="48px"
+ mFontSize="28px"
+ fontWeight="900"
+ letterSpacing="2px"
+ textTransform="uppercase"
+ fontFamily="sans-serif"
+ color="#707172"
+ tabIndex={0}
+ className="focus-outline"
+ >
+ {headingText}
+ </Text>
+ <Text as={"p"} fontSize="18px" fontWeight="400" tabIndex={0} className="focus-outline">
+ {headingPara}
+ </Text>
+ </Flex>
+ )}
+ </Flex>
+ );
+};
+
+export default Feature;

app/components/LoginContainer.tsx

@@ -18,15 +18,15 @@ const LoginContainer = () => {
 
  return (
  <Flex
- as={"main"}
+ as={"section"}
  backgroundColor={Theme.colors.white}
  height="100vh"
  padding="48px"
  mPadding="24px"
  justifyContent="center"
  alignItems="center"
  >
- <Container width="50%" padding="48px" mPadding="0" mWidth="100%" as={"section"} className="signin-signup">
+ <Container width="50%" padding="48px" mPadding="0" mWidth="100%" as={"article"} className="signin-signup">
  <Text
  fontSize="30px"
  fontWeight="500"

app/components/ScrollArrow.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Player } from "@lottiefiles/react-lottie-player";
-import Arrow from "../../public/images/rightArrowWhite.json";
+import rightArrowWhiteSrc from "../../public/images/rightArrowWhite.json";
+import trackArrowSrc from "../../public/images/trackArrow.json";
 import Container from "@/styles/Container.styled";
 import { useLenis } from "@studio-freight/react-lenis";
 
@@ -9,20 +10,38 @@ interface ScrollArrowProps {
  bottom?: string;
  left?: string;
  right?: string;
+ height?: string;
+ width?: string;
  rotate?: string;
+ scrollToId: string;
+ rightArrowWhite?: boolean;
+ trackArrow?: boolean;
+ className?: string;
 }
 
-const ScrollArrow = ({ top, bottom, left, right, rotate = "0deg" }: ScrollArrowProps) => {
+const ScrollArrow = ({
+ top,
+ bottom,
+ left,
+ right,
+ rotate = "0deg",
+ rightArrowWhite,
+ trackArrow,
+ scrollToId,
+ height,
+ width,
+ className
+}: ScrollArrowProps) => {
  const lenis = useLenis(() => {});
 
  const handleKBScroll = (event: React.KeyboardEvent<HTMLDivElement>) => {
  if (event.key === "Enter" || event.key === " ") {
- lenis.scrollTo("#container-2", { lerp: 0.05 });
+ lenis.scrollTo(scrollToId, { lerp: 0.05 });
  }
  };
 
  const handleScroll = () => {
- lenis.scrollTo("#container-2", { lerp: 0.05 });
+ lenis.scrollTo(scrollToId, { lerp: 0.05 });
  };
 
  return (
@@ -34,12 +53,23 @@ const ScrollArrow = ({ top, bottom, left, right, rotate = "0deg" }: ScrollArrowP
  $bottom={bottom}
  $right={right}
  $left={left}
+ role="button"
+ aria-label="arrow button to scroll down"
  cursor="pointer"
  onClick={handleScroll}
  onKeyDown={handleKBScroll}
- className="focus-outline"
+ className={`focus-outline ${className}`}
  >
- <Player autoplay loop src={Arrow} style={{ height: "150px", width: "150px" }}></Player>
+ {rightArrowWhite && (
+ <Player
+ autoplay
+ loop
+ src={rightArrowWhiteSrc}
+ style={{ height: height, width: width }}
+ className="rightArrowWhite"
+ />
+ )}
+ {trackArrow && <Player autoplay loop src={trackArrowSrc} className="trackArrow" />}
  </Container>
  );
 };

app/components/SignIn.tsx

@@ -68,13 +68,13 @@ const SignIn = () => {
  fontSize="18px"
  fontWeight="400"
  color="#b60000"
- as={"h3"}
+ as={"span"}
  $height="24px"
  data-cy="signInErrorMessage"
  aria-live="polite"
- role="status"
+ role="alert"
  >
- {isError ? isError : ""}
+ {isError ? isError : null}
  </Text>
  <Input
  value={email}
@@ -156,7 +156,7 @@ const SignIn = () => {
  }}
  >
  <Text fontWeight="600" fontSize="18px" tabIndex={-1}>
- {isPending ? "Submitting..." : "Login"}
+ {isPending ? "Submitting..." : "Sign In"}
  </Text>
  </Container>
  <Container

app/components/SignUp.tsx

@@ -8,6 +8,7 @@ import Input from "@/styles/Input.styled";
 import Container from "@/styles/Container.styled";
 import { FaRegEye, FaRegEyeSlash } from "react-icons/fa6";
 import Text from "@/styles/Text.styled";
+import { SERVER_URL } from "@/utils/global";
 
 const SignUp = () => {
  const [name, setName] = useState("");
@@ -79,7 +80,7 @@ const SignUp = () => {
  }
 
  try {
- const url = "http://localhost:5000/api/user/register";
+ const url = `${SERVER_URL}/api/user/register`;
  const data = {
  name,
  email,

app/components/WhatMakesItDifferent.tsx

@@ -1,9 +1,40 @@
-import React from "react";
+import React, { useEffect } from "react";
 import "./../Home.css";
 import Flex from "@/styles/Flex.styled";
 import ScrollArrow from "./ScrollArrow";
+import Container from "@/styles/Container.styled";
+import gsap from "gsap";
+import SplitTextJS from "split-text-js";
 
 const WhatMakesItDifferent = () => {
+ useEffect(() => {
+ const titles = gsap.utils.toArray(".ThreeDText");
+ const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.2 });
+ titles.forEach((title) => {
+ const splitTitle = new SplitTextJS(title);
+ // const splitTitle = new SplitText(title, { type: 'chars' });
+ tl.from(
+ splitTitle.chars,
+ {
+ opacity: 0,
+ y: 80,
+ rotateX: -90,
+ stagger: 0.02
+ },
+ "<"
+ ).to(
+ splitTitle.chars,
+ {
+ opacity: 0,
+ y: -80,
+ rotateX: 90,
+ stagger: 0.02
+ },
+ "<1"
+ );
+ });
+ }, []);
+
  return (
  <Flex
  backgroundColor="white"
@@ -13,8 +44,35 @@ const WhatMakesItDifferent = () => {
  id="container-2"
  padding="48px"
  mPadding="24px"
+ alignItems="center"
+ justifyContent="center"
+ className="whatMakesItDifferent"
+ as={"section"}
  >
- <ScrollArrow bottom="0" right="0" />
+ <Container as={"article"} tabIndex={-1}>
+ <Container
+ className="textWrapper focus-outline"
+ as={"main"}
+ tabIndex={0}
+ aria-label="What makes Byteping different?"
+ $position="relative"
+ >
+ <h2 className="ThreeDText">WHAT</h2>
+ <h2 className="ThreeDText">MAKES</h2>
+ <h2 className="ThreeDText">BYTEPING</h2>
+ <h2 className="ThreeDText">DIFFERENT</h2>
+ <h2 className="ThreeDText">?</h2>
+ </Container>
+ </Container>
+ <ScrollArrow
+ bottom="0"
+ right="0"
+ trackArrow
+ scrollToId="#container-1"
+ width="150px"
+ height="150px"
+ className="trackArrowContainer"
+ />
  </Flex>
  );
 };