ourworld_web/www_mycelium_net
23
0
Fork 0
forked from sashaastiadi/www_mycelium_net
Code Issues Pull Requests Activity

feat: add unique IDs to CircleBackground components for tracking

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 14:36:05 +02:00
parent 90499e2b77
commit 4eb8a8aba7
4 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/About.tsx
View File

@@ -13,7 +13,7 @@ export function About() {
<div className="relative -mt-[100vh]"> <div className="relative -mt-[100vh]">
<Container> <Container>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground color="#06b6d4" className="animate-spin-slower" /> <CircleBackground id="aboutcircle" color="#06b6d4" className="animate-spin-slower" />
</div> </div>
<div className="mx-auto max-w-3xl text-center"> <div className="mx-auto max-w-3xl text-center">
<Eyebrow color="accent">Our Mission</Eyebrow> <Eyebrow color="accent">Our Mission</Eyebrow>

2
src/components/AboutNew.tsx
View File

@@ -13,7 +13,7 @@ export function AboutNew() {
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28" className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
> >
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground color="#06b6d4" className="animate-spin-slower" /> <CircleBackground id="aboutcircle" color="#06b6d4" className="animate-spin-slower" />
</div> </div>
<Container> <Container>
<div className="mx-auto max-w-2xl text-center"> <div className="mx-auto max-w-2xl text-center">

2
src/components/CallToAction.tsx
View File

@@ -13,7 +13,7 @@ export function CallToAction() {
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28" className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
> >
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground color="#06b6d4" className="animate-spin-slower" /> <CircleBackground id="cta_circle" color="#06b6d4" className="animate-spin-slower" />
</div> </div>
<Container> <Container>
<div className="mx-auto max-w-2xl text-center"> <div className="mx-auto max-w-2xl text-center">

7
src/components/PrimaryFeatures.tsx
View File

@@ -292,9 +292,9 @@ function FeaturesDesktop() {
</div> </div>
))} ))}
</TabList> </TabList>
<div className="col-span-6"> <div className="relative col-span-6">
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground color="#13B5C8" className="animate-spin-slower" /> <CircleBackground id="primaryfeatures_desktop_circle" color="#13B5C8" className="animate-spin-slower" />
</div> </div>
<PhoneFrame className="z-10 mx-auto w-full max-w-[366px]"> <PhoneFrame className="z-10 mx-auto w-full max-w-[366px]">
<TabPanels as={Fragment}> <TabPanels as={Fragment}>
@@ -370,7 +370,7 @@ function FeaturesMobile() {
> >
<div <div
className={clsx( className={clsx(
'transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors', 'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
activeIndex === featureIndex activeIndex === featureIndex
? 'outline-transparent' // Remove outline for active mobile slide ? 'outline-transparent' // Remove outline for active mobile slide
: 'outline-transparent hover:outline-cyan-500', : 'outline-transparent hover:outline-cyan-500',
@@ -378,6 +378,7 @@ function FeaturesMobile() {
> >
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
<CircleBackground <CircleBackground
id={`primaryfeatures_mobile_circle_${featureIndex}`}
color="#13B5C8" color="#13B5C8"
className={featureIndex % 2 === 1 ? 'rotate-180' : undefined} className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
/> />