feat: implement floating navbar with aurora background and updated header styling
This commit is contained in:
34
src/pages/home/HomeAurora.tsx
Normal file
34
src/pages/home/HomeAurora.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import { H1, H2, H3, H4, H5 } from "@/components/Texts";
|
||||
import { AuroraBackground } from "@/components/ui/aurora-background";
|
||||
import { ScrollDownArrow } from '@/components/ScrollDownArrow';
|
||||
|
||||
export function HomeAurora() {
|
||||
return (
|
||||
<AuroraBackground>
|
||||
<motion.div
|
||||
initial={{ opacity: 0.0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.5,
|
||||
duration: 1,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="relative mb-20 -top-5 flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
|
||||
>
|
||||
<div className="text-center text-gray-800">
|
||||
<H1>Decentralized Autonomous <span className="font-neuton text-bold lg:text-8xl italic">Agentic Cloud.</span></H1>
|
||||
</div>
|
||||
<div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
|
||||
<H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
|
||||
</div>
|
||||
<div className="pt-8">
|
||||
<ScrollDownArrow />
|
||||
</div>
|
||||
|
||||
</motion.div>
|
||||
</AuroraBackground>
|
||||
);
|
||||
}
|
||||
35
src/pages/home/HomeHeroDark.tsx
Normal file
35
src/pages/home/HomeHeroDark.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "motion/react";
|
||||
import { LampContainer } from "@/components/ui/lamp";
|
||||
|
||||
export function HomeHeroDark() {
|
||||
return (
|
||||
<LampContainer>
|
||||
<motion.h1
|
||||
initial={{ opacity: 0.5, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl max-w-4xl"
|
||||
>
|
||||
Decentralized Autonomous Agentic Cloud.
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
initial={{ opacity: 0.5, y: 60 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{
|
||||
delay: 0.5,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-lg font-medium tracking-tight text-transparent md:text-xl max-w-3xl"
|
||||
>
|
||||
Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.
|
||||
</motion.p>
|
||||
</LampContainer>
|
||||
);
|
||||
}
|
||||
@@ -3,15 +3,17 @@ import { HomeHero } from './HomeHero'
|
||||
import { WorldMapSection } from './WorldMapSection'
|
||||
import { StackSection } from './StackSection'
|
||||
import { HomeHeroLight2 } from './HomeHeroLight2'
|
||||
import { HomeHeroDark } from './HomeHeroDark'
|
||||
import { HomeAurora } from './HomeAurora'
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div>
|
||||
<AnimatedSection>
|
||||
<HomeHero />
|
||||
<HomeAurora />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<AnimatedSection id="next-section">
|
||||
<WorldMapSection />
|
||||
</AnimatedSection>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user