Formatted whole project
This commit is contained in:
23
src/App.jsx
23
src/App.jsx
@@ -1,18 +1,19 @@
|
||||
import React from 'react';
|
||||
import { Navbar } from './components/Navbar';
|
||||
import { Footer } from './components/Footer';
|
||||
import { Hero } from './sections/Hero';
|
||||
import { Projects } from './sections/Projects';
|
||||
import { Team } from './sections/Team';
|
||||
import {Navbar} from './components/Navbar';
|
||||
import {Footer} from './components/Footer';
|
||||
import {Hero} from './sections/Hero';
|
||||
import {Projects} from './sections/Projects';
|
||||
import {Team} from './sections/Team';
|
||||
|
||||
export default function LiquidDevelopment() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0e0e0e] text-white font-sans selection:bg-[#00A3FF] selection:text-white overflow-x-hidden">
|
||||
<Navbar />
|
||||
<Hero />
|
||||
<Projects />
|
||||
<Team />
|
||||
<Footer />
|
||||
<div
|
||||
className="min-h-screen bg-[#0e0e0e] text-white font-sans selection:bg-[#00A3FF] selection:text-white overflow-x-hidden">
|
||||
<Navbar/>
|
||||
<Hero/>
|
||||
<Projects/>
|
||||
<Team/>
|
||||
<Footer/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
|
||||
export const BrandLogo = ({ className = "w-12 h-12" }) => (
|
||||
export const BrandLogo = ({className = "w-12 h-12"}) => (
|
||||
<img
|
||||
src="/logo.png"
|
||||
alt="Liquid Development logo"
|
||||
|
||||
@@ -1,14 +1,25 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {motion} from 'framer-motion';
|
||||
|
||||
export const Bubbles = () => (
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
|
||||
{Array.from({ length: 15 }).map((_, i) => (
|
||||
<motion.div key={i} className="absolute rounded-full bg-[#00A3FF]/20 backdrop-blur-sm border border-[#00A3FF]/30"
|
||||
initial={{ y: "120vh", x: Math.random() * 100 + "vw", scale: Math.random() * 0.5 + 0.5, opacity: 0 }}
|
||||
animate={{ y: "-20vh", opacity: [0, 1, 0] }}
|
||||
transition={{ duration: Math.random() * 10 + 10, repeat: Infinity, ease: "linear", delay: Math.random() * 10 }}
|
||||
style={{ width: Math.random() * 50 + 20 + "px", height: Math.random() * 50 + 20 + "px" }}
|
||||
{Array.from({length: 15}).map((_, i) => (
|
||||
<motion.div key={i}
|
||||
className="absolute rounded-full bg-[#00A3FF]/20 backdrop-blur-sm border border-[#00A3FF]/30"
|
||||
initial={{
|
||||
y: "120vh",
|
||||
x: Math.random() * 100 + "vw",
|
||||
scale: Math.random() * 0.5 + 0.5,
|
||||
opacity: 0
|
||||
}}
|
||||
animate={{y: "-20vh", opacity: [0, 1, 0]}}
|
||||
transition={{
|
||||
duration: Math.random() * 10 + 10,
|
||||
repeat: Infinity,
|
||||
ease: "linear",
|
||||
delay: Math.random() * 10
|
||||
}}
|
||||
style={{width: Math.random() * 50 + 20 + "px", height: Math.random() * 50 + 20 + "px"}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Github, Mail } from 'lucide-react';
|
||||
import { BrandLogo } from './BrandLogo';
|
||||
import { ObfuscatedMail } from './ObfuscatedMail';
|
||||
import { NAV_LINKS, SOCIALS } from '../data/content';
|
||||
import {Github, Mail} from 'lucide-react';
|
||||
import {BrandLogo} from './BrandLogo';
|
||||
import {ObfuscatedMail} from './ObfuscatedMail';
|
||||
import {NAV_LINKS, SOCIALS} from '../data/content';
|
||||
|
||||
export const Navbar = () => {
|
||||
// Extract email address from "mailto:..." string if necessary
|
||||
@@ -12,16 +12,22 @@ export const Navbar = () => {
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 backdrop-blur-xl bg-[#0e0e0e]/90 border-b border-white/5">
|
||||
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<BrandLogo className="w-8 h-8 text-[#00A3FF]" />
|
||||
<span className="font-bold text-lg md:text-xl tracking-wider text-white">LIQUID <span className="text-[#00A3FF]">DEVELOPMENT</span></span>
|
||||
<BrandLogo className="w-8 h-8 text-[#00A3FF]"/>
|
||||
<span className="font-bold text-lg md:text-xl tracking-wider text-white">
|
||||
LIQUID <span className="text-[#00A3FF]">DEVELOPMENT</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="hidden md:flex gap-6 text-sm font-medium text-gray-300 items-center">
|
||||
{NAV_LINKS.map((item) => (
|
||||
<a key={item} href={`#${item.toLowerCase()}`} className="hover:text-[#00A3FF] transition-colors uppercase tracking-wide text-xs">{item}</a>
|
||||
<a key={item} href={`#${item.toLowerCase()}`}
|
||||
className="hover:text-[#00A3FF] transition-colors uppercase tracking-wide text-xs">{item}
|
||||
</a>
|
||||
))}
|
||||
|
||||
<a href={SOCIALS.github} target="_blank" rel="noreferrer" className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all" title="GitHub">
|
||||
<Github size={18} />
|
||||
<a href={SOCIALS.github} target="_blank" rel="noreferrer"
|
||||
className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all"
|
||||
title="GitHub">
|
||||
<Github size={18}/>
|
||||
</a>
|
||||
|
||||
{/* Obfuscated Email Button */}
|
||||
@@ -30,7 +36,7 @@ export const Navbar = () => {
|
||||
className="bg-white/10 hover:bg-[#00A3FF] text-white p-2 rounded-full transition-all flex items-center justify-center"
|
||||
title="Contact Us"
|
||||
>
|
||||
<Mail size={18} />
|
||||
<Mail size={18}/>
|
||||
</ObfuscatedMail>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
export const ObfuscatedMail = ({ email, className, children, title }) => {
|
||||
export const ObfuscatedMail = ({email, className, children, title}) => {
|
||||
const handleClick = (e) => {
|
||||
e.preventDefault();
|
||||
window.location.href = `mailto:${email}`;
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
html { scroll-behavior: smooth; }
|
||||
body { margin: 0; background: #0e0e0e; }
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #0e0e0e;
|
||||
}
|
||||
|
||||
@@ -2,4 +2,5 @@ import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><App /></React.StrictMode>)
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><App/></React.StrictMode>)
|
||||
|
||||
@@ -1,35 +1,57 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
import { BrandLogo } from '../components/BrandLogo';
|
||||
import { Bubbles } from '../components/Bubbles';
|
||||
import { ObfuscatedMail } from '../components/ObfuscatedMail';
|
||||
import { SOCIALS } from '../data/content';
|
||||
import {motion} from 'framer-motion';
|
||||
import {ArrowRight} from 'lucide-react';
|
||||
import {BrandLogo} from '../components/BrandLogo';
|
||||
import {Bubbles} from '../components/Bubbles';
|
||||
import {ObfuscatedMail} from '../components/ObfuscatedMail';
|
||||
import {SOCIALS} from '../data/content';
|
||||
|
||||
export const Hero = () => {
|
||||
const rawEmail = SOCIALS.email.replace('mailto:', '');
|
||||
|
||||
return (
|
||||
<section id="home" className="relative h-screen flex items-center justify-center pt-20 overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10" style={{ backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>
|
||||
<Bubbles />
|
||||
<section id="home" className="relative h-screen flex items-center justify-center pt-20 overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 opacity-10"
|
||||
style={{
|
||||
backgroundImage: 'radial-gradient(#ffffff 1px, transparent 1px)',
|
||||
backgroundSize: '40px 40px'
|
||||
}}>
|
||||
</div>
|
||||
<Bubbles/>
|
||||
<div className="relative z-10 text-center px-6 max-w-6xl mx-auto">
|
||||
<motion.div initial={{ scale: 0.8, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} transition={{ duration: 0.8 }} className="mx-auto mb-8 w-24 h-24 md:w-32 md:h-32 rounded-full bg-[#00A3FF]/5 flex items-center justify-center border border-[#00A3FF]/30 shadow-[0_0_60px_-10px_rgba(0,163,255,0.4)]">
|
||||
<BrandLogo className="w-14 h-14 md:w-20 md:h-20 text-[#00A3FF]" />
|
||||
<motion.div initial={{scale: 0.8, opacity: 0}} animate={{scale: 1, opacity: 1}}
|
||||
transition={{duration: 0.8}}
|
||||
className="mx-auto mb-8 w-24 h-24 md:w-32 md:h-32 rounded-full bg-[#00A3FF]/5 flex items-center justify-center border border-[#00A3FF]/30 shadow-[0_0_60px_-10px_rgba(0,163,255,0.4)]"
|
||||
>
|
||||
<BrandLogo className="w-14 h-14 md:w-20 md:h-20 text-[#00A3FF]"/>
|
||||
</motion.div>
|
||||
|
||||
<motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.2 }}>
|
||||
<motion.div initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.2}}>
|
||||
<h1 className="text-4xl md:text-7xl font-extrabold tracking-tighter mb-6">
|
||||
<ObfuscatedMail email={rawEmail} className="cursor-pointer hover:opacity-80 transition-opacity duration-300 bg-transparent border-none p-0 font-extrabold tracking-tighter text-4xl md:text-7xl text-white">
|
||||
LIQUID <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200">DEVELOPMENT</span>
|
||||
<ObfuscatedMail email={rawEmail}
|
||||
className="cursor-pointer hover:opacity-80 transition-opacity duration-300 bg-transparent border-none p-0 font-extrabold tracking-tighter text-4xl md:text-7xl text-white"
|
||||
>
|
||||
LIQUID
|
||||
<span
|
||||
className="text-transparent bg-clip-text bg-gradient-to-r from-[#00A3FF] to-cyan-200"
|
||||
>
|
||||
DEVELOPMENT
|
||||
</span>
|
||||
</ObfuscatedMail>
|
||||
</h1>
|
||||
</motion.div>
|
||||
|
||||
<motion.p initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.4 }} className="text-lg md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light">Open-source software development team</motion.p>
|
||||
<motion.p initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.4}}
|
||||
className="text-lg md:text-2xl text-gray-400 mb-10 max-w-2xl mx-auto font-light">Open-source
|
||||
software development team
|
||||
</motion.p>
|
||||
|
||||
<motion.div initial={{ y: 20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.6 }} className="flex flex-col sm:flex-row gap-6 justify-center items-center">
|
||||
<a href="#projects" className="px-8 py-3 rounded-full border border-[#00A3FF] hover:bg-[#00A3FF]/10 text-white font-bold transition-all flex items-center justify-center gap-2">
|
||||
<motion.div initial={{y: 20, opacity: 0}} animate={{y: 0, opacity: 1}} transition={{delay: 0.6}}
|
||||
className="flex flex-col sm:flex-row gap-6 justify-center items-center">
|
||||
<a href="#projects"
|
||||
className="px-8 py-3 rounded-full border border-[#00A3FF] hover:bg-[#00A3FF]/10 text-white font-bold transition-all flex items-center justify-center gap-2"
|
||||
>
|
||||
Explore Work
|
||||
</a>
|
||||
|
||||
@@ -38,7 +60,10 @@ export const Hero = () => {
|
||||
email={rawEmail}
|
||||
className="group flex items-center gap-2 text-white hover:text-gray-400 transition-colors font-medium cursor-pointer"
|
||||
>
|
||||
Contact Team <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform text-[#00A3FF]"/>
|
||||
Contact Team
|
||||
<ArrowRight size={18}
|
||||
className="group-hover:translate-x-1 transition-transform text-[#00A3FF]"
|
||||
/>
|
||||
</ObfuscatedMail>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -1,33 +1,84 @@
|
||||
import React from 'react';
|
||||
import { ArrowRight, Smartphone } from 'lucide-react';
|
||||
import { FadeInWhenVisible } from '../utils/animations';
|
||||
import {ArrowRight, Smartphone} from 'lucide-react';
|
||||
import {FadeInWhenVisible} from '../utils/animations';
|
||||
|
||||
export const Projects = () => (
|
||||
<section id="projects" className="py-32 relative z-10 bg-gradient-to-b from-[#0e0e0e] to-[#050505] overflow-hidden">
|
||||
<div className="absolute right-0 top-1/4 w-1/2 h-1/2 bg-[#00A3FF]/10 blur-[120px] rounded-full pointer-events-none"></div>
|
||||
<div
|
||||
className="absolute right-0 top-1/4 w-1/2 h-1/2 bg-[#00A3FF]/10 blur-[120px] rounded-full pointer-events-none"
|
||||
></div>
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="mb-20"><h2 className="text-4xl md:text-5xl font-bold mb-4">Projects</h2><div className="h-1 w-24 bg-[#00A3FF] rounded-full"></div></div>
|
||||
<FadeInWhenVisible>
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center bg-[#121212] rounded-3xl p-8 md:p-12 border border-white/10 hover:border-[#00A3FF]/30 transition-all duration-500 shadow-2xl">
|
||||
<div>
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#00A3FF]/10 text-[#00A3FF] text-xs font-bold mb-6 border border-[#00A3FF]/20"><span className="animate-pulse w-2 h-2 rounded-full bg-[#00A3FF]"></span> IN DEVELOPMENT</div>
|
||||
<h3 className="text-3xl md:text-4xl font-bold text-white mb-4">GameTracker App</h3>
|
||||
<p className="text-gray-300 text-lg mb-6 leading-relaxed">An all-in-one app to track card- and board games, manage players and groups and get statistics about your played games.</p>
|
||||
<div className="flex flex-wrap gap-2 mb-8">{['Flutter', 'iOS', 'Android', 'Statistics'].map(tag => (<span key={tag} className="px-3 py-1 bg-white/5 border border-white/10 rounded-md text-sm text-gray-400">{tag}</span>))}</div>
|
||||
<a href="https://github.com/LiquidDevelopmentDE/game-tracker" target="_blank" rel="noreferrer" className="inline-flex items-center text-white font-semibold hover:text-[#00A3FF] transition-colors group">View Project Repository <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" size={20} /></a>
|
||||
<div className="mb-20"><h2 className="text-4xl md:text-5xl font-bold mb-4">Projects</h2>
|
||||
<div className="h-1 w-24 bg-[#00A3FF] rounded-full"></div>
|
||||
</div>
|
||||
<div className="relative h-[460px] bg-gradient-to-br from-gray-900 to-black rounded-xl border border-white/10 flex items-center justify-center overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
|
||||
<div className="relative w-[180px] h-[370px] bg-gray-800 rounded-[2.5rem] border-[6px] border-gray-700 shadow-2xl flex flex-col overflow-hidden transform group-hover:scale-105 group-hover:rotate-[-2deg] transition-all duration-500">
|
||||
<div className="h-6 w-24 bg-black absolute top-0 left-1/2 -translate-x-1/2 rounded-b-xl z-20"></div>
|
||||
<FadeInWhenVisible>
|
||||
<div
|
||||
className="grid lg:grid-cols-2 gap-12 items-center bg-[#121212] rounded-3xl p-8 md:p-12 border border-white/10 hover:border-[#00A3FF]/30 transition-all duration-500 shadow-2xl"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#00A3FF]/10 text-[#00A3FF] text-xs font-bold mb-6 border border-[#00A3FF]/20"
|
||||
>
|
||||
<span className="animate-pulse w-2 h-2 rounded-full bg-[#00A3FF]"></span>
|
||||
IN DEVELOPMENT
|
||||
</div>
|
||||
<h3 className="text-3xl md:text-4xl font-bold text-white mb-4">GameTracker App</h3>
|
||||
<p className="text-gray-300 text-lg mb-6 leading-relaxed">
|
||||
An all-in-one app to track card- and
|
||||
board games, manage players and groups and get statistics about your played games.
|
||||
</p>
|
||||
<div
|
||||
className="flex flex-wrap gap-2 mb-8"
|
||||
>
|
||||
{['Flutter', 'iOS', 'Android', 'Statistics'].map(tag => (
|
||||
<span key={tag}
|
||||
className="px-3 py-1 bg-white/5 border border-white/10 rounded-md text-sm text-gray-400"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<a href="https://github.com/LiquidDevelopmentDE/game-tracker"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="inline-flex items-center text-white font-semibold hover:text-[#00A3FF] transition-colors group"
|
||||
>
|
||||
View Project Repository
|
||||
<ArrowRight
|
||||
className="ml-2 group-hover:translate-x-1 transition-transform" size={20}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="relative h-[460px] bg-gradient-to-br from-gray-900 to-black rounded-xl border border-white/10 flex items-center justify-center overflow-hidden group"
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"
|
||||
></div>
|
||||
<div
|
||||
className="relative w-[180px] h-[370px] bg-gray-800 rounded-[2.5rem] border-[6px] border-gray-700 shadow-2xl flex flex-col overflow-hidden transform group-hover:scale-105 group-hover:rotate-[-2deg] transition-all duration-500"
|
||||
>
|
||||
<div
|
||||
className="h-6 w-24 bg-black absolute top-0 left-1/2 -translate-x-1/2 rounded-b-xl z-20"
|
||||
></div>
|
||||
<div className="h-full bg-gray-900 flex flex-col pt-10 px-3">
|
||||
<div className="h-5 w-24 bg-[#00A3FF]/20 rounded mb-5 self-center"></div>
|
||||
<div className="grid grid-cols-2 gap-2 mb-3"><div className="h-20 bg-gray-800 rounded-lg border border-white/5"></div><div className="h-20 bg-gray-800 rounded-lg border border-white/5"></div></div>
|
||||
<div className="grid grid-cols-2 gap-2 mb-3">
|
||||
<div className="h-20 bg-gray-800 rounded-lg border border-white/5"></div>
|
||||
<div className="h-20 bg-gray-800 rounded-lg border border-white/5"></div>
|
||||
</div>
|
||||
<div className="h-28 bg-gray-800 rounded-lg border border-white/5 mb-3"></div>
|
||||
<div className="flex-1 bg-gray-800/50 rounded-t-xl border-t border-white/5 mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-6 right-6 bg-black/80 backdrop-blur-md border border-[#00A3FF]/50 p-3 rounded-lg flex items-center gap-3 shadow-lg transform group-hover:translate-y-2 transition-transform z-30"><div className="text-right"><div className="text-xs text-gray-400">Soon available on</div><div className="text-sm font-bold text-white">iOS & Android</div></div><Smartphone size={24} className="text-[#00A3FF]" /></div>
|
||||
<div
|
||||
className="absolute bottom-6 right-6 bg-black/80 backdrop-blur-md border border-[#00A3FF]/50 p-3 rounded-lg flex items-center gap-3 shadow-lg transform group-hover:translate-y-2 transition-transform z-30"
|
||||
>
|
||||
<div className="text-right">
|
||||
<div className="text-xs text-gray-400">Soon available on</div>
|
||||
<div className="text-sm font-bold text-white">iOS & Android</div>
|
||||
</div>
|
||||
<Smartphone size={24} className="text-[#00A3FF]"/></div>
|
||||
</div>
|
||||
</div>
|
||||
</FadeInWhenVisible>
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
import React from 'react';
|
||||
import { FadeInWhenVisible } from '../utils/animations';
|
||||
import { TeamMember } from '../components/TeamMember';
|
||||
import { TEAM_MEMBERS } from '../data/content';
|
||||
import {FadeInWhenVisible} from '../utils/animations';
|
||||
import {TeamMember} from '../components/TeamMember';
|
||||
import {TEAM_MEMBERS} from '../data/content';
|
||||
|
||||
export const Team = () => (
|
||||
<section id="team" className="py-24 relative z-10 bg-gradient-to-b from-[#050505] to-black">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="text-center mb-16"><h2 className="text-3xl md:text-4xl font-bold mb-4">The Team</h2><p className="text-gray-400">Meet the creators.</p></div>
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||
The Team
|
||||
</h2>
|
||||
<p
|
||||
className="text-gray-400">Meet the creators.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8 justify-center max-w-5xl mx-auto">
|
||||
{TEAM_MEMBERS.map((member, index) => (
|
||||
<FadeInWhenVisible key={member.name} delay={0.1 * (index + 1)}>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import React, {useRef} from 'react';
|
||||
import {motion, useInView} from 'framer-motion';
|
||||
|
||||
export const fadeInUp = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
|
||||
hidden: {opacity: 0, y: 30},
|
||||
visible: {opacity: 1, y: 0, transition: {duration: 0.6, ease: "easeOut"}}
|
||||
};
|
||||
|
||||
export const FadeInWhenVisible = ({ children, delay = 0 }) => {
|
||||
export const FadeInWhenVisible = ({children, delay = 0}) => {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: "-50px" });
|
||||
const isInView = useInView(ref, {once: true, margin: "-50px"});
|
||||
return (
|
||||
<div ref={ref}>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
initial="hidden"
|
||||
animate={isInView ? "visible" : "hidden"}
|
||||
transition={{ delay }}
|
||||
transition={{delay}}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user