hero section images

.gitignore

@@ -36,3 +36,7 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# Build files
+yarn.lock
+package-lock.json

components/ActiveLink.tsx

@@ -0,0 +1,63 @@
+import { useRouter } from 'next/router'
+import Link, { LinkProps } from 'next/link'
+import React, { useState, useEffect, ReactElement, Children } from 'react'
+
+type ActiveLinkProps = LinkProps & {
+    children: ReactElement
+    activeClassName: string
+}
+
+const ActiveLink = ({
+    children,
+    activeClassName,
+    ...props
+}: ActiveLinkProps) => {
+    const { asPath, isReady } = useRouter()
+
+    const child = Children.only(children)
+    const childClassName = child.props.className || ''
+    const [className, setClassName] = useState(childClassName)
+
+    useEffect(() => {
+        // Check if the router fields are updated client-side
+        if (isReady) {
+            // Dynamic route will be matched via props.as
+            // Static route will be matched via props.href
+            const linkPathname = new URL(
+                (props.as || props.href) as string,
+                location.href
+            ).pathname
+
+            // Using URL().pathname to get rid of query and hash
+            const activePathname = new URL(asPath, location.href).pathname
+
+            const newClassName =
+                linkPathname === activePathname
+                    ? `${childClassName} ${activeClassName}`.trim()
+                    : childClassName
+
+            if (newClassName !== className) {
+                setClassName(newClassName)
+            }
+        }
+    }, [
+        asPath,
+        isReady,
+        props.as,
+        props.href,
+        childClassName,
+        activeClassName,
+        setClassName,
+        className,
+    ])
+
+    return (
+        <Link {...props}>
+            {React.cloneElement(child, {
+                className: className || null,
+            })}
+        </Link>
+    )
+}
+
+export default ActiveLink

components/Banner.tsx

@@ -15,7 +15,7 @@ function BannerImage(
 
 function Banner({ className }: PropsWithClassName) {
   return (
-    <div className={`flex w-full ${className} pt-28`}>
+    <div className={`flex py-10 ${className}`}>
       <div className="basis-0 grow">
         <div className="mb-2.5 md:-mr-48">
           <span className="font-header text-primary text-3xl md:text-6xl md:leading-[5rem] lg:text-7xl lg:leading-[6rem] xl:text-8xl xl:leading-[8rem]">
@@ -30,25 +30,25 @@ function Banner({ className }: PropsWithClassName) {
         <CtaButton>Be a Member</CtaButton>
       </div>
 
-      <div className="hidden md:grid w-3/5 grid grid-cols-[repeat(15,1fr)] grid-rows-[repeat(5,60px)] lg:grid-rows-5">
+      <div className="hidden md:grid w-3/5 grid-cols-[repeat(15,1fr)] grid-rows-[repeat(5,60px)] lg:grid-rows-5">
         <BannerImage
           className="col-start-5 col-span-6 row-start-1 row-span-3 z-10"
-          src="https://picsum.photos/600?random=1"
+          src="/images/image1.png"
           alt=""
         />
         <BannerImage
           className="col-start-1 col-span-6 row-start-3 row-span-3"
-          src="https://picsum.photos/600?random=2"
+          src="/images/image2.png"
           alt=""
         />
         <BannerImage
           className="col-start-10 col-span-6 row-start-3 row-span-3 z-20"
-          src="https://picsum.photos/600?random=3"
+          src="/images/image3.png"
           alt=""
         />
       </div>
     </div>
   )
 }
 
-export {Banner as default}
+export { Banner as default }

components/CallToAction.tsx

@@ -0,0 +1,57 @@
+import { FaUsers } from "react-icons/fa";
+import { AiOutlineRise } from "react-icons/ai";
+import { ImEye } from "react-icons/im";
+import { GiPerson } from "react-icons/gi";
+
+
+const CallToAction = () => {
+  return (
+    <div className="my-[100px] bg-primary bg-opacity-10 h-auto rounded-3xl md:h-[446px] px-20 py-10">
+      <div className="flex justify-between leading-loose items-center">
+        <h2 className="font-medium text-2xl text-primary">We value:</h2>
+        <button className="hidden md:inline border-primary text-primary border-2 rounded-full px-6 py-2">
+          Be a member
+        </button>
+      </div>
+      <div className="flex w-auto py-10 mx-auto flex-col md:flex-row items-start md:space-x-6 lg:space-x-10 h-auto">
+		{
+			item_contents.map(x => <Item Icon={x[0]} h3text={x[1]} ptext={x[2]} key={x[2]} />)
+		}
+      </div>
+    </div>
+  )
+};
+
+
+const item_contents = [
+	// icon, heading, paragraph
+	[
+		FaUsers,
+		"Team Work",
+		"We are bringing together women in our community to work together and empower each other."
+	], [
+		AiOutlineRise,
+		"Technical Growth",
+		"We provide technical and non-technical sessions to help our members grow their skills."
+	], [
+		ImEye,
+		"Visibility",
+		"We create visibility for our members through volunteer opportunities and speaking sessions."
+	], [
+		GiPerson,
+		"Leadership",
+		"Our events provide an opportunity for members to volunteer, manage and organise break out sessions."
+	]
+]
+
+const Item = ({h3text, ptext, Icon}: any) => {
+	return (
+		<div className="space-y-4 flex flex-col items-center md:items-start text-darkAccent">
+			<Icon className="h-16 text-primary w-16" />
+			<h3 className="font-semibold">{h3text}</h3>
+			<p className="text-center md:text-start">{ptext}</p>
+		</div>
+	)
+}
+
+export default CallToAction;

components/EventsPane.tsx

@@ -0,0 +1,65 @@
+function SectionHeader() {
+  return (
+    <>
+      <h2 className="font-header text-primary text-3xl sm:text-4xl">Events we have in store for you:</h2>
+      <p className="hidden sm:block mt-2.5 font-light text-2xl">
+        RSVP for ucpoming events to connect with our speakers. Learn from our pasts events on youtube.
+      </p>
+    </>
+  );
+}
+
+type EventCardProps = {
+  imageUrl: string;
+  large?: boolean;
+  className?: string;
+};
+
+function EventCard({ imageUrl, large = false, className = "" }: EventCardProps): JSX.Element {
+  return (
+    <div
+      className={`group relative shadow-md rounded-2xl overflow-hidden aspect-square 
+            ${large ? "min-h-[320px] lg:max-h-[480px]" : "min-h-[150px] lg:max-h-[300px]"}
+            ${className}`}>
+      <a href="#">
+        <div className="absolute inset-0 flex items-center justify-center opacity-0 bg-primary/80 text-4xl text-gray font-semibold transition-opacity ease-in group-hover:opacity-100">
+          RSVP
+        </div>
+        <img src={imageUrl} className="object-cover w-full h-full" />
+      </a>
+    </div>
+  );
+}
+
+export default function EventsPane({className = ''}) {
+  return (
+    <div className={`pb-10 ${className}`}>
+      {/* Mobile & Tablet */}
+      <div className="lg:hidden">
+        <SectionHeader />
+
+        <div className="mt-4 md:mt-8 grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-4 md:gap-x-8">
+          <EventCard imageUrl="/images/event-posters/sample-sca-event-poster-1.png" className="col-span-2" large />
+          <EventCard imageUrl="/images/event-posters/sample-sca-event-poster-2.png" />
+          <EventCard imageUrl="/images/event-posters/sample-sca-event-poster-3.png" />
+        </div>
+      </div>
+
+      {/* Larger screens */}
+      <div className="hidden lg:flex justify-between">
+        <div className="flex-1 pr-4">
+          <SectionHeader />
+
+          <div className="mt-5 flex space-x-8">
+            <EventCard imageUrl="/images/event-posters/sample-sca-event-poster-2.png" />
+            <EventCard imageUrl="/images/event-posters/sample-sca-event-poster-3.png" />
+          </div>
+        </div>
+
+        <div className="w-1/2">
+          <EventCard imageUrl="/images/event-posters/sample-sca-event-poster-1.png" className="xl:mx-auto" large />
+        </div>
+      </div>
+    </div>
+  );
+}

components/Footer.tsx

@@ -0,0 +1,98 @@
+type PropsWithClassName<T = {}> = { className?: string } & T
+
+const footerMenuItems = [
+    {
+        name: 'Go to Home',
+        href: '/',
+    },
+    {
+        name: 'Meet the Team',
+        href: '/team',
+    },
+    {
+        name: 'Recent Blog Posts',
+        href: '/blog',
+    },
+]
+const eventItems = [
+    {
+        name: 'Architecting software',
+        href: '#',
+    },
+    {
+        name: 'Imposter syndrome in a Techie',
+        href: '#',
+    },
+    {
+        name: 'Supporting women in their growth',
+        href: '#',
+    },
+]
+
+function Footer({ className }: PropsWithClassName) {
+    return (
+        <footer className={`py-4 md:pt-8 ${className}`}>
+            <div className="md:flex md:justify-between">
+                <div className="mb-6 md:mb-0">
+                    <div>
+                        <p className="pt-3">Our Partners</p>
+                        <div className="flex flex-row pt-3 gap-5">
+                            <a href="#" className="">
+                                <img src="/images/21cskills_colored 2.png" className="" alt="FlowBite Logo" />
+                            </a>
+                            <a href="#" className="">
+                                <img src="/images/she-code-africa-logo 3.png" className="" alt="FlowBite Logo" />
+                            </a>
+                        </div>
+                    </div>
+                    <div>
+                        <p className="pt-3">Our Socials</p>
+                        <div className="flex flex-row pt-3 gap-5">
+                            <a href="#" className="">
+                                <img src="/images/logos_twitter.png" className="" alt="Twitter" />
+                            </a>
+                            <a href="#" className="">
+                                <img src="/images/logos_youtube-icon.png" className="" alt="Youtube" />
+                            </a>
+                            <a href="#" className="">
+                                <img src="/images/logos_linkedin-icon.png" className="" alt="Linkedin" />
+                            </a>
+                        </div>
+                    </div>
+
+                </div>
+                <div className="mb-6 md:mb-0">
+                    {footerMenuItems.map((item) => (
+                        <a key={item.name}
+                            href={item.href}
+                            className="pt-3 flex items-center rounded-md"
+                        >
+                            <span className="md:ml-3">{item.name}</span>
+                        </a>
+                    ))}
+                </div>
+                <div className="mb-6 md:mb-0">
+                    <p className="md:ml-3 pt-3">Explore our Events</p>
+                    {eventItems.map((item) => (
+                        <a key={item.name}
+                            href={item.href}
+                            className="pt-3 flex items-center rounded-md"
+                        >
+                            <span className="md:ml-3 font-light">{item.name}</span>
+                        </a>
+                    ))}
+                </div>
+            </div>
+            <hr className="my-6 border-2 border-[#FFF0F8] sm:mx-auto  lg:my-8" />
+            <div className="sm:flex sm:items-center sm:justify-between">
+                <span className="text-sm sm:text-center">All Rights Reserved <span>{(new Date()).getFullYear()}</span>.
+                </span>
+                <div className="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
+                    <span>Designed by M. W. N</span>
+                </div>
+            </div>
+        </footer>
+    )
+}
+
+export { Footer as default }