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

refactor: remove unnecessary relative positioning from components

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 13:21:14 +02:00
parent 076207c192
commit 8aa5309e36
4 changed files with 10 additions and 10 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="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 color="#06b6d4" className="animate-spin-slower" />
</div> </div>
<Container className="relative"> <Container>
<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>
<SectionHeader color="white" className="mt-2"> <SectionHeader color="white" className="mt-2">

2
src/components/CallToAction.tsx
View File

@@ -15,7 +15,7 @@ export function CallToAction() {
<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 color="#06b6d4" className="animate-spin-slower" />
</div> </div>
<Container className="relative"> <Container>
<div className="mx-auto max-w-2xl text-center"> <div className="mx-auto max-w-2xl text-center">
<SectionHeader as="h2" color="white"> <SectionHeader as="h2" color="white">
Get Started Today Get Started Today

10
src/components/Features.tsx
View File

@@ -25,7 +25,7 @@ export function Features() {
<div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2"> <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
<div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105"> <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" /> <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]"> <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
<Pathfinding /> <Pathfinding />
<div className="p-10 pt-4"> <div className="p-10 pt-4">
<CardEyebrow color="accent">Routing</CardEyebrow> <CardEyebrow color="accent">Routing</CardEyebrow>
@@ -43,7 +43,7 @@ export function Features() {
</div> </div>
<div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105"> <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" /> <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]"> <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
<MessageBus /> <MessageBus />
<div className="p-10 pt-4"> <div className="p-10 pt-4">
<CardEyebrow color="accent">Communication</CardEyebrow> <CardEyebrow color="accent">Communication</CardEyebrow>
@@ -61,7 +61,7 @@ export function Features() {
</div> </div>
<div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105"> <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" /> <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]"> <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
<ProxyDetection className="h-80" /> <ProxyDetection className="h-80" />
<div className="p-10 pt-4"> <div className="p-10 pt-4">
<CardEyebrow color="accent">Discovery</CardEyebrow> <CardEyebrow color="accent">Discovery</CardEyebrow>
@@ -79,7 +79,7 @@ export function Features() {
</div> </div>
<div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105"> <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white" /> <div className="absolute inset-0 rounded-lg bg-white" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]"> <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
<ProxyForwarding className="h-80" /> <ProxyForwarding className="h-80" />
<div className="p-10 pt-4"> <div className="p-10 pt-4">
<CardEyebrow color="accent">Connectivity</CardEyebrow> <CardEyebrow color="accent">Connectivity</CardEyebrow>
@@ -97,7 +97,7 @@ export function Features() {
</div> </div>
<div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105"> <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
<div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" /> <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]"> <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
<ContentDistribution className="h-80" /> <ContentDistribution className="h-80" />
<div className="p-10 pt-4"> <div className="p-10 pt-4">
<CardEyebrow color="accent">Delivery</CardEyebrow> <CardEyebrow color="accent">Delivery</CardEyebrow>

6
src/components/PrimaryFeatures.tsx
View File

@@ -259,7 +259,7 @@ function FeaturesDesktop() {
onChange={onChange} onChange={onChange}
vertical vertical
> >
<TabList className="relative z-10 order-last col-span-6 space-y-6"> <TabList className="z-10 order-last col-span-6 space-y-6">
{features.map((feature, featureIndex) => ( {features.map((feature, featureIndex) => (
<div <div
key={feature.name} key={feature.name}
@@ -292,7 +292,7 @@ function FeaturesDesktop() {
</div> </div>
))} ))}
</TabList> </TabList>
<div className="relative col-span-6"> <div className="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 color="#13B5C8" className="animate-spin-slower" />
</div> </div>
@@ -370,7 +370,7 @@ function FeaturesMobile() {
> >
<div <div
className={clsx( className={clsx(
'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors', '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',