forked from emre/www_projectmycelium_com
refactor: add link variant to Button component and enhance CallToAction and HomeDesign styling
- Added 'link' variant to Button with baseStyles and variantStyles for cyan, white, and dark colors - Updated Button type definitions to include link variant with proper color options - Refactored default variant/color logic to use explicit conditionals for type safety - Changed outline variant border from single to border-2 and added font-semibold - Updated outline variant hover states to include text
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Container } from '@/components/Container'
|
||||
import { Button } from '@/components/Button'
|
||||
import { H3, P } from '@/components/Texts'
|
||||
@@ -27,7 +26,7 @@ export function CallToAction() {
|
||||
cx={512}
|
||||
cy={512}
|
||||
fill="url(#mycelium-cyan-glow)"
|
||||
fillOpacity="0.2"
|
||||
fillOpacity="0.4"
|
||||
/>
|
||||
<defs>
|
||||
<radialGradient id="mycelium-cyan-glow">
|
||||
@@ -67,9 +66,9 @@ export function CallToAction() {
|
||||
Deploy in Cloud
|
||||
</Button>
|
||||
|
||||
<Link to="/nodes" className="text-cyan-400 hover:text-cyan-300 transition-colors">
|
||||
<Button to="/nodes" variant="link" color="cyan">
|
||||
Host a Node →
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@@ -54,7 +54,7 @@ export function HomeDesign() {
|
||||
{benefits.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="mt-8 group flex items-start gap-2 bg-white px-8 py-12 border border-gray-200 lg:border-t lg:border-b border-l-0.5 border-r-0.5"
|
||||
className="mt-8 group flex items-start gap-2 bg-white px-8 py-12 border border-gray-200 lg:border-t lg:border-b border-l-0.5 border-r-0.5 transition-all duration-300 ease-in-out hover:scale-[1.02] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
|
||||
>
|
||||
{/* Image on the LEFT */}
|
||||
<img
|
||||
|
||||
Reference in New Issue
Block a user