diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/DarkSwitch.js | 53 | ||||
| -rw-r--r-- | components/benefits.js | 78 | ||||
| -rw-r--r-- | components/container.js | 14 | ||||
| -rw-r--r-- | components/cta.js | 30 | ||||
| -rw-r--r-- | components/data.js | 60 | ||||
| -rw-r--r-- | components/faq.js | 57 | ||||
| -rw-r--r-- | components/flexibleForm.js | 109 | ||||
| -rw-r--r-- | components/footer.js | 151 | ||||
| -rw-r--r-- | components/hero.js | 575 | ||||
| -rw-r--r-- | components/navbar.js | 102 | ||||
| -rw-r--r-- | components/popupWidget.js | 318 | ||||
| -rw-r--r-- | components/sectionTitle.js | 31 |
12 files changed, 1578 insertions, 0 deletions
diff --git a/components/DarkSwitch.js b/components/DarkSwitch.js new file mode 100644 index 0000000..0f17c59 --- /dev/null +++ b/components/DarkSwitch.js @@ -0,0 +1,53 @@ +import React, { useState, useEffect } from "react"; +import { useTheme } from "next-themes"; + +const ThemeChanger = () => { + const [mounted, setMounted] = useState(false); + const { theme, setTheme } = useTheme(); + + // When mounted on client, now we can show the UI + useEffect(() => setMounted(true), []); + + if (!mounted) return null; + + return ( + <div className="flex items-center"> + {theme === "dark" ? ( + <button + onClick={() => setTheme("light")} + className="text-gray-300 rounded-full outline-none focus:outline-none"> + <span className="sr-only">Light Mode</span> + + <svg + xmlns="http://www.w3.org/2000/svg" + className="w-5 h-5" + viewBox="0 0 20 20" + fill="currentColor"> + <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /> + </svg> + </button> + ) : ( + <button + onClick={() => setTheme("dark")} + className="text-gray-500 rounded-full outline-none focus:outline-none focus-visible:ring focus-visible:ring-gray-100 focus:ring-opacity-20"> + <span className="sr-only">Dark Mode</span> + <svg + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="1" + strokeLinecap="round" + strokeLinejoin="round"> + <circle cx="12" cy="12" r="5" /> + <path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4" /> + </svg> + </button> + )} + </div> + ); +}; + +export default ThemeChanger; diff --git a/components/benefits.js b/components/benefits.js new file mode 100644 index 0000000..b68bd3b --- /dev/null +++ b/components/benefits.js @@ -0,0 +1,78 @@ +import Image from "next/image"; +import React from "react"; +import Container from "./container"; + +const Benefits = (props) => { + const { data } = props; + return ( + <> + <Container className="flex flex-wrap mb-20 lg:gap-10 lg:flex-nowrap "> + <div + className={`flex items-center justify-center w-full lg:w-1/2 ${ + props.imgPos === "right" ? "lg:order-1" : "" + }`}> + <div> + <Image + src={data.image} + width="521" + height="auto" + alt="Benefits" + className={"object-cover"} + placeholder="blur" + blurDataURL={data.image.src} + /> + </div> + </div> + + <div + className={`flex flex-wrap items-center w-full lg:w-1/2 ${ + data.imgPos === "right" ? "lg:justify-end" : "" + }`}> + <div> + <div className="flex flex-col w-full mt-4"> + <h3 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white"> + {data.title} + </h3> + + <p className="max-w-2xl py-4 text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300"> + {data.desc} + </p> + </div> + + <div className="w-full mt-5"> + {data.bullets.map((item, index) => ( + <Benefit key={index} title={item.title} icon={item.icon}> + {item.desc} + </Benefit> + ))} + </div> + </div> + </div> + </Container> + </> + ); +}; + +function Benefit(props) { + return ( + <> + <div className="flex items-start mt-8 space-x-3"> + <div className="flex items-center justify-center flex-shrink-0 mt-1 bg-indigo-500 rounded-md w-11 h-11 "> + {React.cloneElement(props.icon, { + className: "w-7 h-7 text-indigo-50", + })} + </div> + <div> + <h4 className="text-xl font-medium text-gray-800 dark:text-gray-200"> + {props.title} + </h4> + <p className="mt-1 text-gray-500 dark:text-gray-400"> + {props.children} + </p> + </div> + </div> + </> + ); +} + +export default Benefits; diff --git a/components/container.js b/components/container.js new file mode 100644 index 0000000..f7ea709 --- /dev/null +++ b/components/container.js @@ -0,0 +1,14 @@ +import React from "react"; + +const Container = (props) => { + return ( + <div + className={`container p-8 mx-auto xl:px-0 ${ + props.className ? props.className : "" + }`}> + {props.children} + </div> + ); +} + +export default Container;
\ No newline at end of file diff --git a/components/cta.js b/components/cta.js new file mode 100644 index 0000000..1991b3c --- /dev/null +++ b/components/cta.js @@ -0,0 +1,30 @@ +import React from "react"; +import Container from "./container"; + +const Cta = () => { + return ( + <Container> + <div className="flex flex-wrap items-center justify-between w-full max-w-4xl gap-5 mx-auto text-white bg-indigo-600 px-7 py-7 lg:px-12 lg:py-12 lg:flex-nowrap rounded-xl"> + <div className="flex-grow text-center lg:text-left"> + <h2 className="text-2xl font-medium lg:text-3xl"> + Ready to try-out Helping Hands? + </h2> + <p className="mt-2 font-medium text-white text-opacity-90 lg:text-xl"> + Join us now to connect, volunteer, and make a difference! + </p> + </div> + <div className="flex-shrink-0 w-full text-center lg:w-auto"> + <a + href="https://helpinghands.com/signup" + target="_blank" + rel="noopener" + className="inline-block py-3 mx-auto text-lg font-medium text-center text-indigo-600 bg-white rounded-md px-7 lg:px-10 lg:py-5 "> + Sign Up for Free + </a> + </div> + </div> + </Container> + ); +} + +export default Cta;
\ No newline at end of file diff --git a/components/data.js b/components/data.js new file mode 100644 index 0000000..957600f --- /dev/null +++ b/components/data.js @@ -0,0 +1,60 @@ +import { + FaceSmileIcon, + ChartBarSquareIcon, + CursorArrowRaysIcon, + DevicePhoneMobileIcon, + AdjustmentsHorizontalIcon, + SunIcon, +} from "@heroicons/react/24/solid"; + +import benefitOneImg from "../public/img/benefit-one.png"; +import benefitTwoImg from "../public/img/benefit-two.png"; + +const benefitOne = { + title: "Sign Up as an Organization", + desc: "Join Helping Hands and showcase your opportunities to a wide audience of volunteers. Here's how:", + image: benefitOneImg, + bullets: [ + { + title: "Create Your Profile", + desc: "Provide details about your organization, including your mission, location, and the types of volunteer opportunities you offer.", + icon: <FaceSmileIcon />, + }, + { + title: "Post Opportunities", + desc: "List specific volunteer opportunities available within your organization, including dates, times, and required skills or qualifications.", + icon: <ChartBarSquareIcon />, + }, + { + title: "Connect with Volunteers", + desc: "Receive applications from interested volunteers and communicate directly with them to coordinate volunteer activities.", + icon: <CursorArrowRaysIcon />, + }, + ], +}; + +const benefitTwo = { + title: "Sign Up as a Volunteer", + desc: "Get involved with causes you care about and make a difference in your community through Helping Hands. Here's how:", + image: benefitTwoImg, + bullets: [ + { + title: "Create Your Profile", + desc: "Set up your volunteer profile, including your interests, skills, and availability.", + icon: <DevicePhoneMobileIcon />, + }, + { + title: "Browse Opportunities", + desc: "Explore a variety of volunteer opportunities posted by organizations, sorted by cause, location, and time commitment.", + icon: <AdjustmentsHorizontalIcon />, + }, + { + title: "Apply and Volunteer", + desc: "Submit applications for volunteer opportunities that match your interests, and start making a positive impact.", + icon: <SunIcon />, + }, + ], +}; + + +export {benefitOne, benefitTwo}; diff --git a/components/faq.js b/components/faq.js new file mode 100644 index 0000000..7e9fb2f --- /dev/null +++ b/components/faq.js @@ -0,0 +1,57 @@ +import React from "react"; +import Container from "./container"; +import { Disclosure } from "@headlessui/react"; +import { ChevronUpIcon } from "@heroicons/react/24/solid"; + +const Faq = () => { + return ( + <Container className="!p-0"> + <div className="w-full max-w-2xl p-2 mx-auto rounded-2xl"> + {faqdata.map((item, index) => ( + <div key={item.question} className="mb-5"> + <Disclosure> + {({ open }) => ( + <> + <Disclosure.Button className="flex items-center justify-between w-full px-4 py-4 text-lg text-left text-gray-800 rounded-lg bg-gray-50 hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-indigo-100 focus-visible:ring-opacity-75 dark:bg-trueGray-800 dark:text-gray-200"> + <span>{item.question}</span> + <ChevronUpIcon + className={`${ + open ? "transform rotate-180" : "" + } w-5 h-5 text-indigo-500`} + /> + </Disclosure.Button> + <Disclosure.Panel className="px-4 pt-4 pb-2 text-gray-500 dark:text-gray-300"> + {item.answer} + </Disclosure.Panel> + </> + )} + </Disclosure> + </div> + ))} + </div> + </Container> + ); +} + +const faqdata = [ + { + question: "What is Helping Hands and how does it work?", + answer: " Helping Hands is a platform designed to connect volunteers with non-profit organizations. Through our user-friendly interface, volunteers can browse and sign up for various opportunities posted by organizations seeking assistance. Likewise, non-profit organizations can create accounts to post volunteer opportunities and connect with eager volunteers.", + }, + { + question: "What types of organizations can utilize Helping Hands?", + answer: "Helping Hands is open to all types of organizations, including non-profits, community groups, charities, schools, and other mission-driven entities. Whether you're a local organization serving your community or a larger non-profit with a global reach, you can benefit from our platform to connect with volunteers and expand your impact.", + }, + { + question: "As an individual, how can I get involved with Helping Hands?", + answer: + "There are several ways for individuals to get involved with Helping Hands. You can sign up as a volunteer on our platform, browse through the available opportunities posted by organizations, and apply to participate in projects that align with your interests and skills. Additionally, you can spread the word about Helping Hands to your friends, family, and social networks to help grow our community and make an even greater impact together.", + }, + { + question: "How does Helping Hands ensure safety and credibility for users?", + answer: + "Ensuring the safety and credibility of organizations is paramount at Helping Hands. We conduct rigorous vetting procedures to verify the legitimacy of non-profit organizations before they can post volunteer opportunities. Additionally, our platform fosters transparency and accountability through volunteer reviews and ratings. If you have any concerns about an organization's credibility, our support team is here to assist you promptly.", + }, +]; + +export default Faq;
\ No newline at end of file diff --git a/components/flexibleForm.js b/components/flexibleForm.js new file mode 100644 index 0000000..22a907f --- /dev/null +++ b/components/flexibleForm.js @@ -0,0 +1,109 @@ +import React from 'react'; +import Container from "./container"; +import Image from 'next/image'; +import { useRouter } from "next/router"; + +const FlexibleForm = ({ imgPos, data, route}) => { + const router = useRouter(); + + const handleSubmit = async (event) => { + event.preventDefault(); + const formData = new FormData(event.target); + + try { + const response = await fetch(data.formAction, { + method: data.formMethod, + body: JSON.stringify(Object.fromEntries(formData)), + headers: { + 'Content-Type': 'application/json' + }, + }); + + if (!response.ok) { + throw new Error(response.text()); + } + + console.log('Form submitted successfully'); + if (route) { + router.push(route); + } + } catch (error) { + console.error('Error submitting form:', error); + } + } + + + const renderImage = ( + <div className={`flex items-center justify-center w-full lg:w-1/2 hidden lg:flex ${imgPos === "right" ? "lg:order-1" : ""}`}> + <div> + <Image + src={data.image} + width="521" + height="auto" + alt="Benefits" + className={"object-cover"} + placeholder="blur" + blurDataURL={data.image.src} + /> + </div> + </div> + ); + + const renderForm = ( + <div className={`flex items-center justify-center w-full lg:w-1/2 ${data.imgPos === "right" ? "lg:justify-end" : ""}`}> + <div> + <div className="flex flex-col w-full mt-4"> + <h3 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white"> + {data.title} + </h3> + <p className="max-w-2xl text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300"> + {data.subtitle} + </p> + </div> + <div className="mt-5 sm:mx-auto sm:w-full sm:max-w-sm"> + <form onSubmit={handleSubmit} id="testform" className="space-y-3" action={data.formAction} method={data.formMethod}> + {data.formFields.map((field, index) => ( + <div key={index}> + <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-gray-900">{field.label}</label> + <div className="mt-0"> + <input + id={field.name} + name={field.name} + type={field.type} + autoComplete={field.autoComplete} + required={field.required} + className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + /> + </div> + </div> + ))} + <div> + <button type="submit" className="flex w-full justify-center rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> + {data.ctaText || "Submit"} + </button> + </div> + </form> + {data.underneathButton && ( + <div className="mt-3 text-center"> + <a href={data.underneathButton.url} className="text-sm text-indigo-600 hover:text-indigo-500">{data.underneathButton.text}</a> + </div> + )} + {data.ctaLink && ( + <p className="mt-10 text-center text-sm text-gray-500"> + {data.ctaLink.text} <a href={data.ctaLink.url} className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">{data.ctaLink.linkText}</a> + </p> + )} + </div> + </div> + </div> + ); + + return ( + <Container className="flex flex-wrap mb-0 lg:gap-10 lg:flex-nowrap"> + {imgPos === "left" ? renderImage : renderForm} + {imgPos === "left" ? renderForm : renderImage} + </Container> + ); +}; + +export default FlexibleForm; diff --git a/components/footer.js b/components/footer.js new file mode 100644 index 0000000..02bbc00 --- /dev/null +++ b/components/footer.js @@ -0,0 +1,151 @@ +import Link from "next/link"; +import Image from "next/image"; +import React from "react"; +import Container from "./container"; + +export default function Footer() { + const companyItems = [ + "About", + "Contact Us", + "Careers" + ]; + const resourcesItems = [ + "Help Center", + "Terms of Service", + "Privacy Policy" + ]; + return ( + <div className="relative"> + <Container> + <div className="grid max-w-screen-xl grid-cols-1 gap-10 pt-10 mx-auto mt-5 border-t border-gray-100 dark:border-trueGray-700 lg:grid-cols-5"> + <div className="lg:col-span-2"> + <div> + {" "} + <Link href="/" className="flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100"> + <Image + src="/img/logo.svg" + alt="N" + width="32" + height="32" + className="w-8" + /> + <span>Helping Hands</span> + </Link> + </div> + + <div className="max-w-md mt-2.5 text-gray-500 dark:text-gray-400"> + Connect. Volunteer. Make a Difference. + </div> + <div className="max-w-md mt-2 text-gray-500 dark:text-gray-400"> + Join us in our mission to connect volunteers with meaningful opportunities to make a difference. Together, we can create positive change in communities worldwide. + </div> + </div> + + <div> + <div className="flex flex-wrap w-full -mt-2 -ml-3 lg:ml-0"> + <div className="w-full px-4 py-2 font-bold uppercase text-indigo-500 dark:text-gray-300 hover:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> + Company + </div> + {companyItems.map((item, index) => ( + <Link key={index} href={`/${item.toLowerCase().replace(/\s+/g, '-')}`} className="w-full px-4 py-0.5 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> + {item} + </Link> + ))} + </div> + </div> + <div> + <div className="flex flex-wrap w-full -mt-2 -ml-3 lg:ml-0"> + <div className="w-full px-4 py-2 font-bold uppercase text-indigo-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> + Resources + </div> + {resourcesItems.map((item, index) => ( + <Link key={index} href={`/${item.toLowerCase().replace(/\s+/g, '-')}`} className="w-full px-4 py-0.5 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> + {item} + </Link> + ))} + </div> + </div> + <div className="flex flex-wrap w-full -mt-2 -ml-3 lg:ml-0"> + <div className="w-full px-4 py-2 font-bold uppercase text-indigo-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> + Connect With Us + <div className="flex mt-2.5 space-x-2 text-gray-400 dark:text-gray-500"> + <a + href="https://twitter.com/helpinghands" + target="_blank" + rel="noopener"> + <span className="sr-only">Twitter</span> + <Twitter /> + </a> + <a + href="https://facebook.com/helpinghands" + target="_blank" + rel="noopener"> + <span className="sr-only">Facebook</span> + <Facebook /> + </a> + <a + href="https://instagram.com/helpinghands" + target="_blank" + rel="noopener"> + <span className="sr-only">Instagram</span> + <Instagram /> + </a> + <a + href="https://linkedin.com/helpinghands" + target="_blank" + rel="noopener"> + <span className="sr-only">Linkedin</span> + <Linkedin /> + </a> + </div> + </div> + </div> + </div> + <div className="my-10 text-sm text-center text-gray-600 dark:text-gray-400"> + Copyright © 2024 Helping Hands. All rights reserved. + </div> + </Container></div> + ); +} +const Twitter = ({ size = 24 }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + width={size} + height={size} + viewBox="0 0 24 24" + fill="currentColor"> + <path d="M24 4.37a9.6 9.6 0 0 1-2.83.8 5.04 5.04 0 0 0 2.17-2.8c-.95.58-2 1-3.13 1.22A4.86 4.86 0 0 0 16.61 2a4.99 4.99 0 0 0-4.79 6.2A13.87 13.87 0 0 1 1.67 2.92 5.12 5.12 0 0 0 3.2 9.67a4.82 4.82 0 0 1-2.23-.64v.07c0 2.44 1.7 4.48 3.95 4.95a4.84 4.84 0 0 1-2.22.08c.63 2.01 2.45 3.47 4.6 3.51A9.72 9.72 0 0 1 0 19.74 13.68 13.68 0 0 0 7.55 22c9.06 0 14-7.7 14-14.37v-.65c.96-.71 1.79-1.6 2.45-2.61z" /> + </svg> +); + +const Facebook = ({ size = 24 }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + width={size} + height={size} + viewBox="0 0 24 24" + fill="currentColor"> + <path d="M24 12.07C24 5.41 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.04V9.41c0-3.02 1.8-4.7 4.54-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.5c-1.5 0-1.96.93-1.96 1.89v2.26h3.32l-.53 3.5h-2.8V24C19.62 23.1 24 18.1 24 12.07" /> + </svg> +); +const Instagram = ({ size = 24 }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + width={size} + height={size} + viewBox="0 0 24 24" + fill="currentColor"> + <path d="M16.98 0a6.9 6.9 0 0 1 5.08 1.98A6.94 6.94 0 0 1 24 7.02v9.96c0 2.08-.68 3.87-1.98 5.13A7.14 7.14 0 0 1 16.94 24H7.06a7.06 7.06 0 0 1-5.03-1.89A6.96 6.96 0 0 1 0 16.94V7.02C0 2.8 2.8 0 7.02 0h9.96zm.05 2.23H7.06c-1.45 0-2.7.43-3.53 1.25a4.82 4.82 0 0 0-1.3 3.54v9.92c0 1.5.43 2.7 1.3 3.58a5 5 0 0 0 3.53 1.25h9.88a5 5 0 0 0 3.53-1.25 4.73 4.73 0 0 0 1.4-3.54V7.02a5 5 0 0 0-1.3-3.49 4.82 4.82 0 0 0-3.54-1.3zM12 5.76c3.39 0 6.2 2.8 6.2 6.2a6.2 6.2 0 0 1-12.4 0 6.2 6.2 0 0 1 6.2-6.2zm0 2.22a3.99 3.99 0 0 0-3.97 3.97A3.99 3.99 0 0 0 12 15.92a3.99 3.99 0 0 0 3.97-3.97A3.99 3.99 0 0 0 12 7.98zm6.44-3.77a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z" /> + </svg> +); + +const Linkedin = ({ size = 24 }) => ( + <svg + xmlns="http://www.w3.org/2000/svg" + width={size} + height={size} + viewBox="0 0 24 24" + fill="currentColor"> + <path d="M22.23 0H1.77C.8 0 0 .77 0 1.72v20.56C0 23.23.8 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.2 0 22.23 0zM7.27 20.1H3.65V9.24h3.62V20.1zM5.47 7.76h-.03c-1.22 0-2-.83-2-1.87 0-1.06.8-1.87 2.05-1.87 1.24 0 2 .8 2.02 1.87 0 1.04-.78 1.87-2.05 1.87zM20.34 20.1h-3.63v-5.8c0-1.45-.52-2.45-1.83-2.45-1 0-1.6.67-1.87 1.32-.1.23-.11.55-.11.88v6.05H9.28s.05-9.82 0-10.84h3.63v1.54a3.6 3.6 0 0 1 3.26-1.8c2.39 0 4.18 1.56 4.18 4.89v6.21z" /> + </svg> +);
\ No newline at end of file diff --git a/components/hero.js b/components/hero.js new file mode 100644 index 0000000..ec4e363 --- /dev/null +++ b/components/hero.js @@ -0,0 +1,575 @@ +import Image from "next/image"; +import Container from "./container"; +import volunteerImg from "../public/img/volunteer.png"; + +const Hero = () => { + return ( + <> + <Container className="flex flex-wrap "> + <div className="flex items-center w-full lg:w-1/2"> + <div className="max-w-2xl mb-8"> + <h1 className="text-4xl font-bold leading-snug tracking-tight text-gray-800 lg:text-4xl lg:leading-tight xl:text-6xl xl:leading-tight dark:text-white"> + Helping Hands + </h1> + <h1 className="text-4xl font-bold leading-snug tracking-tight text-gray-800 lg:text-2xl lg:leading-tight xl:text-6xl xl:leading-tight dark:text-white"> + Connect. Volunteer. Make a Difference. + </h1> + <p className="py-5 text-xl leading-normal text-gray-500 lg:text-xl xl:text-2xl dark:text-gray-300"> + Find volunteer opportunities or assistance for your organization with Helping Hands. Swipe through diverse charities, events, and initiatives to make a difference. Join us today! + </p> + + <div className="flex flex-col items-start space-y-3 sm:space-x-4 sm:space-y-0 sm:items-center sm:flex-row"> + <a + href="https://helpinghands.com/signup" + target="_blank" + rel="noopener" + className="px-8 py-4 text-lg font-medium text-center text-white bg-indigo-600 rounded-md "> + Get Started for Free + </a> + <a + href="https://web3templates.com/templates/Helping Hands-landing-page-template-for-startups" + target="_blank" + rel="noopener" + className="px-9 py-4 text-lg font-medium text-center text-white bg-indigo-600 rounded-md "> + Download our App + </a> + </div> + </div> + </div> + <div className="flex items-center justify-center w-full lg:w-1/2"> + <div className=""> + <Image + src={volunteerImg} + width="616" + height="617" + className={"object-cover"} + alt="Hero Illustration" + loading="eager" + placeholder="blur" + /> + </div> + </div> + </Container> + <Container> + <div className="flex flex-col justify-center"> + <div className="text-xl text-center text-gray-700 dark:text-white"> + Used by over <span className="text-indigo-600">100+</span>{" "} + organizations worldwide + </div> + <div className="flex flex-wrap justify-center gap-5 mt-10 md:justify-around"> + <div className="text-gray-400 dark:text-gray-400"> + <HabitatForHumanity /> + </div> + <div className="pt-2 text-gray-400 dark:text-gray-400"> + <VolunteerMatchLogo /> + </div> + <div className="text-gray-400 dark:text-gray-400"> + <AmericanCancerSocietyLogo /> + </div> + <div className="pt-1 text-gray-400 dark:text-gray-400"> + <ASPCALogo /> + </div> + <div className="text-gray-400 dark:text-gray-400"> + <AmericanRedCrossLogo /> + </div> + </div> + </div> + </Container> + </> + ); +} +function AmericanCancerSocietyLogo() { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + width="70" + height="40" + fill="currentColor" + viewBox="0 0 1380 777"> + + <defs> + <style>{".cls-1{fill:currentColor;}.cls-2{fill:currentColor;}"}</style> + </defs> + <g id="Layer_1-2"> + <g> + <g> + <path + className="cls-2" + d="M330.67,104.28h49.71l59.97,175.6h-42.68l-13.51-43.22h-56.73l-13.51,43.22h-42.14l58.89-175.6Zm42.14,97.26l-17.83-56.73-17.29,56.73h35.12Z" + /> + <path + className="cls-2" + d="M592.18,182.08c-12.97,0-23.23,9.19-23.23,25.39v72.94h-38.36v-72.94c0-16.21-7.02-25.39-19.45-25.39s-23.23,9.19-23.23,25.39v72.94h-38.36V149.67h38.36v15.13c9.19-12.43,22.69-18.91,36.74-18.91,17.29,0,30.26,7.56,37.28,21.61,9.73-14.05,25.39-21.61,43.77-21.61,27.56,0,44.31,19.45,44.31,53.49v80.51h-38.36v-72.94c0-15.67-7.02-24.85-19.45-24.85Z" + /> + <path + className="cls-2" + d="M664.58,215.04c0-45.39,32.96-68.62,65.92-68.62s66.46,23.77,66.46,68.62v11.89h-94.55c3.78,15.67,16.21,22.69,29.18,22.69,9.73,0,15.13-2.16,18.91-7.02h44.31c-11.35,28.1-38.36,41.06-63.22,41.06-32.96,0-67-23.23-67-68.62Zm92.39-14.59c-3.24-17.83-15.67-23.77-26.48-23.77-12.97,0-23.77,7.56-27.56,23.77h54.03Z" + /> + <path + className="cls-2" + d="M812.09,149.67h38.36v15.67c9.73-12.43,23.77-17.83,39.44-17.83v36.74c-28.64-5.94-39.44,7.02-39.44,23.23v72.94h-38.36V149.67Z" + /> + <path + className="cls-2" + d="M923.93,97.8c12.43,0,21.61,8.65,21.61,21.61s-9.19,21.61-21.61,21.61-21.61-8.65-21.61-21.61,8.65-21.61,21.61-21.61Zm-19.45,51.87h38.36v130.76h-38.36V149.67Z" + /> + <path + className="cls-2" + d="M957.97,215.04c0-45.39,32.96-68.62,66.46-68.62,28.1,0,56.19,16.21,64.84,50.25h-41.6c-4.86-10.27-13.51-14.59-23.23-14.59-16.21,0-26.48,11.89-26.48,32.96s10.27,32.96,26.48,32.96c10.81,0,18.37-5.4,23.23-17.29h41.6c-8.1,35.66-36.2,52.95-64.84,52.95-33.5,0-66.46-23.23-66.46-68.62Z" + /> + <path + className="cls-2" + d="M1098.45,215.04c0-45.39,29.72-68.62,59.97-68.62,17.29,0,30.8,5.94,40.52,16.75v-13.51h38.36v130.76h-38.36v-13.51c-9.73,10.81-23.23,16.75-40.52,16.75-30.26,0-59.97-23.23-59.97-68.62Zm70.24,32.96c18.37,0,30.26-11.89,30.26-32.96s-11.89-32.96-30.26-32.96-30.26,11.89-30.26,32.96,11.89,32.96,30.26,32.96Z" + /> + <path + className="cls-2" + d="M1321.06,182.08c-15.13,0-25.93,9.19-25.93,25.39v72.94h-38.36V149.67h38.36v15.67c9.73-12.43,23.77-18.91,39.44-18.91,28.64,0,46.47,19.45,46.47,53.49v80.51h-38.36v-72.94c.54-16.21-7.56-25.39-21.61-25.39Z" + /> + </g> + <g> + <path + className="cls-2" + d="M269.07,408.48c0-55.11,38.9-91.31,87.53-91.31,41.6,0,76.18,25.93,85.37,67.54h-43.22c-7.02-17.83-21.61-29.18-42.68-29.18-28.64,0-45.93,21.61-45.93,52.95s17.29,52.95,45.93,52.95c21.61,0,36.2-12.43,42.68-31.88h42.68c-8.65,43.22-43.22,70.24-85.37,70.24-48.09,.54-86.99-35.66-86.99-91.31Z" + /> + <path + className="cls-2" + d="M452.78,431.17c0-45.39,29.72-68.62,59.97-68.62,17.29,0,30.8,5.94,40.52,16.75v-13.51h38.36v130.76h-38.36v-13.51c-9.73,10.81-23.23,16.75-40.52,16.75-30.26,.54-59.97-23.23-59.97-68.62Zm70.24,33.5c18.37,0,30.26-11.89,30.26-32.96s-11.89-32.96-30.26-32.96-30.26,11.89-30.26,32.96c-.54,20.53,11.89,32.96,30.26,32.96Z" + /> + <path + className="cls-2" + d="M675.39,398.21c-15.13,0-25.93,9.19-25.93,25.39v72.94h-38.36v-130.76h38.36v15.67c9.73-12.43,23.77-18.91,39.44-18.91,28.64,0,46.47,19.45,46.47,53.49v80.51h-38.36v-72.94c.54-16.21-8.1-25.39-21.61-25.39Z" + /> + <path + className="cls-2" + d="M750.49,431.17c0-45.39,32.96-68.62,66.46-68.62,28.1,0,56.19,16.21,64.84,50.25h-41.6c-4.86-10.27-13.51-14.59-23.23-14.59-16.21,0-26.48,11.89-26.48,32.96s10.27,32.96,26.48,32.96c10.81,0,18.37-5.4,23.23-17.29h41.6c-8.1,35.66-36.2,52.95-64.84,52.95-34.04,.54-66.46-23.23-66.46-68.62Z" + /> + <path + className="cls-2" + d="M890.97,431.17c0-45.39,32.96-68.62,65.92-68.62s66.46,23.77,66.46,68.62v11.89h-94.55c3.78,15.67,16.21,22.69,29.18,22.69,9.73,0,15.13-2.16,18.91-7.02h44.31c-11.35,28.1-38.36,41.06-63.22,41.06-32.42,.54-67-23.23-67-68.62Zm92.93-14.59c-3.24-17.83-15.67-23.77-26.48-23.77-12.97,0-23.77,7.56-27.56,23.77h54.03Z" + /> + <path + className="cls-2" + d="M1039.02,365.79h38.36v15.67c9.73-12.43,23.77-17.83,39.44-17.83v36.74c-28.64-5.94-39.44,7.02-39.44,23.23v72.94h-38.36v-130.76Z" + /> + </g> + <path + className="cls-2" + d="M436.03,651.07c0-45.39,34.58-68.62,70.24-68.62s70.24,23.77,70.24,68.62-34.58,68.62-70.24,68.62-70.24-23.23-70.24-68.62Zm69.7,32.96c18.37,0,30.26-11.89,30.26-32.96s-11.89-32.96-30.26-32.96-30.26,11.89-30.26,32.96,11.89,32.96,30.26,32.96Z" + /> + <path + className="cls-2" + d="M586.24,651.07c0-45.39,32.96-68.62,66.46-68.62,28.1,0,56.19,16.21,64.84,50.25h-41.6c-4.86-10.27-13.51-14.59-23.23-14.59-16.21,0-26.48,11.89-26.48,32.96s10.27,32.96,26.48,32.96c10.81,0,18.37-5.4,23.23-17.29h41.6c-8.1,35.66-36.2,52.95-64.84,52.95-33.5,0-66.46-23.23-66.46-68.62Z" + /> + <path + className="cls-2" + d="M751.57,533.83c12.43,0,21.61,8.65,21.61,21.61s-9.19,21.61-21.61,21.61-21.61-8.65-21.61-21.61,8.64-21.61,21.61-21.61Zm-19.45,51.87h38.36v130.76h-38.36v-130.76Z" + /> + <path + className="cls-2" + d="M785.07,651.07c0-45.39,32.96-68.62,65.92-68.62s66.46,23.77,66.46,68.62v11.89h-94.55c3.78,15.67,16.21,22.69,29.18,22.69,9.73,0,15.13-2.16,18.91-7.02h44.31c-11.35,28.1-38.36,41.06-63.22,41.06-32.96,0-67-23.23-67-68.62Zm92.93-14.59c-3.24-17.83-15.67-23.77-26.48-23.77-12.97,0-23.77,7.56-27.56,23.77h54.03Z" + /> + <path + className="cls-2" + d="M1065.49,699.7l-49.71-114.01h41.6l28.1,67,25.93-67h39.44l-72.4,178.3h-39.44l26.48-64.3Z" + /> + <path + className="cls-2" + d="M378.22,612.17l-31.34-7.02c-15.13-3.78-16.75-10.27-16.75-15.67,0-10.27,9.19-16.75,23.77-16.75,18.37,0,25.39,9.73,28.64,18.37l.54,2.16h41.6l-.54-3.78c-6.48-32.42-32.42-51.87-70.24-51.87s-64.84,23.23-64.84,55.65c0,25.93,15.67,42.68,45.93,49.71l30.8,7.02c15.13,3.24,18.37,9.19,18.37,16.21,0,11.35-9.73,18.37-25.39,18.37-11.35,0-25.93-3.24-30.8-19.99l-.54-2.16h-42.68l.54,3.78c5.94,34.04,34.04,54.03,74.02,54.03s66.46-22.69,66.46-56.19c0-26.48-16.75-44.85-47.55-51.87Z" + /> + <path + className="cls-2" + d="M988.23,682.41c-4.86,0-7.02-3.24-7.02-8.1v-54.03h27.56v-34.04h-27.56v-46.47l-38.36,14.05v32.42h-19.45v34.04h19.45v54.03c0,24.85,19.99,42.14,45.39,42.14h23.77v-34.04h-23.77Z" + /> + <g> + <path + className="cls-1" + d="M145.88,483.58l-77.8,60.51c-14.05,10.81-16.75,31.34-5.4,45.39v.54l77.8-61.06c14.05-10.81,16.75-30.8,5.4-45.39h0Z" + /> + <path + className="cls-1" + d="M77.8,593.8c-14.05,11.35-16.75,31.88-5.4,45.93h0c1.08,1.62,2.7,3.24,4.32,4.32,1.08-5.94,4.32-10.81,9.19-15.13l40.52-31.88c14.05-11.35,16.75-31.88,5.4-45.93l-54.03,42.68Z" + /> + <path + className="cls-1" + d="M202.62,403.61c0-22.69-18.37-41.06-41.06-41.06h-31.34l12.97,16.21-12.97,16.21h30.8c4.32,0,8.65,3.24,8.65,8.1,0,2.7-1.08,4.86-2.7,6.48l-108.6,84.83c-14.05,11.35-16.75,31.88-5.4,45.93h0l134-104.82c9.73-7.02,15.67-18.91,15.67-31.88Z" + /> + <path + className="cls-1" + d="M16.75,436.03l48.09,37.82,26.48-21.07-55.65-43.22c-1.62-1.62-3.24-3.78-2.7-6.48,0-4.32,3.78-8.1,8.65-8.1h30.8l-12.97-16.21,12.97-16.21h-31.34c-22.69,0-41.06,18.37-41.06,41.06,.54,12.97,7.02,24.85,16.75,32.42Z" + /> + <polygon + className="cls-2" + points="101.58 0 82.67 32.96 82.67 430.09 101.58 445.22 121.03 430.09 121.03 32.96 101.58 0" + /> + <path + className="cls-2" + d="M114.01,680.79l6.48-63.76-28.1,22.15c-6.48,4.86-9.19,12.97-8.1,19.99l3.78,22.15c-4.86,3.78-8.1,10.27-8.1,16.75,0,11.89,9.73,21.61,21.61,21.61s21.61-9.73,21.61-21.61c0-7.02-3.78-13.51-9.19-17.29Z" + /> + </g> + <path + className="cls-2" + d="M1183.62,536.19c3.27,1.88,5.83,4.48,7.68,7.78,1.85,3.3,2.77,7.02,2.77,11.14s-.92,7.85-2.77,11.19c-1.85,3.34-4.41,5.95-7.68,7.84-3.27,1.88-6.97,2.83-11.09,2.83s-7.93-.94-11.19-2.83c-3.27-1.88-5.83-4.49-7.68-7.84-1.85-3.34-2.77-7.07-2.77-11.19s.92-7.84,2.77-11.14c1.85-3.3,4.41-5.9,7.68-7.78,3.27-1.88,7-2.83,11.19-2.83s7.82,.94,11.09,2.83Zm1.33,31.61c3.16-3.27,4.74-7.5,4.74-12.69s-1.58-9.42-4.74-12.69c-3.16-3.27-7.3-4.9-12.42-4.9s-9.33,1.64-12.42,4.9c-3.09,3.27-4.64,7.5-4.64,12.69s1.55,9.42,4.64,12.69c3.09,3.27,7.23,4.9,12.42,4.9s9.26-1.63,12.42-4.9Zm-4.16-12.85c-.89,1.17-2.12,2.01-3.68,2.51l5.97,8.85-6.72,.11-5.12-8.53h-1.81v8.53h-5.54v-22.92h10.23c2.42,0,4.35,.64,5.81,1.92,1.46,1.28,2.19,3.02,2.19,5.22,0,1.71-.45,3.14-1.33,4.32Zm-11.35-1.65h4.37c.78,0,1.44-.21,1.97-.64,.53-.43,.8-1.03,.8-1.81s-.27-1.37-.8-1.76c-.53-.39-1.19-.59-1.97-.59h-4.37v4.8Z" + /> + </g> + </g> + </svg> + ); +} +function AmericanRedCrossLogo() { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + width="128.7" + height="44.661" + viewBox="0 0 216.698 74.661" + > + <defs> + <radialGradient + id="b" + cx="0" + cy="0" + r="1" + fx="-0.004" + fy="-0.516" + gradientTransform="matrix(13.674 -1.4368 -1.4435 -13.737 51.144 1000.6)" + gradientUnits="userSpaceOnUse" + > + <stop offset="0" stopColor="#fff"></stop> + <stop offset="0.059" stopColor="#fff"></stop> + <stop offset="0.549" stopColor="#fff"></stop> + <stop offset="0.672" stopColor="#f1f1f1"></stop> + <stop offset="0.847" stopColor="#e4e4e4"></stop> + <stop offset="0.969" stopColor="#cac9ca"></stop> + <stop offset="0.999" stopColor="#fff"></stop> + <stop offset="1" stopColor="#fff"></stop> + </radialGradient> + </defs> + <g + clipPath="url(#p)" + opacity="0.8" + transform="matrix(1.25 0 0 -1.25 7.288 1287.3) translate(-79.039 -967.29) scale(1.9688)" + > + <g clipPath="url(#o)"> + <g clipPath="url(#n)"> + <path + fill="url(#b)" + d="M50.98 1013.9c-6.809-.044-12.64-5.201-13.368-12.132-.782-7.441 4.615-14.108 12.055-14.89 7.442-.781 14.111 4.617 14.891 12.057.784 7.442-4.618 14.108-12.06 14.89-.45.047-.896.072-1.34.075h-.178z" + ></path> + </g> + </g> + </g> + <g + fill="currentColor" + clipPath="url(#h)" + transform="matrix(1.253 0 0 -1.25 7.288 1287.3) translate(-79.039 -967.29) scale(1.9688)" + > + <g clipPath="url(#g)"> + <g clipPath="url(#f)"> + <path d="M48.055 1009.5v-6.068h-6.067v-6.065h6.067v-6.068h6.064v6.068h6.069v6.064l-6.069.001.002 6.068h-6.066z"></path> + </g> + </g> + </g> + <path + fill="currentColor" + d="M75.217 1009.395l-2.98-7.805h2.482l.37 1.168h2.83s.335-1.07.364-1.168h2.484c-.076.2-2.873 7.708-2.909 7.805h-2.64zm28.582-.01v-1.509h2.269v1.51h-2.269zm6.173-1.8c-.977 0-1.775-.345-2.309-.9-.505-.52-.795-1.33-.795-2.182 0-1.852 1.166-3.125 2.97-3.125 1.276 0 2.035.622 2.36.955.252.252.415.533.55.815l-1.64.899c-.118-.376-.395-1.002-1.08-1.002-.484 0-1.059.242-1.059 1.392 0 1.001.426 1.622 1.114 1.622.492 0 .842-.296 1.022-.91.145.08 1.52.858 1.64.927-.112.18-.256.38-.45.574-.86.872-1.967.934-2.323.934zm-14.873-.034c-1.837 0-3.07-1.28-3.07-3.07 0-.812.269-1.556.762-2.102a3.08 3.08 0 012.319-1.012c1.289 0 2.287.62 2.962 1.6-.154.063-1.622.674-1.734.722-.245-.53-.626-.788-1.106-.788-.206 0-.503.05-.741.29-.272.272-.286.56-.298.815l-.004.088h4c-.02.856-.054 1.77-.846 2.551a3.294 3.294 0 01-2.244.906zm21.467-.048c-.865 0-1.526-.17-2.019-.425-.744-.392-.907-.981-.989-1.478.17 0 1.869.05 1.977.053.092.455.31.605.822.605.688 0 .836-.29.848-.727l.003-.06-.057-.016c-.348-.101-.593-.158-1.225-.246-.957-.126-1.589-.208-2.099-.728-.308-.308-.464-.702-.464-1.172 0-.854.523-1.845 1.99-1.845 1.032 0 1.551.361 1.83.553l.133.092v-.522h2.024c-.108.18-.133.322-.133.64v3.19c0 .334 0 .839-.325 1.255-.39.502-1.17.831-2.316.831zm7.72-.04c-1.198 0-1.562-.58-1.759-.858l-.15-.213v.927h-2v-5.729h2.122v3.057c0 .252.01 1.015.858 1.015.85 0 .82-.681.82-.937v-3.135h2.122v3.62c0 .309 0 1.206-.552 1.744-.354.332-.837.51-1.46.51zm-39.068-.016c-1.18 0-1.479-.561-1.66-.853l-.153-.25v.959h-2.022v-5.717h2.122v3.114l.003.037c.01.194.023.436.24.655.162.162.36.255.627.255.337 0 .704-.164.808-.627.023-.114.033-.229.033-.34v-3.09h2.122v3.057c0 .12 0 .372.119.595.144.271.371.41.757.41.872 0 .841-.718.841-1.062v-3h2.12l.002 3.696h-.002c-.01.528-.022 1.125-.518 1.61-.348.35-.91.55-1.536.55-1.36 0-1.739-.72-1.846-.962l-.061-.149-.075.144c-.148.284-.349.612-1.07.838-.339.107-.648.13-.85.13zm-8.69-.008l.907-3.013h-1.839l.931 3.013zm26.504-.002c-.792 0-1.269-.148-1.861-.676l-.128-.114v.704h-2.035v-5.76h2.113v2.702c.01.361.037 1.32 1.445 1.32.13 0 .339-.009.466-.015v1.84zm.767-.122v-5.706h2.269v5.706h-2.269zm-8.644-1.134c.336 0 .727-.199.836-.644a.815.815 0 00.027-.148l.017-.174h-1.84l.024.1c.053.248.194.866.936.866zm22.04-1.892v-.11c0-.2 0-.4-.116-.657-.218-.48-.787-.666-1.12-.666-.469 0-.641.257-.641.456 0 .09.036.373.512.563v.003h.005c.18.06.357.1.53.14l.06.015c.221.062.436.139.644.21l.127.046zm-17.793-4.975c-1.203 0-2.223-.466-2.951-1.317-.644-.753-1.014-1.854-1.014-2.914 0-1.05.34-2.09.958-2.811.713-.833 1.753-1.288 3.007-1.288 1.18 0 2.237.417 2.974 1.144.346.345.59.79.772 1.131l-1.983.96c-.375-1.03-1.114-1.324-1.65-1.324-.592 0-1.045.246-1.345.73-.247.399-.38.953-.38 1.6 0 .303 0 1.226.61 1.81.164.167.527.444 1.102.444 1.052 0 1.486-.88 1.682-1.337l1.95.973c-.15.275-.36.636-.661.946-.774.797-1.867 1.253-3.07 1.253zm-27.165-.278v-7.808h2.318v2.826h.854l1.559-2.826h2.556l-1.873 3.108-.047.076.136.055c.344.138.642.254.926.56.381.387.575.927.575 1.543 0 .788-.342 1.82-1.3 2.23-.504.21-1.276.236-1.893.236h-3.811zm18.077-.01V996.456l-.152.134c-.231.21-.577.525-1.384.525-1.204 0-2.42-.947-2.42-2.895 0-1.858.98-3.134 2.496-3.134.317 0 .59.045.836.139.31.118.413.234.555.397l.134.154v-.547h2.055v7.797h-2.12zm-15.758-1.547h1.094c.383 0 1.281-.004 1.281-.946 0-.961-.923-.952-1.27-.952h-1.105v1.898zm36.892-.287c-1.028.005-1.881-.315-2.467-.898-.547-.543-.836-1.361-.836-2.25 0-.8.265-1.587.745-2.104.556-.6 1.398-.932 2.436-.932 1.024 0 1.878.305 2.466.853.57.53.87 1.337.87 2.217 0 .86-.333 1.777-.87 2.294-.251.237-.983.807-2.344.82zm6.419-.006c-.858 0-1.52-.235-1.968-.66a1.91 1.91 0 01-.551-1.31c0-1.162.99-1.483 1.525-1.638.513-.151.982-.227 1.183-.261.223-.032.64-.088.64-.422 0-.297-.34-.43-.675-.43-.307 0-.613.063-.936.194a2.768 2.768 0 00-.886.599c-.093-.085-1.059-.974-1.173-1.077.473-.382 1.423-1.172 3.019-1.172 1.824 0 2.64 1.034 2.64 2.119 0 .62-.303 1.156-.854 1.453-.27.14-.51.194-1.518.423l-.043.011c-.752.186-.933.225-.933.463 0 .142.073.376.564.376.604 0 1.145-.328 1.527-.567l1.139 1.04c-.275.206-.704.533-1.425.705a5.599 5.599 0 01-1.275.154zm6.004 0c-.86 0-1.521-.235-1.968-.66a1.908 1.908 0 01-.55-1.31c0-1.162.991-1.483 1.523-1.638.513-.151.982-.227 1.183-.261.224-.032.637-.088.637-.422 0-.297-.335-.43-.671-.43a2.46 2.46 0 00-.936.194 2.814 2.814 0 00-.888.599c-.093-.085-1.058-.974-1.172-1.077.473-.382 1.421-1.172 3.017-1.172 1.825 0 2.641 1.034 2.641 2.119 0 .62-.303 1.156-.853 1.453-.269.14-.51.194-1.517.423l-.046.011c-.752.186-.93.225-.93.463 0 .142.074.376.565.376.603 0 1.14-.328 1.525-.567.075.07 1.022.933 1.14 1.04-.276.206-.706.533-1.426.705a5.592 5.592 0 01-1.274.154zm-41.198-.007c-1.836 0-3.07-1.278-3.07-3.07 0-.81.27-1.555.762-2.101a3.081 3.081 0 012.319-1.011c1.289 0 2.288.618 2.962 1.598-.155.064-1.622.674-1.734.722-.245-.53-.625-.788-1.106-.788-.206 0-.501.05-.74.288-.273.274-.287.562-.298.819l-.003.085h3.998c-.02.856-.053 1.772-.846 2.554-.706.686-1.61.904-2.244.904zm25.066-.109c-.791-.005-1.268-.148-1.86-.676l-.128-.115v.702h-2.033v-5.762h2.111v2.709c.011.36.039 1.32 1.446 1.32.13 0 .338-.008.464-.017v1.84zm-25.012-1.26c.338 0 .728-.2.84-.645a.812.812 0 00.023-.147l.019-.173H81.77l.02.1c.055.247.195.864.936.864zm28.653-.142c.305.01.555-.077.745-.26.261-.254.394-.682.394-1.275 0-1.333-.613-1.613-1.126-1.613-.99 0-1.138.996-1.138 1.59 0 .57.146 1.533 1.125 1.559zm-21.973-.1c.299 0 .706-.188.868-.715.077-.23.092-.462.092-.742 0-.298 0-.849-.321-1.182a.913.913 0 00-.629-.276.865.865 0 00-.63.267c-.222.248-.333.634-.333 1.182 0 .26.021.48.067.69v.002l.002.001c.2.717.733.775.892.775z" + transform="matrix(1.25 0 0 -1.25 1.288 1287.3) translate(-79.039 -967.29) scale(1.9688)" + ></path> + </svg> + ); +} +function ASPCALogo() { + return ( + <svg + xmlns="http://www.w3.org/2000/svg" + width="115" + height="31" + fill="none" + viewBox="0 0 115 31"> + <g + fillRule="evenodd" + stroke="none" + transform="matrix(1.25 0 0 -1.25 -243.599 932.946)"> + <path + fill="currentColor" + d="M277.756 745.726h-4.764l-2.948-7.345c-1.284 3.582-5.13 7.976-11.63 7.976-3.785 0-6.827-1.49-8.956-3.714.818-1.422 1.22-3.064 1.22-4.715-.018-2.651-1.04-5.36-2.822-6.913l-.003-.001v-.003a9.162 9.162 0 00-1.166-.861c1.595-4.677 5.953-8.343 11.791-8.343 1.933 0 3.764.432 5.4 1.207l-.379-.944h6.486l1.25 3.423h8.215l1.15-3.423h6.553l-9.397 23.656zm-13.65-14.62c-.385-.831-1.919-3.994-5.692-3.994-3.93 0-6.36 3.453-6.36 7.03 0 3.36 2.27 6.909 6.328 6.909 3.263 0 5.051-2.365 5.723-4.124h5.356l-2.336-5.82h-3.02zm8.79-.818l2.431 8.085h.095l2.433-8.085h-4.959zm-49.015 11.016c1.852 0 2.042-1.503 2.173-2.3H231v3.914a7.295 7.295 0 01-.534.753c-1.536 1.82-4.06 2.686-6.395 2.686-3.964 0-8.278-2.527-8.278-6.968 0-4.444 4.122-6.11 5.786-6.78 3.643-1.534 4.633-1.918 4.633-3.485 0-1.085-.862-2.27-2.299-2.27-.767 0-2.46.48-2.46 3.229h-6.014v-.04l-6.303 15.865h-4.765l-9.492-23.656h6.49l1.245 3.418h8.216l1.151-3.418h6.554l-.538 1.354c1.31-1.066 3.222-1.8 5.98-1.8 3.634 0 5.822 1.284 7.023 3.03v8.039c-.842 1.049-2.195 2.013-4.308 2.962-4.25 1.92-4.889 2.21-4.889 3.614 0 1.118 1.024 1.853 2.078 1.853m-19.603-10.837l2.428 8.09h.097l2.43-8.09h-4.955z"> + </path> + <path + fill="currentColor" + d="M231.91 745.941h7.758c4.39 0 6.025-.672 7.31-1.731 1.858-1.537 2.791-3.877 2.791-6.282 0-2.404-.998-4.938-2.504-6.222-1.635-1.378-3.238-2.05-6.926-2.05h-2.628v-7.441h-5.802v23.726zm5.801-10.963h2.47c1.152 0 3.782 0 3.782 2.853 0 2.789-2.693 2.789-4.009 2.789h-2.243v-5.642z"> + </path> + </g> + </svg> + ); +} + +function HabitatForHumanity() { + return ( + <svg xmlns="http://www.w3.org/2000/svg" width="110" height="40" viewBox="0 0 200 70"> + <defs> + <clipPath id="clp5" clipRule="nonzero"> + <path d="M0 81.647V0h243.64v81.647"></path> + </clipPath> + <clipPath id="clp4" clipRule="nonzero"> + <path d="M-77.29-36.553v54.957H86.705v-54.957H-77.29z"></path> + </clipPath> + </defs> + <g transform="translate(-166.019 -427.524)"> + <g + fill="none" + stroke="none" + className="ps00" + transform="matrix(1.21584 0 0 -1.21584 103.326 1321.104)" + > + <g transform="matrix(1 0 0 -1 131.32 696.927)"> + <clipPath clipRule="nonzero"> + <path d="M-77.29-36.553v54.957H86.705v-54.957H-77.29z"></path> + </clipPath> + <g clipPath="url(#clp4)"> + <g transform="matrix(.6731 0 0 -.6731 -77.29 18.404)"> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M30.406 46.827a4.367 4.367 0 108.713.63 4.368 4.368 0 10-8.713-.63" + className="ps01" + ></path> + <path + fill="currentColorcurrentColor" + fillRule="nonzero" + stroke="none" + d="M81.672 46.827a4.369 4.369 0 11-8.715.63 4.369 4.369 0 018.715-.63" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M96.063 39.977c-.513 1.895-3.128 2.183-5.434 1.583-1.82-.475-8.153-2.232-13.775-1.824-4.04.292-7.989 3.653-10.446 5.953 2.441 2.814 5.59 5.833 6.312 6.679 1.044 1.217 1.217 3.129.348 3.998-.868.868-2.433.344-3.998-.698-1.561-1.042-7.471-6.992-13.108-6.992-5.635 0-11.738 5.95-13.303 6.992-1.564 1.042-3.825.869-4.694 0-.868-.869.002-2.083 1.046-3.3.739-.864 4.006-3.995 6.466-6.859-2.468-2.291-6.318-5.489-10.253-5.773-5.622-.408-11.956 1.349-13.775 1.824-2.306.6-4.921.312-5.435-1.583-.322-1.184.683-2.488 2.033-3.369 1.343-.876 8.308-2.23 10.267-5.226 1.958-2.994 2.257-26.162 4.082-26.939 1.33-.568 3.65-.568 4.91.074 1.768.896 4.75 26.173 6.255 29.42.833 1.792 2.929 4.472 4.799 6.731 1.611-7.55 3.373-35.673 5.071-36.26 1.284-.444 3.84-.444 4.867 0 1.675.724 3.508 29.588 5.145 36.591 1.935-2.323 4.2-5.181 5.074-7.062 1.505-3.247 4.486-28.524 6.253-29.42 1.262-.642 3.58-.642 4.912-.074 1.822.777 2.121 23.945 4.081 26.939 1.96 2.996 8.924 4.35 10.267 5.226 1.35.881 2.354 2.185 2.033 3.369" + className="ps01" + ></path> + <g + fill="currentColor" + fillRule="nonzero" + stroke="none" + className="ps01" + > + <clipPath clipRule="nonzero"> + <path d="M0 81.647V0h243.64v81.647"></path> + </clipPath> + <g clipPath="url(#clp5)"> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M51.67 56.097a4.367 4.367 0 004.37 4.367 4.367 4.367 0 000-8.735 4.369 4.369 0 00-4.37 4.368" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M96.935 55.789c2.123-3.369-2.323-4.633-5.718-3.857-2.844.648-30.734 15.561-34.916 15.945-4.168.38-29.256-15.044-32.021-16.524-4.062-2.172-7.65-1.965-11.401-.02-1.238.646-10.794 5.69-12.879 7.098 2.084 1.947 31.09 19.362 34.467 21.054 3.884 1.949 6.199 2.971 10.469 1.376 2.961-1.109 51.119-23.679 51.999-25.072" + className="ps02" + ></path> + </g> + </g> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M11.003 34.157c1.086-.161 6.214-2.371 8.245-3.417 4.882-2.514 5.135-5.014 5.692-9.083.595-4.335 1.107-12.412 1.192-15.472-2.043.876-10.042 7.57-11.951 9.22-1.48 1.283-3.135 2.198-3.132 4.185.003.759-.346 12.701-.046 14.567" + className="ps02" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M239.17 18.57h1c.67 0 .89.238.89.721 0 .423-.32.659-.75.659h-1.14v-1.38zm0-2.376h-.62v4.27h1.63c1 0 1.49-.403 1.49-1.213 0-.77-.5-1.094-1.11-1.174l1.23-1.883h-.68l-1.16 1.864h-.78v-1.864zm.79-.995c1.7 0 3.01 1.341 3.01 3.115 0 1.747-1.31 3.097-3.01 3.097-1.72 0-3.02-1.35-3.02-3.097 0-1.774 1.3-3.115 3.02-3.115zm0 6.763c2.01 0 3.68-1.576 3.68-3.648 0-2.091-1.67-3.668-3.68-3.668-2 0-3.69 1.577-3.69 3.668 0 2.072 1.69 3.648 3.69 3.648" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M116.32 57.872c-.18-2.146-.22-4.642-.22-7.314V45.52c.96-.045 1.92-.088 3.33-.088 1.4 0 2.36.043 3.32.088v5.038c0 2.672-.04 5.168-.21 7.314h8.28c-.44-4.511-.44-8.192-.44-15.638s0-11.128.44-15.639h-8.28c.17 2.144.21 4.645.21 7.315v6.395c-.96.045-1.92.088-3.32.088-1.41 0-2.37-.043-3.33-.088V33.91c0-2.67.04-5.171.22-7.315h-8.28c.43 4.511.43 8.193.43 15.639s0 11.127-.43 15.638h8.28" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M144.13 37.985c-2.75-.701-4.47-2.41-4.47-4.6 0-1.534.97-2.716 2.37-2.716.92 0 1.84.571 2.1.964v6.352zm-9.5 10.864c.61.087 2.98.349 4.6.349 9.06 0 11.82-3.547 11.82-9.417v-5.476c0-2.102 0-4.47 1.14-7.71h-6.96c-.53.701-.7 1.182-.75 1.357-1.18-.876-2.8-1.707-4.9-1.707-4.25 0-7.01 2.935-7.01 6.614 0 4.03 3.19 6.747 7.36 8.104l3.63 1.184c-.04 1.533-1.05 2.847-3.11 2.847-1.4 0-3.59-.657-5.82-2.277v6.132" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M161.94 32.727c0-1.271.48-2.277 1.88-2.277 1.8 0 3.07 1.839 3.07 7.052 0 3.724-.97 6.922-3.16 6.922-1.18 0-1.79-.744-1.79-1.796v-9.901zm0 25.145v-9.899c1.09.656 2.67 1.225 4.25 1.225 4.16 0 8.06-3.065 8.06-11.038 0-6.178-3.37-12.09-9.59-12.09-1.67 0-3.6.568-5.66 2.189l-2.45-2.102-2.1 1.271c.39 2.802.39 5.781.39 8.937v12.571c0 1.622 0 3.418-.44 8.936h7.54" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M184.13 48.672c-.09-2.275-.09-5.606-.09-10.336 0-5.959 0-8.939.4-11.741h-7.89c.39 2.802.39 5.782.39 8.937v4.205c0 3.155 0 6.132-.39 8.935h7.58zm-3.64 9.509c2.19 0 3.95-1.754 3.95-3.944s-1.76-3.942-3.95-3.942a3.924 3.924 0 00-3.94 3.942c0 2.19 1.75 3.944 3.94 3.944" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M196.22 55.376c-.09-1.357-.14-3.943-.14-6.704h3.29v-4.203h-3.29V33.428c0-1.795.66-2.803 2.42-2.803.26 0 .52 0 .92.044v-3.943c-1.45-.481-2.94-.656-4.43-.656-1.97 0-3.55.699-4.73 2.102-.92 1.096-1.27 2.934-1.27 5.17v11.127h-2.54v4.203h2.54c0 2.761-.04 5.347-.13 6.704h7.36" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M213.18 37.985c-2.76-.701-4.46-2.41-4.46-4.6 0-1.534.96-2.716 2.36-2.716.92 0 1.84.571 2.1.964v6.352zm-9.5 10.864c.61.087 2.98.349 4.6.349 9.07 0 11.83-3.547 11.83-9.417v-5.476c0-2.102 0-4.47 1.13-7.71h-6.96c-.53.701-.7 1.182-.74 1.357-1.19-.876-2.81-1.707-4.91-1.707-4.25 0-7.01 2.935-7.01 6.614 0 4.03 3.2 6.747 7.36 8.104l3.64 1.184c-.05 1.533-1.06 2.847-3.12 2.847-1.4 0-3.59-.657-5.82-2.277v6.132" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M231.96 55.376c-.08-1.357-.13-3.943-.13-6.704h3.29v-4.203h-3.29V33.428c0-1.795.66-2.803 2.41-2.803.27 0 .53 0 .92.044v-3.943c-1.44-.481-2.93-.656-4.42-.656-1.97 0-3.55.699-4.73 2.102-.92 1.096-1.27 2.934-1.27 5.17v11.127h-2.55v4.203h2.55c0 2.761-.05 5.347-.14 6.704h7.36" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M115.17 18.984c-.1.073-.41.239-.93.239-.99 0-1.47-.759-1.47-1.568 0-.472.14-.949.24-1.187h1.78v-2.277h-1.81V9.35c0-1.708 0-3.322.22-4.84h-4.28c.22 1.518.22 3.132.22 4.84v4.841h-1.31v2.277h1.31v.927c0 1.401.24 2.348 1.35 3.275.95.759 2.14 1.02 3.18 1.02.57 0 1.19-.095 1.5-.214v-2.492" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M119.23 10.489c0-2.87.62-3.892 1.33-3.892.72 0 1.33 1.021 1.33 3.892s-.61 3.892-1.33 3.892c-.71 0-1.33-1.021-1.33-3.892zm6.88 0c0-4.034-2.65-6.264-5.55-6.264-2.89 0-5.55 2.23-5.55 6.264 0 4.033 2.66 6.266 5.55 6.266 2.9 0 5.55-2.233 5.55-6.266" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M131.12 16.468a8.19 8.19 0 00.34-1.588c.83 1.113 1.82 1.875 3.01 1.875.26 0 .4-.026.52-.072v-3.157c-.26.073-.59.096-.71.096-1.81 0-2.59-1.662-2.59-4.272 0-1.708 0-3.322.22-4.84h-4.42c.22 1.518.22 3.132.22 4.84v2.278c0 1.709 0 3.322-.41 4.84h3.82" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M147.64 21.452c-.1-1.163-.12-2.514-.12-3.963v-2.728a35.37 35.37 0 013.61 0v2.728c0 1.449-.02 2.8-.12 3.963h4.48c-.23-2.444-.23-4.435-.23-8.471 0-4.033 0-6.029.23-8.471h-4.48c.1 1.163.12 2.514.12 3.962v3.464c-.52.024-1.05.049-1.81.049s-1.28-.025-1.8-.049V8.472c0-1.448.02-2.8.12-3.962h-4.48c.23 2.442.23 4.438.23 8.471 0 4.036 0 6.027-.23 8.471h4.48" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M164.15 4.51c-.16.355-.28.757-.35 1.067-.88-.855-1.78-1.352-3.01-1.352-2.02 0-3.35 1.471-3.35 3.75v3.653c0 1.709 0 3.322-.22 4.84h4.06v-7.95c0-.947.38-1.494 1.07-1.494.59 0 1.21.428 1.21 1.258v3.346c0 1.709 0 3.322-.21 4.84h4.27c-.22-1.518-.22-3.131-.22-4.84V9.35c0-1.708 0-3.322.22-4.84h-3.47" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M173.17 16.468c.17-.356.29-.758.36-1.065.88.805 1.94 1.352 3.13 1.352 1.28 0 2.09-.735 2.66-1.52.85.758 1.8 1.52 3.34 1.52 2.33 0 3.21-1.639 3.21-3.987V9.35c0-1.708 0-3.322.21-4.84h-4.27c.21 1.518.21 3.132.21 4.84v3.298c0 .832-.23 1.448-.97 1.448-.8 0-1.26-.616-1.26-1.448V9.35c0-1.708 0-3.322.22-4.84h-4.28c.22 1.518.22 3.132.22 4.84v3.345c0 .785-.24 1.401-.97 1.401-.67 0-1.26-.546-1.26-1.258V9.35c0-1.708 0-3.322.21-4.84h-4.27c.21 1.518.21 3.132.21 4.84v2.278c0 1.709 0 3.322-.21 4.84h3.51" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M193.54 10.681c-1.5-.381-2.42-1.308-2.42-2.494 0-.83.52-1.471 1.28-1.471.49 0 1 .308 1.14.523v3.442zm-5.15 5.884c.33.045 1.61.19 2.49.19 4.91 0 6.41-1.924 6.41-5.104V8.687c0-1.14 0-2.423.61-4.177h-3.77c-.28.378-.38.64-.4.735-.64-.476-1.52-.926-2.66-.926-2.3 0-3.8 1.592-3.8 3.583 0 2.183 1.73 3.654 3.99 4.391l1.97.641c-.02.831-.57 1.543-1.69 1.543-.75 0-1.94-.358-3.15-1.236v3.324" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M202.46 16.468c.16-.356.28-.758.35-1.065.88.852 1.78 1.352 3.01 1.352 2.02 0 3.35-1.471 3.35-3.75V9.35c0-1.708 0-3.322.21-4.84h-4.27c.22 1.518.22 3.132.22 4.84v3.275c0 .735-.31 1.328-1.03 1.328-.59 0-1.25-.427-1.25-1.139V9.35c0-1.708 0-3.322.21-4.84h-4.27c.21 1.518.21 3.132.21 4.84v2.278c0 1.709 0 3.322-.21 4.84h3.47" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M214.89 16.468c-.05-1.233-.05-3.037-.05-5.599 0-3.227 0-4.84.22-6.36h-4.27c.21 1.52.21 3.133.21 4.84v2.279c0 1.709 0 3.322-.21 4.84h4.1zm-1.97 5.152c1.19 0 2.14-.95 2.14-2.137s-.95-2.135-2.14-2.135c-1.18 0-2.13.948-2.13 2.135 0 1.187.95 2.137 2.13 2.137" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M221.65 20.101c-.05-.737-.07-2.137-.07-3.633h1.78v-2.277h-1.78v-5.98c0-.972.36-1.519 1.3-1.519.15 0 .29 0 .5.024V4.58c-.78-.26-1.59-.355-2.39-.355-1.07 0-1.92.379-2.56 1.137-.5.596-.69 1.59-.69 2.801v6.028h-1.38v2.277h1.38c0 1.496-.03 2.896-.07 3.633h3.98" + className="ps01" + ></path> + <path + fill="currentColor" + fillRule="nonzero" + stroke="none" + d="M228.61 16.468c.3-1.85 1.21-5.219 1.68-6.762h.05a58.414 58.414 0 011.38 6.762h3.39c-.79-3.25-2.57-9.848-4.08-12.955C230.24 1.923 229.06 0 225.8 0c-.33 0-.82.024-1.13.12v3.036c.21-.119.73-.355 1.33-.355 1.23 0 2.06 1.02 2.06 1.898 0 .45-.09.736-1.04 3.25-1.29 3.37-2.26 6.931-2.52 8.519h4.11" + className="ps01" + ></path> + </g> + </g> + </g> + </g> + </g> + </svg> + ); +} +function VolunteerMatchLogo() { + return ( + <svg xmlns="http://www.w3.org/2000/svg" + width="120" + height="29" + fill="currentColor" + viewBox="0 0 1350 290"> + <g fill="currentColor" strokeWidth="2"> + <path + stroke="44c499" + d="M139.48 158.1c-3.54-3.25-7.33-7.5-11.1-9.57-13.84-7.57-29.69 1.68-30.9 17.23-.55 7.09 3.08 12.33 8.38 17.67q18.41 18.55 36.85 37.22" + vectorEffect="non-scaling-stroke" + ></path> + <path + stroke="88ddf7" + d="M142.71 220.65q0-.03.01-.06" + vectorEffect="non-scaling-stroke" + ></path> + <path + stroke="fa9" + d="M142.71 220.65q18.4-18.35 36.59-36.6 4.79-4.8 6.33-7.55c10.47-18.66-11.42-38.73-29.54-27.23-3.29 2.09-6.5 5.92-9.82 8.82" + vectorEffect="non-scaling-stroke" + ></path> + <path + stroke="#currentColor" + d="M182.16 172.77c5.59-12.71-7.25-26.52-20.38-21.28-6.05 2.41-13.13 10.99-18.48 16.33q-.4.41-.82 0c-5.31-5.2-11.95-13.26-17.72-15.9-13.22-6.07-26.78 7.26-21.34 20.7q1.27 3.13 5.17 7.07 16.83 16.99 33.74 34.04a.56.55 44.6 00.79 0q16.47-16.41 32.7-32.67 4.83-4.84 6.34-8.29" + vectorEffect="non-scaling-stroke" + ></path> + </g> + <path + fill="currentColor" + d="M139.48 158.1c-3.54-3.25-7.33-7.5-11.1-9.57-13.84-7.57-29.69 1.68-30.9 17.23-.55 7.09 3.08 12.33 8.38 17.67q18.41 18.55 36.85 37.22 0-.03.01-.06c-8.77 8.96-18.46 19.84-27.92 26.06-40.48 26.61-95.1 3.62-104.91-43.62q-1.39-6.68-1.39-19.68V97.41c0-12.71 14.11-19.81 23.4-10.89 3.86 3.7 4.35 7.59 4.35 13.27v47.65c0 4.07 3.78 6.39 6.25 2.55q.25-.39.25-.86V53.16q0-7.24 1.37-10.49c4.93-11.73 22.29-10.63 25.9 1.65q.73 2.51.73 8.93-.01 40.2.01 80.4c0 5.45 6.48 5.09 6.48.5q.03-47.84-.01-95.69 0-6.51 1.38-9.71c4.69-10.82 20.22-10.78 25.16-.1q1.22 2.63 1.22 7.51l.02 97.3c0 5.55 6.73 5.42 6.73.52q.03-38.05 0-76.09 0-5.64 1.34-8.58c4.84-10.63 20.16-10.69 25.09-.03q1.31 2.82 1.31 8.27.05 50.16 0 100.55z" + ></path> + <path + fill="currentColor" + d="M142.72 220.59q-.01.03-.01.06 18.4-18.35 36.59-36.6 4.79-4.8 6.33-7.55c10.47-18.66-11.42-38.73-29.54-27.23-3.29 2.09-6.5 5.92-9.82 8.82q-.04-50.48-.01-100.75.01-5.37 1.16-7.99c4.77-10.78 21.03-10.62 25.44.3q1.11 2.74 1.11 8.97.06 37.46.02 74.93c-.01 3.9 3.72 5.87 6.24 2.26a1.53 1.45-28.9 00.27-.85V39.47q0-7.46 1.11-10.29c4.43-11.34 20.8-11.3 25.61-.2q1.25 2.88 1.26 10.33.04 47.4.02 94.79c0 4.99 6.49 4.53 6.49-.28q.02-43.16.01-86.32c0-13.7 20.38-18.09 26.38-5.54q1.35 2.82 1.35 8.44.04 48.28.02 96.57c-.01 6.37 6.73 6.21 6.74 1.09q.02-24.3 0-48.6 0-5.7 1.01-8.3c3.17-8.18 13.71-10.72 20.69-6.09 4.74 3.15 6.04 7.64 6.05 13.56q.02 41.31.01 82.61 0 13.93-1.06 19.95c-8.8 50.38-67.87 73.2-108.65 43.08-7.95-5.88-16.83-15.69-24.82-23.68z" + ></path> + <rect width="10.76" height="99" x="490.5" y="100.25" rx="0.6"></rect> + <path d="M1276.48 139.76a.23.23 0 00.41.14c16.1-21.89 50.12-13.85 50.3 15.67q.14 21.61.03 43.2a.48.48 0 01-.48.48h-9.72a.5.49 89.4 01-.49-.49q-.08-20.04-.07-40c.01-13.23-7.38-22.3-21.18-21.12-13.16 1.11-18.8 10.99-18.79 23.32q.02 18.91.01 37.78a.51.51 0 01-.51.51h-9.49q-.75 0-.75-.75V101q0-.75.75-.75h9.5q.51 0 .51.5l-.03 39.01zm-914.33 44.96l33.17-79.96a.42.42 0 01.39-.26h10.93a.42.42 0 01.39.58l-40.43 94.66a.42.42 0 01-.39.26h-9.17a.42.42 0 01-.39-.26l-40.43-94.66a.42.42 0 01.39-.58h11.34a.42.42 0 01.39.26l33.03 79.96a.42.42 0 00.78 0zm667.62-60.96a.2.2 0 00-.36-.11l-33.42 49.14a.96.96 0 01-1.58 0l-33.35-48.9a.31.31 0 00-.57.18l.02 74.55q0 .63-.63.63h-9.38q-.5 0-.5-.5v-93.5a.75.75 0 01.75-.75h9.72a.96.95-16.3 01.8.43l33.69 50.34a.46.46 0 00.76 0l33.62-50.26a1.16 1.14 16.6 01.96-.51h9.7q.75 0 .75.75v93.25q0 .75-.75.75h-9.63q-.63 0-.63-.63l.03-74.86zM688.24 138.5h-8.74a.5.5 0 01-.5-.5v-8.25a.5.5 0 01.5-.5h8.75a.5.5 0 00.5-.5v-20a.75.75 0 01.75-.75h9.5q.5 0 .5.5v20.25a.5.5 0 00.5.5h21q.75 0 .75.75v8a.5.5 0 01-.5.5h-21.24q-.51 0-.51.52-.03 20.38.11 40.72c.09 12.27 12.34 12.92 20.76 9.03q1.13-.52 1.13.73v7.5a.8.78 77.8 01-.45.72c-13.69 6.54-31.81 2.54-32.05-15.68q-.27-21.5-.28-43.06 0-.48-.48-.48zm454 0h-8.74a.5.5 0 01-.5-.5v-8.25a.5.5 0 01.5-.5h8.75a.5.5 0 00.5-.5v-20a.75.75 0 01.75-.75h9.5q.5 0 .5.5v20.25a.5.5 0 00.5.5h21q.75 0 .75.75v8a.5.5 0 01-.5.5h-21.24q-.51 0-.51.51-.03 20.39.1 40.73c.08 12.28 12.35 12.92 20.75 9.04q1.15-.53 1.15.73v7.52q0 .48-.44.69c-13.8 6.45-31.88 2.56-32.09-15.69q-.24-21.48-.25-43.04 0-.49-.48-.49zm-666.3 25.81a36.72 36.72 0 01-36.72 36.72 36.72 36.72 0 01-36.72-36.72 36.72 36.72 0 0136.72-36.72 36.72 36.72 0 0136.72 36.72zm-34.777 27.06a27.17 25.69 85.9 0023.681-28.937 27.17 25.69 85.9 00-27.567-25.263 27.17 25.69 85.9 00-23.681 28.937 27.17 25.69 85.9 0027.567 25.263zm173.277-51.38a.33.33 0 00.61.19c12.33-18.6 42.22-16.78 48.88 5.91q1.34 4.57 1.33 13.08-.02 19.92-.01 39.72a.35.35 0 01-.35.35l-9.85.01q-.54 0-.54-.54-.01-21.25-.05-42.43c-.04-23.59-33.2-25.19-39.01-4.03q-.89 3.25-.92 10.2-.07 18.16-.01 36.27a.53.53 0 01-.53.53h-9.49q-.75 0-.75-.75v-68.62q0-.63.63-.63h9.51q.64 0 .64.64l-.09 10.1z"></path> + <path d="M756.06 199.68c-39.15-10.22-30.88-76.89 12.77-71.65 20.34 2.44 29.12 20.67 28.4 39.5a.75.75 0 01-.75.72h-54.21a.55.55 0 00-.55.62c3.29 24.33 30.18 29.86 45.93 13.25a.72.71-47.1 01.99-.04l5.81 5.21q.39.35.04.73-15.99 17.51-38.43 11.66zm-13.56-39.39l43.28-.08a.3.3 0 00.3-.3v-.16a22.94 21.87 89.9 00-21.91-22.9h-.14a22.94 21.87 89.9 00-21.83 22.98v.16a.3.3 0 00.3.3zm67.97 12.73c-4.75-23.08 9.81-46.44 34.8-45.23 21.34 1.03 32.04 20.33 30.57 39.9q-.04.56-.6.56h-53.99q-.87 0-.75.87c3.54 24.31 30.41 29.5 46.06 12.87a.49.48-47.1 01.68-.03l5.98 5.34q.31.27.05.59c-18.82 22.83-56.7 14.85-62.8-14.87zm10.71-12.69l43.46-.16a.2.2 0 00.2-.2v-.21a22.99 21.86 89.8 00-21.94-22.91h-.14a22.99 21.86 89.8 00-21.78 23.07v.21a.2.2 0 00.2.2zm420.93-12.91c-17.43-20.23-47.48-7.98-45.66 18.57 1.73 25.3 29.9 33.63 46.42 15.23q.41-.46.87-.03l5.97 5.6q.41.38.05.81c-15.24 18.37-43.03 17.87-57.23-1.46-14.82-20.17-5.27-51.18 20.06-57.27q20.92-5.04 36.43 10.6a1.1 1.1 0 01.02 1.53l-6.14 6.44a.53.53 0 01-.79-.02zm-338.08-1.67a.22.22 0 00.41.11c5.85-10.84 14.96-18.33 27.56-17.86q.5.02.5.52V139a.52.52 0 01-.52.52c-20.95-.08-27.85 16.45-27.96 34.48q-.07 12.37 0 24.72a.53.53 0 01-.53.53H894q-.75 0-.75-.75V130q0-.75.75-.75h9.37q.61 0 .62.62l.04 15.88zm205.51 44.24c-11.03 13.11-36.48 15.72-47.15.3-6.04-8.75-4.01-21.72 4.24-28.11 10.7-8.26 29.89-7.28 42.89-3.47q.53.15.59-.4 1.03-9.42-4.53-15.01c-9.19-9.28-26.36-5.46-36.68-.65q-.58.28-.8-.33l-2.77-7.66q-.19-.52.31-.76c20.79-9.91 54.49-9.92 54.95 22.06q.31 21.37.11 42.85a.45.45 0 01-.45.44h-9.5a.5.5 0 01-.5-.5v-8.5a.4.4 0 00-.71-.26zm-36.85-19.8c-5.4 6.6-3.18 15.27 3.91 19.38 9.47 5.51 24.53 2.44 30.78-6.7q4.54-6.64 2.8-15.6-.09-.45-.52-.57c-10.13-2.97-29.38-5.8-36.97 3.49zm-499.86 18.29a.27.27 0 00-.49-.15c-12.19 18.47-41.91 16.78-48.77-5.6q-1.31-4.28-1.32-11.71-.01-20.66 0-41.27a.51.5 0 01.51-.5h9.47a.52.52 0 01.52.52q-.02 17.32.03 34.59.03 10.73 1.54 14.96c6.1 17.15 30.92 14.7 36.95-1.31q1.42-3.79 1.45-11.35.08-18.45.01-36.88a.53.53 0 01.53-.53h9.49q.75 0 .75.75v68.93a.31.31 0 01-.31.31l-9.83.01q-.65 0-.65-.65l.12-10.12z"></path> + <path + fill="currentColor" + d="M139.48 158.1l2.94 3.13q.42.44.84 0l3.01-3.14c3.32-2.9 6.53-6.73 9.82-8.82 18.12-11.5 40.01 8.57 29.54 27.23q-1.54 2.75-6.33 7.55-18.19 18.25-36.59 36.6-18.44-18.67-36.85-37.22c-5.3-5.34-8.93-10.58-8.38-17.67 1.21-15.55 17.06-24.8 30.9-17.23 3.77 2.07 7.56 6.32 11.1 9.57zm42.68 14.67c5.59-12.71-7.25-26.52-20.38-21.28-6.05 2.41-13.13 10.99-18.48 16.33q-.4.41-.82 0c-5.31-5.2-11.95-13.26-17.72-15.9-13.22-6.07-26.78 7.26-21.34 20.7q1.27 3.13 5.17 7.07 16.83 16.99 33.74 34.04a.56.55 44.6 00.79 0q16.47-16.41 32.7-32.67 4.83-4.84 6.34-8.29z" + ></path> + <path + fill="white" + d="M161.78 151.49c13.13-5.24 25.97 8.57 20.38 21.28q-1.51 3.45-6.34 8.29-16.23 16.26-32.7 32.67a.56.55 44.6 01-.79 0q-16.91-17.05-33.74-34.04-3.9-3.94-5.17-7.07c-5.44-13.44 8.12-26.77 21.34-20.7 5.77 2.64 12.41 10.7 17.72 15.9q.42.41.82 0c5.35-5.34 12.43-13.92 18.48-16.33z" + ></path> + </svg> + ); +} +export default Hero;
\ No newline at end of file diff --git a/components/navbar.js b/components/navbar.js new file mode 100644 index 0000000..5d8db61 --- /dev/null +++ b/components/navbar.js @@ -0,0 +1,102 @@ +import Link from "next/link"; +import ThemeChanger from "./DarkSwitch"; +import Image from "next/image" +import { Disclosure } from "@headlessui/react"; + +const Navbar = () => { + const navigation = [ + "Find Opportunities", + "Recruit Volunteers", + "Help Center", + "About Us", + ]; + + return ( + <div className="w-full"> + <nav className="container relative flex flex-wrap items-center justify-between p-8 mx-auto lg:justify-between lg:flex-nowrap lg:px-0.5 xl:px-0"> + {/* Logo */} + <Disclosure> + {({ open }) => ( + <> + <div className="flex flex-wrap items-center justify-between w-full lg:w-auto"> + <Link href="/"> + <span className="flex items-center space-x-2 text-2xl font-medium text-indigo-500 dark:text-gray-100"> + <span> + <Image + src="/img/logo.svg" + alt="heart shaped handshake logo" + width="32" + height="32" + className="w-8" + /> + </span> + <span>Helping Hands</span> + </span> + </Link> + + <Disclosure.Button + aria-label="Toggle Menu" + className="px-2 py-1 ml-auto text-gray-500 rounded-md lg:hidden hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:text-gray-300 dark:focus:bg-trueGray-700"> + <svg + className="w-6 h-6 fill-current" + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24"> + {open && ( + <path + fillRule="evenodd" + clipRule="evenodd" + d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" + /> + )} + {!open && ( + <path + fillRule="evenodd" + d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" + /> + )} + </svg> + </Disclosure.Button> + + <Disclosure.Panel className="flex flex-wrap w-full my-5 lg:hidden"> + <> + {navigation.map((item, index) => ( + <Link key={index} href="/" className="w-full px-4 py-2 -ml-4 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 dark:focus:bg-gray-800 focus:outline-none"> + {item} + </Link> + ))} + <Link href="/login" className="w-full px-6 py-2 mt-3 text-center text-white bg-indigo-600 rounded-md lg:ml-5"> + Login + </Link> + </> + </Disclosure.Panel> + </div> + </> + )} + </Disclosure> + + {/* menu */} + <div className="hidden text-center lg:flex lg:items-center"> + <ul className="items-center justify-end flex-1 pt-6 list-none lg:pt-0 lg:flex"> + {navigation.map((menu, index) => ( + <li className="mr-3 nav__item" key={index}> + <Link href="/" className="inline-block px-4 py-2 text-lg font-normal text-gray-800 no-underline rounded-md dark:text-gray-200 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-gray-800"> + {menu} + </Link> + </li> + ))} + </ul> + </div> + + <div className="hidden mr-3 space-x-4 lg:flex nav__item"> + <Link href="/login" className="px-6 py-2 text-white bg-indigo-600 rounded-md md:ml-5"> + Login + </Link> + + <ThemeChanger /> + </div> + </nav> + </div> + ); +} + +export default Navbar; diff --git a/components/popupWidget.js b/components/popupWidget.js new file mode 100644 index 0000000..aeeb682 --- /dev/null +++ b/components/popupWidget.js @@ -0,0 +1,318 @@ +import React, { useState } from "react"; +import { useForm, useWatch } from "react-hook-form"; +import { Disclosure, Transition } from "@headlessui/react"; + +const PopupWidget = () => { + const { + register, + handleSubmit, + reset, + control, + formState: { errors, isSubmitSuccessful, isSubmitting }, + } = useForm({ + mode: "onTouched", + }); + const [isSuccess, setIsSuccess] = useState(false); + const [Message, setMessage] = useState(""); + + const userName = useWatch({ control, name: "name", defaultValue: "Someone" }); + + const onSubmit = async (data, e) => { + console.log(data); + await fetch("https://helpinghands.com/submit", { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify(data, null, 2), + }) + .then(async (response) => { + let json = await response.json(); + if (json.success) { + setIsSuccess(true); + setMessage(json.message); + e.target.reset(); + reset(); + } else { + setIsSuccess(false); + setMessage(json.message); + } + }) + .catch((error) => { + setIsSuccess(false); + setMessage("Client Error. Please check the console.log for more info"); + console.log(error); + }); + }; + + return ( + <div> + <Disclosure> + {({ open }) => ( + <> + <Disclosure.Button className="fixed z-40 flex items-center justify-center transition duration-300 bg-indigo-500 rounded-full shadow-lg right-5 bottom-5 w-14 h-14 focus:outline-none hover:bg-indigo-600 focus:bg-indigo-600 ease"> + <span className="sr-only">Open Contact form Widget</span> + <Transition + show={!open} + enter="transition duration-200 transform ease" + enterFrom="opacity-0 -rotate-45 scale-75" + leave="transition duration-100 transform ease" + leaveTo="opacity-0 -rotate-45" + className="absolute w-6 h-6 text-white"> + <svg + xmlns="http://www.w3.org/2000/svg" + className="w-6 h-6" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round"> + <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path> + </svg>{" "} + </Transition> + + <Transition + show={open} + enter="transition duration-200 transform ease" + enterFrom="opacity-0 rotate-45 scale-75" + leave="transition duration-100 transform ease" + leaveTo="opacity-0 rotate-45" + className="absolute w-6 h-6 text-white"> + <svg + xmlns="http://www.w3.org/2000/svg" + className="w-6 h-6" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round"> + <line x1="18" y1="6" x2="6" y2="18"></line> + <line x1="6" y1="6" x2="18" y2="18"></line> + </svg>{" "} + </Transition> + </Disclosure.Button> + <Transition + className="fixed z-50 bottom-[100px] top-0 right-0 left-0 sm:top-auto sm:right-5 sm:left-auto" + enter="transition duration-200 transform ease" + enterFrom="opacity-0 translate-y-5" + leave="transition duration-200 transform ease" + leaveTo="opacity-0 translate-y-5"> + <Disclosure.Panel className=" flex flex-col overflow-hidden left-0 h-full w-full sm:w-[350px] min-h-[250px] sm:h-[600px] border border-gray-300 dark:border-gray-800 bg-white shadow-2xl rounded-md sm:max-h-[calc(100vh-120px)]"> + <div className="flex flex-col items-center justify-center h-32 p-5 bg-indigo-600"> + <h3 className="text-lg text-white">Have a Question?</h3> + <p className="text-white opacity-50"> + The Helping Hands team is here to help! + </p> + </div> + <div className="flex-grow h-full p-6 overflow-auto bg-gray-50 "> + {!isSubmitSuccessful && ( + <form onSubmit={handleSubmit(onSubmit)} noValidate> + <input + type="hidden" + value="YOUR_ACCESS_KEY_HERE" + {...register("apikey")} + /> + <input + type="hidden" + value={`${userName} sent a message from Helping Hands`} + {...register("subject")} + /> + <input + type="hidden" + value="Helping Hands Template" + {...register("from_name")} + /> + <input + type="checkbox" + className="hidden" + style={{ display: "none" }} + {...register("botcheck")}></input> + + <div className="mb-4"> + <label + htmlFor="full_name" + className="block mb-2 text-sm text-gray-600 dark:text-gray-400"> + Full Name + </label> + <input + type="text" + id="full_name" + placeholder="John Doe" + {...register("name", { + required: "Full name is required", + maxLength: 80, + })} + className={`w-full px-3 py-2 text-gray-600 placeholder-gray-300 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring ${ + errors.name + ? "border-red-600 focus:border-red-600 ring-red-100" + : "border-gray-300 focus:border-indigo-600 ring-indigo-100" + }`} + /> + {errors.name && ( + <div className="mt-1 text-sm text-red-400 invalid-feedback"> + {errors.name.message} + </div> + )} + </div> + + <div className="mb-4"> + <label + htmlFor="email" + className="block mb-2 text-sm text-gray-600 dark:text-gray-400"> + Email Address + </label> + <input + type="email" + id="email" + {...register("email", { + required: "Enter your email", + pattern: { + value: /^\S+@\S+$/i, + message: "Please enter a valid email", + }, + })} + placeholder="you@company.com" + className={`w-full px-3 py-2 text-gray-600 placeholder-gray-300 bg-white border border-gray-300 rounded-md focus:outline-none focus:ring ${ + errors.email + ? "border-red-600 focus:border-red-600 ring-red-100" + : "border-gray-300 focus:border-indigo-600 ring-indigo-100" + }`} + /> + + {errors.email && ( + <div className="mt-1 text-sm text-red-400 invalid-feedback"> + {errors.email.message} + </div> + )} + </div> + + <div className="mb-4"> + <label + htmlFor="message" + className="block mb-2 text-sm text-gray-600 dark:text-gray-400"> + Your Message + </label> + + <textarea + rows="4" + id="message" + {...register("message", { + required: "Enter your Message", + })} + placeholder="Your Message" + className={`w-full px-3 py-2 text-gray-600 placeholder-gray-300 bg-white border border-gray-300 rounded-md h-28 focus:outline-none focus:ring ${ + errors.message + ? "border-red-600 focus:border-red-600 ring-red-100" + : "border-gray-300 focus:border-indigo-600 ring-indigo-100" + }`} + required></textarea> + {errors.message && ( + <div className="mt-1 text-sm text-red-400 invalid-feedback"> + {errors.message.message} + </div> + )} + </div> + <div className="mb-3"> + <button + type="submit" + className="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"> + {isSubmitting ? ( + <svg + className="w-5 h-5 mx-auto text-white animate-spin" + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24"> + <circle + className="opacity-25" + cx="12" + cy="12" + r="10" + stroke="currentColor" + strokeWidth="4"></circle> + <path + className="opacity-75" + fill="currentColor" + d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> + </svg> + ) : ( + "Send Message" + )} + </button> + </div> + </form> + )} + + {isSubmitSuccessful && isSuccess && ( + <> + <div className="flex flex-col items-center justify-center h-full text-center text-white rounded-md"> + <svg + width="60" + height="60" + className="text-green-300" + viewBox="0 0 100 100" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + d="M26.6666 50L46.6666 66.6667L73.3333 33.3333M50 96.6667C43.8716 96.6667 37.8033 95.4596 32.1414 93.1144C26.4796 90.7692 21.3351 87.3317 17.0017 82.9983C12.6683 78.6649 9.23082 73.5204 6.8856 67.8586C4.54038 62.1967 3.33331 56.1283 3.33331 50C3.33331 43.8716 4.54038 37.8033 6.8856 32.1414C9.23082 26.4796 12.6683 21.3351 17.0017 17.0017C21.3351 12.6683 26.4796 9.23084 32.1414 6.88562C37.8033 4.5404 43.8716 3.33333 50 3.33333C62.3767 3.33333 74.2466 8.24998 82.9983 17.0017C91.75 25.7534 96.6666 37.6232 96.6666 50C96.6666 62.3768 91.75 74.2466 82.9983 82.9983C74.2466 91.75 62.3767 96.6667 50 96.6667Z" + stroke="currentColor" + strokeWidth="3" + /> + </svg> + <h3 className="py-5 text-xl text-green-500"> + Message sent successfully + </h3> + <p className="text-gray-700 md:px-3">{Message}</p> + <button + className="mt-6 text-indigo-600 focus:outline-none" + onClick={() => reset()}> + Go back + </button> + </div> + </> + )} + + {isSubmitSuccessful && !isSuccess && ( + <div className="flex flex-col items-center justify-center h-full text-center text-white rounded-md"> + <svg + width="60" + height="60" + viewBox="0 0 97 97" + className="text-red-400" + fill="none" + xmlns="http://www.w3.org/2000/svg"> + <path + d="M27.9995 69C43.6205 53.379 52.3786 44.621 67.9995 29M26.8077 29L67.9995 69M48.2189 95C42.0906 95 36.0222 93.7929 30.3604 91.4477C24.6985 89.1025 19.554 85.6651 15.2206 81.3316C10.8872 76.9982 7.44975 71.8538 5.10454 66.1919C2.75932 60.53 1.55225 54.4617 1.55225 48.3333C1.55225 42.205 2.75932 36.1366 5.10454 30.4748C7.44975 24.8129 10.8872 19.6684 15.2206 15.335C19.554 11.0016 24.6985 7.56418 30.3604 5.21896C36.0222 2.87374 42.0906 1.66667 48.2189 1.66667C60.5957 1.66667 72.4655 6.58333 81.2172 15.335C89.9689 24.0867 94.8856 35.9566 94.8856 48.3333C94.8856 60.7101 89.9689 72.58 81.2172 81.3316C72.4655 90.0833 60.5957 95 48.2189 95Z" + stroke="CurrentColor" + strokeWidth="3" + /> + </svg> + + <h3 className="text-xl text-red-400 py-7"> + Oops, Something went wrong! + </h3> + <p className="text-gray-700 md:px-3">{Message}</p> + <button + className="mt-6 text-indigo-600 focus:outline-none" + onClick={() => reset()}> + Go back + </button> + </div> + )} + </div> + </Disclosure.Panel> + </Transition> + </> + )} + </Disclosure> + </div> + ); +} + +export default PopupWidget;
\ No newline at end of file diff --git a/components/sectionTitle.js b/components/sectionTitle.js new file mode 100644 index 0000000..2bc0754 --- /dev/null +++ b/components/sectionTitle.js @@ -0,0 +1,31 @@ +import React from "react"; +import Container from "./container"; + +const SectionTitle = (props) => { + return ( + <Container + className={`flex w-full flex-col ${ + props.align === "left" ? "" : "items-center justify-center text-center" + }`}> + {props.pretitle && ( + <div className="text-sm font-bold tracking-wider text-indigo-600 uppercase"> + {props.pretitle} + </div> + )} + + {props.title && ( + <h2 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white"> + {props.title} + </h2> + )} + + {props.children && ( + <p className="max-w-2xl py-4 text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300"> + {props.children} + </p> + )} + </Container> + ); +} + +export default SectionTitle;
\ No newline at end of file |