bender/4af64fca-64b0-4da9-9b1f-71791af7e7b7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Applied glassmorphic effect to various sections and components

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-05-15 11:00:33 +00:00
parent 87da3f3eb5
commit 3692a53fa3
7 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/sections/about/AboutFeaturesSplit.tsx
View File

@@ -54,7 +54,7 @@ const AboutFeaturesSplit = ({
</div>
<div className="flex flex-col md:flex-row md:items-stretch gap-5">
<div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded">
<div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded bg-background/60 backdrop-blur-md">
{items.map((item, index) => {
const ItemIcon = resolveIcon(item.icon);
return (
@@ -74,7 +74,7 @@ const AboutFeaturesSplit = ({
})}
</div>
<div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
<div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden bg-background/60 backdrop-blur-md">
<div className="relative size-full">
<ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" />
</div>

2
src/components/sections/contact/ContactCta.tsx
View File

@@ -16,7 +16,7 @@ const ContactCta = ({
return (
<section aria-label="Contact section" className="py-20">
<div className="w-content-width mx-auto">
<ScrollReveal variant="fade" className="flex items-center justify-center py-20 px-5 md:px-10 card rounded">
<ScrollReveal variant="fade" className="flex items-center justify-center py-20 px-5 md:px-10 card rounded bg-background/60 backdrop-blur-md">
<div className="w-full md:w-3/4 flex flex-col items-center gap-3">
<span className="card rounded px-3 py-1 text-sm">{tag}</span>

2
src/components/sections/faq/FaqSplitMedia.tsx
View File

@@ -84,7 +84,7 @@ const FaqSplitMedia = ({
<div
key={index}
onClick={() => handleToggle(index)}
className="p-3 2xl:p-4 rounded secondary-button cursor-pointer select-none"
className="p-3 2xl:p-4 rounded secondary-button cursor-pointer select-none bg-background/60 backdrop-blur-md"
>
<div className="flex items-center justify-between gap-3">
<h3 className="text-base md:text-lg font-medium leading-tight">{item.question}</h3>

2
src/components/sections/features/FeaturesBento.tsx
View File

@@ -84,7 +84,7 @@ const FeaturesBento = ({
<ScrollReveal variant="fade-blur">
<GridOrCarousel>
{features.map((feature) => (
<div key={feature.title} className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded h-full">
<div key={feature.title} className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded h-full bg-background/60 backdrop-blur-md">
<div className="relative h-72 overflow-hidden">{getBentoComponent(feature)}</div>
<div className="flex flex-col gap-1">
<h3 className="text-2xl font-medium leading-tight">{feature.title}</h3>

2
src/components/sections/metrics/MetricsMediaCards.tsx
View File

@@ -68,7 +68,7 @@ const MetricsMediaCards = ({
className={cls("grid grid-cols-2 gap-5", shouldSpanFull && "md:col-span-2")}
>
<div className={cls(
"flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded",
"flex flex-col justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded bg-background/60 backdrop-blur-md",
shouldSpanFull ? "aspect-square md:aspect-video" : "aspect-square",
isEven && "order-2 md:order-1"
)}>

2
src/components/sections/product/ProductRatingCards.tsx
View File

@@ -96,7 +96,7 @@ const ProductRatingCards = ({
<button
key={product.name}
onClick={product.onClick}
className="group h-full flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 text-left card rounded cursor-pointer"
className="group h-full flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 text-left card rounded cursor-pointer bg-background/60 backdrop-blur-md"
>
<div className="aspect-square rounded overflow-hidden">
<ImageOrVideo imageSrc={product.imageSrc} />

4
src/components/sections/testimonial/TestimonialMetricsCards.tsx
View File

@@ -72,7 +72,7 @@ const TestimonialMetricsCards = ({
<div key={testimonial.name} className="relative aspect-3/4 rounded overflow-hidden">
<ImageOrVideo imageSrc={testimonial.imageSrc} videoSrc={testimonial.videoSrc} />
<div className="absolute inset-x-5 bottom-5 flex flex-col gap-2 p-3 xl:p-4 2xl:p-5 card rounded backdrop-blur-sm">
<div className="absolute inset-x-5 bottom-5 flex flex-col gap-2 p-3 xl:p-4 2xl:p-5 card rounded bg-background/60 backdrop-blur-md">
<div className="flex gap-1 mb-1">
{Array.from({ length: 5 }).map((_, index) => (
<Star
@@ -95,7 +95,7 @@ const TestimonialMetricsCards = ({
</GridOrCarousel>
</ScrollReveal>
<ScrollReveal variant="fade-blur" className="flex flex-col md:flex-row items-center justify-between w-content-width mx-auto p-8 md:py-16 card rounded">
<ScrollReveal variant="fade-blur" className="flex flex-col md:flex-row items-center justify-between w-content-width mx-auto p-8 md:py-16 card rounded bg-background/60 backdrop-blur-md">
{metrics.map((metric, index) => (
<div key={metric.label} className="flex flex-col md:flex-row items-center w-full md:flex-1">
<div className={cls("flex flex-col items-center flex-1 gap-1 text-center md:py-0", index === 0 ? "pb-5" : index === 2 ? "pt-5" : "py-5")}>