Skip to content

Commit

Permalink
fix: lints and prettiers
Browse files Browse the repository at this point in the history
  • Loading branch information
@Luiginicoletti
Luiginicoletti committed Sep 10, 2024
1 parent 789ab9b commit 95c78ff
Show file tree
Hide file tree
Showing 5 changed files with 397 additions and 142 deletions.
75 changes: 45 additions & 30 deletions components/octopost/About/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export default function About() {
return (
<section className="md:flex-center lg:flex-center flex overflow-x-hidden bg-white lg:mx-40">
<div className="lg:flex-center">

<motion.div
initial={{ x: -300, opacity: 0, scale: 0.9 }}
whileInView={{ x: 0, opacity: 1, scale: 1 }}
Expand All @@ -27,58 +26,74 @@ export default function About() {
className="relative hidden lg:flex"
>
<AboutLogo />
<div className="absolute left-28 top-48 hover:scale-105 transition-transform duration-300 group">
<div className="group absolute left-28 top-48 transition-transform duration-300 hover:scale-105">
<div className="relative">
<AboutLogoIconsBg />
<div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{
boxShadow: '0 0 0 10px rgba(160, 118, 249, 0.2)',
}}></div>
<div
className="absolute inset-0 rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
style={{
boxShadow: "0 0 0 10px rgba(160, 118, 249, 0.2)",
}}
></div>
</div>
<div className="absolute inset-0 flex items-center justify-center hover:scale-95 transition-transform duration-300">
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-300 hover:scale-95">
<AboutIcons1 />
</div>
</div>
<div className="absolute left-32 top-[331px] hover:scale-105 transition-transform duration-300 group">
<div className="group absolute left-32 top-[331px] transition-transform duration-300 hover:scale-105">
<div className="relative">
<AboutLogoIconsBg />
<div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{
boxShadow: '0 0 0 10px rgba(160, 118, 249, 0.2)',
}}></div>
<div
className="absolute inset-0 rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
style={{
boxShadow: "0 0 0 10px rgba(160, 118, 249, 0.2)",
}}
></div>
</div>
<div className="absolute inset-0 flex items-center justify-center hover:scale-95 transition-transform duration-300">
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-300 hover:scale-95">
<AboutIcons2 />
</div>
</div>
<div className="absolute bottom-20 left-60 hover:scale-105 transition-transform duration-300 group">
<div className="group absolute bottom-20 left-60 transition-transform duration-300 hover:scale-105">
<div className="relative">
<AboutLogoIconsBg />
<div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{
boxShadow: '0 0 0 10px rgba(160, 118, 249, 0.2)',
}}></div>
<div
className="absolute inset-0 rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
style={{
boxShadow: "0 0 0 10px rgba(160, 118, 249, 0.2)",
}}
></div>
</div>
<div className="absolute inset-0 flex items-center justify-center hover:scale-95 transition-transform duration-300">
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-300 hover:scale-95">
<AboutIcons3 />
</div>
</div>
<div className="absolute bottom-20 right-[210px] hover:scale-105 transition-transform duration-300 group">
<div className="group absolute bottom-20 right-[210px] transition-transform duration-300 hover:scale-105">
<div className="relative">
<AboutLogoIconsBg />
<div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{
boxShadow: '0 0 0 10px rgba(160, 118, 249, 0.2)',
}}></div>
<div
className="absolute inset-0 rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
style={{
boxShadow: "0 0 0 10px rgba(160, 118, 249, 0.2)",
}}
></div>
</div>
<div className="absolute inset-0 flex items-center justify-center hover:scale-95 transition-transform duration-300">
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-300 hover:scale-95">
<AboutIcons4 />
</div>
</div>
<div className="absolute right-28 bottom-44 hover:scale-105 transition-transform duration-300 group">
<div className="group absolute bottom-44 right-28 transition-transform duration-300 hover:scale-105">
<div className="relative">
<AboutLogoIconsBg1 />
<div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{
boxShadow: '0 0 0 40px rgba(247, 40, 142, 0.1), 0 0 0 28px rgba(247, 40, 142, 0.1)',
}}></div>
<div
className="absolute inset-0 rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100"
style={{
boxShadow:
"0 0 0 40px rgba(247, 40, 142, 0.1), 0 0 0 28px rgba(247, 40, 142, 0.1)",
}}
></div>
</div>
<div className="absolute inset-0 flex items-center justify-center hover:scale-95 transition-transform duration-300">
<div className="absolute inset-0 flex items-center justify-center transition-transform duration-300 hover:scale-95">
<AboutIcons5 />
</div>
</div>
Expand All @@ -103,8 +118,8 @@ export default function About() {
</p>
<div className="max-w-1/3 flex-center flex flex-wrap-reverse gap-8 overflow-x-hidden lg:flex-row lg:flex-nowrap">
<div>
<div className="relative group">
<div className="transition-opacity duration-300 hover:opacity-0">
<div className="group relative">
<div className="transition-opacity duration-300 hover:opacity-0">
<CloudIcon />
</div>
<div className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
Expand All @@ -117,7 +132,7 @@ export default function About() {
</p>
</div>
<div>
<div className="relative group">
<div className="group relative">
<div className="transition-opacity duration-300 hover:opacity-0">
<CloudIcon />
</div>
Expand All @@ -131,7 +146,7 @@ export default function About() {
</p>
</div>
<div>
<div className="relative group">
<div className="group relative">
<div className="transition-opacity duration-300 hover:opacity-0">
<CloudIcon />
</div>
Expand Down
78 changes: 58 additions & 20 deletions components/octopost/About/assets/AboutLogoIcons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,85 @@ import React from "react";

function AboutIcons1() {
return (
<svg width="19" height="35" viewBox="0 0 19 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.7564 19.6875H12.5745V35H5.66545V19.6875H0V13.3984H5.66545V8.54492C5.66545 3.07617 8.98182 0 14.0255 0C16.4436 0 19 0.478516 19 0.478516V5.87891H16.1673C13.4036 5.87891 12.5745 7.51953 12.5745 9.29688V13.3984H18.7236L17.7564 19.6875Z" fill="#A076F9"/>
<svg
width="19"
height="35"
viewBox="0 0 19 35"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.7564 19.6875H12.5745V35H5.66545V19.6875H0V13.3984H5.66545V8.54492C5.66545 3.07617 8.98182 0 14.0255 0C16.4436 0 19 0.478516 19 0.478516V5.87891H16.1673C13.4036 5.87891 12.5745 7.51953 12.5745 9.29688V13.3984H18.7236L17.7564 19.6875Z"
fill="#A076F9"
/>
</svg>


);
}
function AboutIcons2() {
return (
<svg width="37" height="22" viewBox="0 0 37 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.9028 9.87258C17.6649 10.6039 19.0139 12.615 19.0139 15.2964C19.0139 19.6842 15.1597 21.5734 10.9844 21.5734H0V0H10.7274C14.5816 0 17.9861 1.03601 17.9861 5.36288C17.9861 7.49584 16.8941 8.89751 14.9028 9.87258ZM4.94618 3.65651V8.71468H10.0208C11.8194 8.71468 13.1042 7.98338 13.1042 6.15512C13.1042 4.14404 11.4983 3.65651 9.69965 3.65651H4.94618ZM10.342 17.9169C12.3333 17.9169 14.0035 17.2465 14.0035 15.0526C14.0035 12.8587 12.6545 11.9446 10.4063 11.9446H4.94618V17.9169H10.342ZM33.3385 3.22992H24.1528V1.09695H33.3385V3.22992ZM37 14.0166C37 14.2604 36.9358 14.5651 36.9358 14.8089H25.0521C25.0521 17.3075 26.4653 18.7701 29.099 18.7701C30.4479 18.7701 32.2465 18.0997 32.6962 16.759H36.6788C35.4583 20.2936 32.8889 22 28.9705 22C23.7674 22 20.4913 18.6482 20.4913 13.7729C20.4913 9.08033 23.8958 5.48476 28.9705 5.48476C34.1094 5.48476 37 9.38504 37 14.0166ZM25.0521 12.0665H32.4392C32.2465 9.99446 31.0903 8.77562 28.7778 8.77562C26.658 8.77562 25.1806 10.0554 25.0521 12.0665Z" fill="#A076F9"/>
</svg>

<svg
width="37"
height="22"
viewBox="0 0 37 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.9028 9.87258C17.6649 10.6039 19.0139 12.615 19.0139 15.2964C19.0139 19.6842 15.1597 21.5734 10.9844 21.5734H0V0H10.7274C14.5816 0 17.9861 1.03601 17.9861 5.36288C17.9861 7.49584 16.8941 8.89751 14.9028 9.87258ZM4.94618 3.65651V8.71468H10.0208C11.8194 8.71468 13.1042 7.98338 13.1042 6.15512C13.1042 4.14404 11.4983 3.65651 9.69965 3.65651H4.94618ZM10.342 17.9169C12.3333 17.9169 14.0035 17.2465 14.0035 15.0526C14.0035 12.8587 12.6545 11.9446 10.4063 11.9446H4.94618V17.9169H10.342ZM33.3385 3.22992H24.1528V1.09695H33.3385V3.22992ZM37 14.0166C37 14.2604 36.9358 14.5651 36.9358 14.8089H25.0521C25.0521 17.3075 26.4653 18.7701 29.099 18.7701C30.4479 18.7701 32.2465 18.0997 32.6962 16.759H36.6788C35.4583 20.2936 32.8889 22 28.9705 22C23.7674 22 20.4913 18.6482 20.4913 13.7729C20.4913 9.08033 23.8958 5.48476 28.9705 5.48476C34.1094 5.48476 37 9.38504 37 14.0166ZM25.0521 12.0665H32.4392C32.2465 9.99446 31.0903 8.77562 28.7778 8.77562C26.658 8.77562 25.1806 10.0554 25.0521 12.0665Z"
fill="#A076F9"
/>
</svg>
);
}

function AboutIcons3() {
return (
<svg width="39" height="33" viewBox="0 0 39 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.0313 8.19036C35.0313 8.58795 35.0313 8.90602 35.0313 9.30361C35.0313 20.3566 27.0176 33 12.2877 33C7.70842 33 3.51076 31.6482 0 29.2626C0.610568 29.3422 1.22114 29.4217 1.90802 29.4217C5.64775 29.4217 9.08219 28.0699 11.8297 25.8434C8.31898 25.7639 5.34247 23.3783 4.35029 20.0386C4.88454 20.1181 5.34247 20.1976 5.87671 20.1976C6.5636 20.1976 7.32681 20.0386 7.93738 19.8795C4.27397 19.0843 1.52642 15.7446 1.52642 11.6892V11.6096C2.59491 12.2458 3.89237 12.5639 5.18982 12.6434C2.97652 11.1325 1.60274 8.58795 1.60274 5.7253C1.60274 4.13494 1.98434 2.70361 2.67123 1.51084C6.63992 6.52048 12.593 9.86024 19.2329 10.2578C19.0802 9.62169 19.0039 8.98554 19.0039 8.3494C19.0039 3.73735 22.591 0 27.0176 0C29.3072 0 31.3679 0.954217 32.8943 2.6241C34.6497 2.22651 36.4051 1.51084 37.9315 0.556626C37.3209 2.54458 36.0998 4.13494 34.4207 5.16867C36.0235 5.00964 37.6262 4.53253 39 3.89639C37.9315 5.56626 36.5577 6.99759 35.0313 8.19036Z" fill="#A076F9"/>
<svg
width="39"
height="33"
viewBox="0 0 39 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M35.0313 8.19036C35.0313 8.58795 35.0313 8.90602 35.0313 9.30361C35.0313 20.3566 27.0176 33 12.2877 33C7.70842 33 3.51076 31.6482 0 29.2626C0.610568 29.3422 1.22114 29.4217 1.90802 29.4217C5.64775 29.4217 9.08219 28.0699 11.8297 25.8434C8.31898 25.7639 5.34247 23.3783 4.35029 20.0386C4.88454 20.1181 5.34247 20.1976 5.87671 20.1976C6.5636 20.1976 7.32681 20.0386 7.93738 19.8795C4.27397 19.0843 1.52642 15.7446 1.52642 11.6892V11.6096C2.59491 12.2458 3.89237 12.5639 5.18982 12.6434C2.97652 11.1325 1.60274 8.58795 1.60274 5.7253C1.60274 4.13494 1.98434 2.70361 2.67123 1.51084C6.63992 6.52048 12.593 9.86024 19.2329 10.2578C19.0802 9.62169 19.0039 8.98554 19.0039 8.3494C19.0039 3.73735 22.591 0 27.0176 0C29.3072 0 31.3679 0.954217 32.8943 2.6241C34.6497 2.22651 36.4051 1.51084 37.9315 0.556626C37.3209 2.54458 36.0998 4.13494 34.4207 5.16867C36.0235 5.00964 37.6262 4.53253 39 3.89639C37.9315 5.56626 36.5577 6.99759 35.0313 8.19036Z"
fill="#A076F9"
/>
</svg>

);
}

function AboutIcons4() {
return (
<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 0C30.1935 0 39 8.80645 39 19.5C39 30.2722 30.1935 39 19.5 39C8.72782 39 0 30.2722 0 19.5C0 8.80645 8.72782 0 19.5 0ZM32.3165 9.04234C32.002 9.51411 29.25 13.0524 23.0383 15.5685C23.6673 16.8266 24.0605 17.7702 24.5323 18.871C30.0363 18.1633 35.5403 19.2641 36.0907 19.4214C36.0907 15.4899 34.6754 11.873 32.3165 9.04234ZM30.5081 7.07661C26.4194 3.45968 20.8367 2.12298 15.5685 3.38105C16.0403 4.01008 19.0282 8.09879 21.7802 13.131C27.6774 10.9294 30.1935 7.54839 30.5081 7.07661ZM12.3448 4.48185C7.70565 6.68347 4.24597 11.0081 3.14516 16.119C3.93145 16.1976 10.7722 16.1976 18.5565 14.1532C15.8044 9.1996 12.8165 5.11089 12.3448 4.48185ZM2.83065 19.5786C2.83065 23.8246 4.40323 27.756 7.07661 30.6653C9.75 26.1048 15.254 21.2298 21.3085 19.5C20.8367 18.5565 20.4435 17.6129 19.8931 16.6694C11.6371 19.1855 3.53831 19.1069 2.83065 19.0282C2.83065 19.2641 2.83065 19.4214 2.83065 19.5786ZM9.1996 32.7097C14.1532 36.5625 20.6008 37.1915 25.9476 34.9113C25.7117 33.4173 24.7681 28.3065 22.4093 22.252C15.7258 24.5323 11.0081 29.1714 9.1996 32.7097ZM28.7782 33.3387C32.4738 30.8226 35.1472 26.8125 35.9335 22.1734C35.3044 22.0161 30.744 20.6794 25.5544 21.4657C27.6774 27.5202 28.621 32.3952 28.7782 33.3387Z" fill="#A076F9"/>
</svg>

<svg
width="39"
height="39"
viewBox="0 0 39 39"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.5 0C30.1935 0 39 8.80645 39 19.5C39 30.2722 30.1935 39 19.5 39C8.72782 39 0 30.2722 0 19.5C0 8.80645 8.72782 0 19.5 0ZM32.3165 9.04234C32.002 9.51411 29.25 13.0524 23.0383 15.5685C23.6673 16.8266 24.0605 17.7702 24.5323 18.871C30.0363 18.1633 35.5403 19.2641 36.0907 19.4214C36.0907 15.4899 34.6754 11.873 32.3165 9.04234ZM30.5081 7.07661C26.4194 3.45968 20.8367 2.12298 15.5685 3.38105C16.0403 4.01008 19.0282 8.09879 21.7802 13.131C27.6774 10.9294 30.1935 7.54839 30.5081 7.07661ZM12.3448 4.48185C7.70565 6.68347 4.24597 11.0081 3.14516 16.119C3.93145 16.1976 10.7722 16.1976 18.5565 14.1532C15.8044 9.1996 12.8165 5.11089 12.3448 4.48185ZM2.83065 19.5786C2.83065 23.8246 4.40323 27.756 7.07661 30.6653C9.75 26.1048 15.254 21.2298 21.3085 19.5C20.8367 18.5565 20.4435 17.6129 19.8931 16.6694C11.6371 19.1855 3.53831 19.1069 2.83065 19.0282C2.83065 19.2641 2.83065 19.4214 2.83065 19.5786ZM9.1996 32.7097C14.1532 36.5625 20.6008 37.1915 25.9476 34.9113C25.7117 33.4173 24.7681 28.3065 22.4093 22.252C15.7258 24.5323 11.0081 29.1714 9.1996 32.7097ZM28.7782 33.3387C32.4738 30.8226 35.1472 26.8125 35.9335 22.1734C35.3044 22.0161 30.744 20.6794 25.5544 21.4657C27.6774 27.5202 28.621 32.3952 28.7782 33.3387Z"
fill="#A076F9"
/>
</svg>
);
}

function AboutIcons5() {
return (
<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.6937 17.271C30.6937 18.3755 29.7982 19.271 28.6937 19.271H22.3968C21.2923 19.271 20.3968 20.1664 20.3968 21.271V27.4413C20.3968 28.5459 19.5014 29.4413 18.3968 29.4413H12.8101C11.7056 29.4413 10.8101 28.5459 10.8101 27.4413V21.271C10.8101 20.1664 9.9147 19.271 8.81013 19.271H2.51331C1.40874 19.271 0.513306 18.3755 0.513306 17.271V12.5291C0.513306 11.4245 1.40874 10.5291 2.51331 10.5291H8.81013C9.9147 10.5291 10.8101 9.63365 10.8101 8.52908V2.30164C10.8101 1.19707 11.7056 0.301636 12.8101 0.301636H18.3968C19.5014 0.301636 20.3968 1.19707 20.3968 2.30164V8.52908C20.3968 9.63365 21.2923 10.5291 22.3968 10.5291H28.6937C29.7982 10.5291 30.6937 11.4245 30.6937 12.5291V17.271Z" fill="white"/>
</svg>


<svg
width="31"
height="30"
viewBox="0 0 31 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M30.6937 17.271C30.6937 18.3755 29.7982 19.271 28.6937 19.271H22.3968C21.2923 19.271 20.3968 20.1664 20.3968 21.271V27.4413C20.3968 28.5459 19.5014 29.4413 18.3968 29.4413H12.8101C11.7056 29.4413 10.8101 28.5459 10.8101 27.4413V21.271C10.8101 20.1664 9.9147 19.271 8.81013 19.271H2.51331C1.40874 19.271 0.513306 18.3755 0.513306 17.271V12.5291C0.513306 11.4245 1.40874 10.5291 2.51331 10.5291H8.81013C9.9147 10.5291 10.8101 9.63365 10.8101 8.52908V2.30164C10.8101 1.19707 11.7056 0.301636 12.8101 0.301636H18.3968C19.5014 0.301636 20.3968 1.19707 20.3968 2.30164V8.52908C20.3968 9.63365 21.2923 10.5291 22.3968 10.5291H28.6937C29.7982 10.5291 30.6937 11.4245 30.6937 12.5291V17.271Z"
fill="white"
/>
</svg>
);
}

Expand Down
Loading

0 comments on commit 95c78ff

Please sign in to comment.