Remove sticky subnav and merge offerings into a single Core Areas grid
cgen-95813218002a4fad8735c0864fcbb015
This commit is contained in:
Builder.io
parent
9f206bac9c
commit
d68fca99f2
1 changed files with 65 additions and 146 deletions
|
|
@ -164,36 +164,6 @@ export default function Explore() {
|
||||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||||
Our impact across the digital landscape
|
Our impact across the digital landscape
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-6 flex flex-wrap justify-center gap-3">
|
|
||||||
{[
|
|
||||||
{ label: "Overview", href: "#overview" },
|
|
||||||
{ label: "Services", href: "#services" },
|
|
||||||
{ label: "Labs", href: "#labs" },
|
|
||||||
{ label: "Resources", href: "#resources" },
|
|
||||||
{ label: "Technology", href: "#technology" },
|
|
||||||
].map((item) => (
|
|
||||||
<a key={item.href} href={item.href} className="px-3 py-1.5 text-sm rounded-full border border-border/50 hover:border-aethex-400/60 hover:text-aethex-300 transition-colors">
|
|
||||||
{item.label}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="sticky top-16 z-40 border-t border-b border-border/30 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
||||||
<div className="container mx-auto px-4">
|
|
||||||
<div className="flex gap-4 overflow-x-auto py-3 text-sm">
|
|
||||||
{[
|
|
||||||
{ label: "Overview", href: "#overview" },
|
|
||||||
{ label: "Services", href: "#services" },
|
|
||||||
{ label: "Labs", href: "#labs" },
|
|
||||||
{ label: "Resources", href: "#resources" },
|
|
||||||
{ label: "Technology", href: "#technology" },
|
|
||||||
].map((item) => (
|
|
||||||
<a key={item.href} href={item.href} className="px-3 py-1.5 rounded-lg border border-border/40 hover:border-aethex-400/60 hover:text-aethex-300 transition-colors whitespace-nowrap">
|
|
||||||
{item.label}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -234,130 +204,79 @@ export default function Explore() {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Offerings Overview */}
|
{/* Core Areas */}
|
||||||
<section id="services" className="py-16 sm:py-20">
|
<section id="services" className="py-16 sm:py-20">
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<h2 className="text-3xl lg:text-4xl font-bold text-gradient">
|
<h2 className="text-3xl lg:text-4xl font-bold text-gradient">Core Areas</h2>
|
||||||
Everything We Offer
|
<p className="text-muted-foreground mt-2">Services, programs, resources, and community</p>
|
||||||
</h2>
|
|
||||||
<p className="text-muted-foreground mt-2">
|
|
||||||
Explore services, programs, resources, and community
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
{(() => {
|
||||||
{serviceOfferings.map((offering, idx) => (
|
const combined = [...serviceOfferings, ...resourceOfferings];
|
||||||
<Card
|
return (
|
||||||
key={offering.title}
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
className={`relative overflow-hidden border transition-all duration-500 group hover:-translate-y-1 ${offering.cardClass}`}
|
{combined.map((offering: any, idx: number) => (
|
||||||
style={{ animationDelay: `${idx * 0.08}s` }}
|
<Card
|
||||||
>
|
key={offering.title}
|
||||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-40 transition-opacity duration-500" />
|
className={`relative overflow-hidden border transition-all duration-500 group hover:-translate-y-1 ${offering.cardClass}`}
|
||||||
<CardHeader className="relative space-y-3">
|
style={{ animationDelay: `${idx * 0.06}s` }}
|
||||||
<div className="flex items-center justify-between">
|
>
|
||||||
<CardTitle className={`text-lg ${offering.titleClass}`}>
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-40 transition-opacity duration-500" />
|
||||||
{offering.title}
|
<CardHeader className="relative space-y-3">
|
||||||
</CardTitle>
|
<div className="flex items-center justify-between">
|
||||||
{offering.icon && (
|
<CardTitle className={`text-lg ${offering.titleClass}`}>
|
||||||
<div className="w-9 h-9 rounded-md bg-white/10 grid place-items-center">
|
{offering.title}
|
||||||
|
</CardTitle>
|
||||||
{offering.icon && (
|
{offering.icon && (
|
||||||
// @ts-ignore
|
<div className="w-9 h-9 rounded-md bg-white/10 grid place-items-center">
|
||||||
<offering.icon className="h-4 w-4" />
|
{/* @ts-ignore */}
|
||||||
|
<offering.icon className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
<CardDescription className={`text-sm ${offering.descriptionClass}`}>
|
||||||
</div>
|
{offering.description}
|
||||||
<CardDescription
|
</CardDescription>
|
||||||
className={`text-sm ${offering.descriptionClass}`}
|
{offering.tags && (
|
||||||
>
|
<div className="flex flex-wrap gap-2 pt-1">
|
||||||
{offering.description}
|
{offering.tags.map((t: string) => (
|
||||||
</CardDescription>
|
<span key={t} className="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded border border-white/10 text-white/80">
|
||||||
{offering.tags && (
|
{t}
|
||||||
<div className="flex flex-wrap gap-2 pt-1">
|
</span>
|
||||||
{offering.tags.map((t: string) => (
|
))}
|
||||||
<span key={t} className="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded border border-white/10 text-white/80">
|
</div>
|
||||||
{t}
|
)}
|
||||||
</span>
|
</CardHeader>
|
||||||
))}
|
<CardContent className="relative pt-2">
|
||||||
</div>
|
{offering.link ? (
|
||||||
)}
|
<Button asChild className={`w-full ${offering.buttonClass || "border-border"}`}>
|
||||||
</CardHeader>
|
<Link to={offering.link}>Learn More</Link>
|
||||||
<CardContent className="relative pt-2">
|
</Button>
|
||||||
<Button asChild className={`w-full ${offering.buttonClass}`}>
|
) : (
|
||||||
<Link to={offering.link}>Learn More</Link>
|
<div className="flex flex-wrap gap-2">
|
||||||
</Button>
|
{offering.actions?.map((action: any) => (
|
||||||
</CardContent>
|
<Button
|
||||||
</Card>
|
key={action.label}
|
||||||
))}
|
asChild
|
||||||
|
variant={action.variant as any}
|
||||||
</div>
|
className={`flex-1 min-w-[120px] ${action.buttonClass}`}
|
||||||
|
>
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
|
{action.external ? (
|
||||||
{resourceOfferings.map((offering, idx) => (
|
<a href={action.href} target="_blank" rel="noreferrer">{action.label}</a>
|
||||||
<Card
|
) : (
|
||||||
key={offering.title}
|
<Link to={action.href}>{action.label}</Link>
|
||||||
className={`relative overflow-hidden border transition-all duration-500 group hover:-translate-y-1 ${offering.cardClass}`}
|
)}
|
||||||
style={{ animationDelay: `${idx * 0.08}s` }}
|
</Button>
|
||||||
>
|
))}
|
||||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-white/10 via-transparent to-transparent opacity-0 group-hover:opacity-35 transition-opacity duration-500" />
|
</div>
|
||||||
<CardHeader className="relative space-y-3">
|
)}
|
||||||
<div className="flex items-center justify-between">
|
</CardContent>
|
||||||
<CardTitle className={`text-lg ${offering.titleClass}`}>
|
</Card>
|
||||||
{offering.title}
|
))}
|
||||||
</CardTitle>
|
</div>
|
||||||
{offering.icon && (
|
);
|
||||||
<div className="w-9 h-9 rounded-md bg-white/10 grid place-items-center">
|
})()}
|
||||||
{offering.icon && (
|
|
||||||
// @ts-ignore
|
|
||||||
<offering.icon className="h-4 w-4" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<CardDescription
|
|
||||||
className={`text-sm ${offering.descriptionClass}`}
|
|
||||||
>
|
|
||||||
{offering.description}
|
|
||||||
</CardDescription>
|
|
||||||
{offering.tags && (
|
|
||||||
<div className="flex flex-wrap gap-2 pt-1">
|
|
||||||
{offering.tags.map((t: string) => (
|
|
||||||
<span key={t} className="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded border border-white/10 text-white/80">
|
|
||||||
{t}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="relative">
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{offering.actions.map((action) => (
|
|
||||||
<Button
|
|
||||||
key={action.label}
|
|
||||||
asChild
|
|
||||||
variant={action.variant as any}
|
|
||||||
className={`flex-1 min-w-[120px] ${action.buttonClass}`}
|
|
||||||
>
|
|
||||||
{action.external ? (
|
|
||||||
<a
|
|
||||||
href={action.href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
{action.label}
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<Link to={action.href}>{action.label}</Link>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue