src/components/uiable/blocks/footer/footer-3/footer-3.tsx
"use client"
// third-party
import { motion, type Variants } from "framer-motion"
// types
const footerColumns = [
{
title: "About Us",
links: ["Our Story", "Our Team", "Careers", "Press & Media", "Contact Us"],
},
]
const socialIcons = [
{
label: "Facebook",
svg: (
<svg
className="h-6 w-6"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_255_10818)">
<path
d="M17.1538 4C17.3611 4.00003 17.5611 4.07196 17.716 4.20217C17.8709 4.33238 17.9698 4.5118 17.9941 4.7064L18 4.8V8C18 8.19595 17.9239 8.38507 17.7862 8.5315C17.6484 8.67793 17.4587 8.77147 17.2528 8.7944L17.1538 8.8H14.6154V9.6H17.1538C17.2743 9.60004 17.3934 9.6244 17.503 9.67144C17.6127 9.71849 17.7106 9.78713 17.7899 9.87278C17.8693 9.95844 17.9284 10.0591 17.9634 10.1681C17.9983 10.2771 18.0082 10.3919 17.9924 10.5048L17.9755 10.5944L17.1293 13.7944C17.0873 13.9524 16.9953 14.0945 16.8656 14.2017C16.7358 14.309 16.5745 14.3762 16.4033 14.3944L16.3077 14.4H14.6154V19.2C14.6154 19.3959 14.5393 19.5851 14.4015 19.7315C14.2638 19.8779 14.0741 19.9715 13.8682 19.9944L13.7692 20H10.3846C10.1774 20 9.97733 19.928 9.82245 19.7978C9.66758 19.6676 9.56863 19.4882 9.54438 19.2936L9.53846 19.2V14.4H7.84615C7.6389 14.4 7.43887 14.328 7.28399 14.1978C7.12912 14.0676 7.03017 13.8882 7.00592 13.6936L7 13.6V10.4C7.00003 10.2041 7.07612 10.0149 7.21384 9.8685C7.35156 9.72207 7.54133 9.62853 7.74715 9.6056L7.84615 9.6H9.53846V8.8C9.53841 7.5581 10.0475 6.36451 10.9587 5.47002C11.8699 4.57553 13.1124 4.04977 14.425 4.0032L14.6154 4H17.1538Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_255_10818">
<rect className="h-8 w-8" fill="currentColor" />
</clipPath>
</defs>
</svg>
),
},
{
label: "Twitter",
svg: (
<svg
className="h-6 w-6"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_255_10822)">
<path
d="M5.31529 2.09988C6.10629 1.98688 7.21529 2.24488 8.64829 3.06588L8.92029 3.22688L9.08029 3.32688L9.47729 3.24388C10.9911 2.95137 12.5442 2.9243 14.0673 3.16388L14.5233 3.24388L14.9193 3.32688L15.0803 3.22688C16.4653 2.38688 17.5673 2.05688 18.4023 2.07888L18.5663 2.08688L18.7133 2.10388L18.7893 2.11788L18.8393 2.12888L18.9833 2.17588C19.2191 2.27334 19.4087 2.45721 19.5133 2.68988C19.9225 3.60158 20.0603 4.61188 19.9103 5.59988L19.8633 5.86688L19.8173 6.06288L19.9403 6.22588C20.5143 7.02088 20.8703 7.95388 20.9703 8.93288L20.9933 9.22788L21.0003 9.49988C21.0003 13.3549 19.3413 15.3829 16.3563 16.1799L16.1113 16.2409L15.9793 16.2699L15.9933 16.4309L16.0013 16.5879L16.0053 16.9529L16.0033 17.1659L16.0003 20.9999C16.0003 21.2448 15.9103 21.4812 15.7476 21.6643C15.5848 21.8473 15.3605 21.9642 15.1173 21.9929L15.0003 21.9999H9.00029C8.75536 21.9998 8.51896 21.9099 8.33592 21.7472C8.15289 21.5844 8.03595 21.3601 8.00729 21.1169L8.00029 20.9999V20.2659C6.18229 20.5259 4.97029 19.8419 3.89029 18.3879L3.35529 17.6219C3.07529 17.2259 2.90029 17.0429 2.76629 16.9779L2.71829 16.9589C2.47071 16.8784 2.26425 16.7046 2.14281 16.4743C2.02137 16.244 1.99452 15.9755 2.06796 15.7257C2.14141 15.476 2.30936 15.2647 2.53611 15.1368C2.76287 15.0089 3.03056 14.9745 3.28229 15.0409C3.92429 15.2289 4.35629 15.6089 4.85229 16.2799L5.39029 17.0489C6.15029 18.1279 6.75029 18.5079 7.99929 18.2399L8.00029 17.5619L7.98229 17.3939C7.95276 17.1202 7.94574 16.8447 7.96129 16.5699L7.97829 16.3849L7.99729 16.2649L7.88929 16.2409C4.91329 15.5309 3.18629 13.6679 3.01429 10.1019L3.00429 9.79188L3.00029 9.49988C3.00145 8.41646 3.31686 7.35663 3.90829 6.44888L4.06029 6.22688L4.18229 6.06388L4.13729 5.86788C3.95701 4.98944 4.00696 4.07931 4.28229 3.22588L4.38229 2.94388L4.48829 2.69088C4.59269 2.4584 4.78191 2.27455 5.01729 2.17688L5.16129 2.12988L5.31529 2.09988Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_255_10822">
<rect className="h-8 w-8" fill="currentColor" />
</clipPath>
</defs>
</svg>
),
},
{
label: "LinkedIn",
svg: (
<svg
className="h-6 w-6"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6V18C4 18.5304 4.21071 19.0391 4.58579 19.4142C4.96086 19.7893 5.46957 20 6 20H18C18.5304 20 19.0391 19.7893 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 18V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H6C5.46957 4 4.96086 4.21071 4.58579 4.58579ZM8.99935 10.9993C8.99935 10.4471 8.55163 9.99935 7.99935 9.99935C7.44706 9.99935 6.99935 10.4471 6.99935 10.9993V15.9993C6.99935 16.5516 7.44706 16.9993 7.99935 16.9993C8.55163 16.9993 8.99935 16.5516 8.99935 15.9993V10.9993ZM16.1204 10.8783C15.5578 10.3156 14.795 9.99935 13.9993 9.99935C13.5478 9.99935 13.1082 10.1043 12.7083 10.2952C12.5272 10.1128 12.2767 9.99935 11.9993 9.99935C11.4471 9.99935 10.9993 10.4471 10.9993 10.9993V15.9993C10.9993 16.5516 11.4471 16.9993 11.9993 16.9993C12.5516 16.9993 12.9993 16.5516 12.9993 15.9993V12.9993C12.9993 12.7341 13.1048 12.4799 13.2923 12.2923C13.4799 12.1048 13.7341 11.9993 13.9993 11.9993C14.2646 11.9993 14.5188 12.1048 14.7064 12.2923C14.8939 12.4799 14.9993 12.7341 14.9993 12.9993V15.9993C14.9993 16.5516 15.4471 16.9993 15.9993 16.9993C16.5516 16.9993 16.9993 16.5516 16.9993 15.9993V12.9993C16.9993 12.2037 16.6831 11.4409 16.1204 10.8783ZM8.99935 7.99935C8.99935 7.44706 8.55163 6.99935 7.99935 6.99935C7.44706 6.99935 6.99935 7.44706 6.99935 7.99935V8.00911C6.99935 8.5614 7.44706 9.00911 7.99935 9.00911C8.55163 9.00911 8.99935 8.5614 8.99935 8.00911V7.99935Z"
fill="currentColor"
/>
</svg>
),
},
]
// Variants
const containerVariants: Variants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.1,
},
},
}
const itemVariants: Variants = {
hidden: { opacity: 0, y: 15 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.5,
ease: [0.25, 0.1, 0.25, 1],
},
},
}
// ------------------------------ | FOOTER - 3 | ------------------------------ //
export default function Footer3() {
return (
<footer className="relative overflow-hidden bg-slate-900 py-20 sm:py-25">
<motion.span
animate={{
scale: [1, 1.2, 1],
opacity: [0.35, 0.55, 0.35],
}}
transition={{
duration: 7,
repeat: Infinity,
ease: "easeInOut",
}}
className="absolute right-2/4 -bottom-85 block h-100 w-100 translate-x-2/4 rounded-full bg-linear-to-r from-cyan-500 to-blue-500 opacity-50 blur-3xl"
/>
<div className="relative z-30 container mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.2 }}
variants={containerVariants}
className="flex flex-col items-center gap-4 text-center sm:gap-5 md:justify-between lg:flex-row"
>
<motion.div
variants={itemVariants}
className="flex flex-row items-center gap-3"
>
<motion.div
whileHover={{ rotate: 180, scale: 1.1 }}
transition={{ duration: 0.5 }}
>
<svg
className="size-8 fill-sky-500"
viewBox="0 0 256 256"
id="Flat"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.1">
<path d="M73.87573,111.39355l-.009-.03369L42.51636,148.98047a7.99958,7.99958,0,0,0-1.66358,6.85693l12.3628,55.63281a8,8,0,0,0,12.80713,4.51172L96,192C78.36523,161.44922,72.74268,134.47656,73.87573,111.39355Z" />
</g>
<g opacity="0.1">
<path d="M181.52239,110.6714l.009-.03369,31.35034,37.6206a7.99958,7.99958,0,0,1,1.66358,6.85693l-12.3628,55.63282a8,8,0,0,1-12.80712,4.51172l-29.9773-23.98194C177.03289,160.72706,182.65544,133.75441,181.52239,110.6714Z" />
</g>
<g>
<path d="M144,216H112a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Z" />
<circle cx="128" cy="96" r="12" />
<path d="M219.62891,143.85889l-30.23658-36.28418a124.52267,124.52267,0,0,0-7.98022-34.8833c-11.61719-30.21192-32.15625-49.999-43.36523-59.10547a16.07708,16.07708,0,0,0-20.07813-.0669C106.61328,22.61621,85.81055,42.38867,74.07617,72.605A122.76188,122.76188,0,0,0,65.979,108.32861L36.37109,143.85889A16.10066,16.10066,0,0,0,33.043,157.57275l12.36328,55.63282a15.98523,15.98523,0,0,0,25.61328,9.023L98.80566,200h58.38868l27.78515,22.22852a15.91184,15.91184,0,0,0,9.96485,3.51709,16.0905,16.0905,0,0,0,5.34668-.91944,15.90581,15.90581,0,0,0,10.30273-11.62012L222.957,157.57373A16.102,16.102,0,0,0,219.62891,143.85889ZM127.9668,26.01074C198.25391,83.126,169.43359,157.01074,155.25,184H100.67871C52.6709,96.27734,109.22559,41.02637,127.9668,26.01074ZM61.02539,209.73486l-12.36328-55.6333,17.92651-21.5122q3.40906,28.0371,19.14038,57.38281Zm133.94922,0-24.74976-19.7998q15.53064-29.55175,18.74341-57.87695l18.36963,22.04345Z" />
</g>
</svg>
</motion.div>
<span className="text-lg font-medium text-slate-100 sm:text-xl">
SaaSify
</span>
</motion.div>
<motion.div variants={itemVariants} className="">
{footerColumns.map((col) => (
<ul
key={col.title}
className="flex flex-wrap items-center justify-center gap-1.5"
>
{col.links.map((link) => (
<li key={link}>
<motion.a
href="#"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="inline-block rounded-full px-4 py-2 text-base text-slate-400 transition-all duration-300 ease-in-out hover:bg-slate-800 hover:text-cyan-500"
>
{link}
</motion.a>
</li>
))}
</ul>
))}
</motion.div>
<motion.div variants={itemVariants} className="flex gap-2">
{socialIcons.map(({ label, svg }) => (
<motion.a
key={label}
href="#"
aria-label={label}
whileHover={{ y: -4, scale: 1.12 }}
whileTap={{ scale: 0.92 }}
transition={{ type: "spring", stiffness: 400, damping: 17 }}
className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition-all duration-500 hover:shadow-md"
>
{svg}
</motion.a>
))}
</motion.div>
</motion.div>
</div>
</footer>
)
}
