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

style: replace border with outline and update animation colors to cyan

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-15 16:12:24 +02:00
parent e598e2ffb1
commit 39e19a95d0
4 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/About.tsx
View File

@@ -10,8 +10,7 @@ export function About() {
className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0" className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
> >
<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="#fff" className="animate-spin-slower" /> <CircleBackground color="#06b6d4" className="animate-spin-slower" />
<CircleBackground color="#06b6d4" className="animate-spin-reverse-slower" />
</div> </div>
<Container className="relative"> <Container className="relative">
<div className="mx-auto max-w-3xl text-center"> <div className="mx-auto max-w-3xl text-center">

4
src/components/Button.tsx
View File

@@ -16,8 +16,8 @@ const variantStyles = {
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80', gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
}, },
outline: { outline: {
gray: 'border-gray-300 text-gray-700 hover:text-gray-500 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', gray: 'border-gray-300 text-gray-700 hover:border-cyan-500 active:border-cyan-500',
white: 'border-gray-300 text-white hover:text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
}, },
} }

2
src/components/CallToAction.tsx
View File

@@ -12,7 +12,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="#fff" className="animate-spin-slower" /> <CircleBackground color="#06b6d4" className="animate-spin-slower" />
</div> </div>
<Container className="relative"> <Container className="relative">
<div className="mx-auto max-w-2xl sm:text-center"> <div className="mx-auto max-w-2xl sm:text-center">

12
src/components/PrimaryFeatures.tsx
View File

@@ -256,10 +256,10 @@ function FeaturesDesktop() {
<div <div
key={feature.name} key={feature.name}
className={clsx( className={clsx(
'relative rounded-2xl border transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30', 'relative rounded-2xl outline outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
selectedIndex === featureIndex selectedIndex === featureIndex
? 'border-cyan-500' ? 'outline-cyan-500'
: 'border-transparent hover:border-cyan-500', : 'outline-transparent hover:outline-cyan-500',
)} )}
> >
{featureIndex === selectedIndex && ( {featureIndex === selectedIndex && (
@@ -362,10 +362,10 @@ function FeaturesMobile() {
> >
<div <div
className={clsx( className={clsx(
'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 border transition-colors', 'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline outline-2 transition-colors',
activeIndex === featureIndex activeIndex === featureIndex
? 'border-cyan-500' ? 'outline-cyan-500'
: 'border-transparent hover:border-cyan-500', : 'outline-transparent hover:outline-cyan-500',
)} )}
> >
<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">