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