Matiss/Nemia-Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Introduce InstallSection component and refine existing UI for the marketing page, layout, and various components.

Browse Source
This commit is contained in:
Matiss Jurevics
2026-02-08 16:50:30 +00:00
parent 80aaf16bba
commit 4ec9355510
10 changed files with 231 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/Features.tsx
View File

@@ -1,7 +1,38 @@
import React from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Smartphone, Sparkles, Clock } from 'lucide-react';
import { animate, stagger } from 'animejs';
const Features: React.FC = () => {
const gridRef = useRef<HTMLDivElement>(null);
const [hasAnimated, setHasAnimated] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !hasAnimated && gridRef.current) {
animate(gridRef.current.children, {
translateY: [50, 0],
opacity: [0, 1],
delay: stagger(200),
easing: 'outElastic(1, .6)',
duration: 800
});
setHasAnimated(true);
observer.disconnect();
}
});
},
{ threshold: 0.1 }
);
if (gridRef.current) {
observer.observe(gridRef.current);
}
return () => observer.disconnect();
}, [hasAnimated]);
return (
<section id="features" className="py-24 bg-background-dark">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -14,9 +45,9 @@ const Features: React.FC = () => {
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<div ref={gridRef} className="grid md:grid-cols-3 gap-8">
{/* Feature 1 */}
<div className="bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
<div className="opacity-0 bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
<div className="w-14 h-14 bg-indigo-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<Smartphone className="text-indigo-400" size={30} />
</div>
@@ -27,7 +58,7 @@ const Features: React.FC = () => {
</div>
{/* Feature 2 */}
<div className="bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
<div className="opacity-0 bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
<div className="w-14 h-14 bg-primary/20 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<Sparkles className="text-emerald-400" size={30} />
</div>
@@ -38,7 +69,7 @@ const Features: React.FC = () => {
</div>
{/* Feature 3 */}
<div className="bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
<div className="opacity-0 bg-surface-dark p-8 rounded-2xl border border-gray-800 hover:border-primary/50 transition-colors group">
<div className="w-14 h-14 bg-pink-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
<Clock className="text-pink-400" size={30} />
</div>