+ {/* Info cards */}
+
{infoArray.map((info, index) => (
+ {/* CTA section */}
{!userProfile && (
-
- Ready to level up your developer game? Let's go! 🎮
-
+ {/* Glow effect behind CTA */}
+
+
+
+ Ready to level up your developer game? Let's go!
+
+ 🎮
+
+
+
navigate("/register")}
+ animate={{
+ boxShadow: [
+ "0 0 20px rgba(160, 160, 255, 0.3)",
+ "0 0 40px rgba(160, 160, 255, 0.6)",
+ "0 0 20px rgba(160, 160, 255, 0.3)",
+ ],
+ }}
+ transition={{
+ boxShadow: { duration: 2, repeat: Infinity, ease: "easeInOut" },
+ }}
+ className="relative font-mono px-10 sm:px-12 py-5 sm:py-6 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-bold text-lg sm:text-xl shadow-2xl overflow-hidden group"
+ onClick={() => handleRedirect("register")}
>
- Start Your Journey
+ {/* Animated shine effect */}
+
+
+ Start Your Journey
+
+ {/* Arrow animation */}
+
+ →
+
+
+ {/* Decorative elements */}
+
+ {[0, 1, 2].map((i) => (
+
+ ))}
+
)}
+
+ {/* Bottom corner accent */}
+
);
}
-export default Community;
+export default Community;
\ No newline at end of file
diff --git a/src/components/ui/Hero.jsx b/src/components/ui/Hero.jsx
index 4e6bb6f..7aa0262 100644
--- a/src/components/ui/Hero.jsx
+++ b/src/components/ui/Hero.jsx
@@ -1,68 +1,194 @@
-import { motion } from "framer-motion";
-import { useState } from "react";
-import HeroAnimation from "../animations/HeroAnimation";
-import { useNavigate } from "react-router-dom";
+import { motion, useAnimation } from "framer-motion";
+import { useState, useEffect } from "react";
+
+// Lightweight typewriter hook
+function useTypewriter(words, typingSpeed = 150, deletingSpeed = 100, pauseDuration = 2000) {
+ const [displayText, setDisplayText] = useState("");
+ const [wordIndex, setWordIndex] = useState(0);
+ const [isDeleting, setIsDeleting] = useState(false);
+
+ useEffect(() => {
+ const currentWord = words[wordIndex];
+
+ const timer = setTimeout(() => {
+ if (!isDeleting) {
+ if (displayText.length < currentWord.length) {
+ setDisplayText(currentWord.slice(0, displayText.length + 1));
+ } else {
+ setTimeout(() => setIsDeleting(true), pauseDuration);
+ }
+ } else {
+ if (displayText.length > 0) {
+ setDisplayText(currentWord.slice(0, displayText.length - 1));
+ } else {
+ setIsDeleting(false);
+ setWordIndex((prev) => (prev + 1) % words.length);
+ }
+ }
+ }, isDeleting ? deletingSpeed : typingSpeed);
+
+ return () => clearTimeout(timer);
+ }, [displayText, isDeleting, wordIndex, words, typingSpeed, deletingSpeed, pauseDuration]);
+
+ return displayText;
+}
+
+// Floating particles component
+function FloatingParticles() {
+ const particles = Array.from({ length: 20 }, (_, i) => ({
+ id: i,
+ x: Math.random() * 100,
+ y: Math.random() * 100,
+ size: Math.random() * 4 + 2,
+ duration: Math.random() * 20 + 10,
+ delay: Math.random() * 5,
+ }));
+
+ return (
+
+ {particles.map((particle) => (
+
+ ))}
+
+ );
+}
+
+// Animated gradient background
+function AnimatedGradient() {
+ return (
+
+
+
+ );
+}
+
+// Scroll indicator
+function ScrollIndicator() {
+ return (
+
+
+
+
+
+ ↓
+
+
+ );
+}
function Hero() {
const [userProfile] = useState(null);
+ const phrases = ["Code.", "Create.", "Connect."];
+ const typedText = useTypewriter(phrases, 120, 80, 1500);
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
- transition: { staggerChildren: 0.2 },
+ transition: { staggerChildren: 0.15, delayChildren: 0.2 },
},
};
const itemVariants = {
- hidden: { opacity: 0, y: 20 },
+ hidden: { opacity: 0, y: 30 },
visible: {
opacity: 1,
y: 0,
- transition: { duration: 0.5 },
+ transition: { duration: 0.6, ease: "easeOut" },
},
};
- const navigate=useNavigate();
+ const glowVariants = {
+ animate: {
+ boxShadow: [
+ "0 0 20px rgba(160, 160, 255, 0.3)",
+ "0 0 40px rgba(160, 160, 255, 0.6)",
+ "0 0 20px rgba(160, 160, 255, 0.3)",
+ ],
+ },
+ };
- function handleRedirect(value){
- if(value==="register"){navigate("/register")}
- else if(value==="login"){navigate("/login")}
- else{navigate("/dashboard")}
+ function handleRedirect(value) {
+ console.log(`Navigating to: ${value}`);
}
return (
-
- {/* top animation */}
-
-
- {/* bottom animation */}
-
+
+ {/* Animated gradient background */}
+
+
+ {/* Floating particles */}
+
- {/* subtle central animation effect */}
-
-
-
+ {/* Grid overlay for hacker aesthetic */}
+
- {/* hero contents */}
+ {/* Hero content */}
HackerBlog
+
+ {/* Typewriter subtitle */}
+
+ >
+ {typedText}
+
+ _
+
+
Where developers share stories, insights, and code - no cap! 🔥
@@ -90,52 +246,64 @@ function Hero() {
{!userProfile ? (
handleRedirect("register")}
+ variants={glowVariants}
+ animate="animate"
+ transition={{
+ boxShadow: { duration: 2, repeat: Infinity, ease: "easeInOut" },
+ }}
+ className="font-mono w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-bold text-base sm:text-lg shadow-xl relative overflow-hidden group"
+ onClick={() => handleRedirect("register")}
>
- Get Started
+
+ Get Started
+
handleRedirect("login")}
+ className="font-mono w-full sm:w-auto px-8 sm:px-10 py-4 sm:py-5 bg-slate-800/50 backdrop-blur-sm border-2 border-purple-500/50 text-slate-200 rounded-lg font-bold text-base sm:text-lg hover:bg-slate-700/50 transition-all shadow-lg"
+ onClick={() => handleRedirect("login")}
>
Sign In
) : (
-
+
Welcome back, {userProfile.name || "Developer"}! Ready to drop
some fire content? 🚀
handleRedirect("dashboard")}
+ className="font-mono px-8 sm:px-10 py-4 sm:py-5 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-lg font-bold text-base sm:text-lg shadow-xl"
+ onClick={() => handleRedirect("dashboard")}
>
Go to Dashboard
)}
-
-
- ↓
-
+ {/* Scroll indicator */}
+
+
+
+ {/* Corner accents */}
+
+
);
}
diff --git a/src/components/ui/Terminal.jsx b/src/components/ui/Terminal.jsx
index b5382d5..a9758ec 100644
--- a/src/components/ui/Terminal.jsx
+++ b/src/components/ui/Terminal.jsx
@@ -209,3 +209,5 @@ function Terminal() {
}
export default Terminal;
+
+
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index 94cf32b..12de761 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -1,6 +1,6 @@
import Hero from "../components/ui/Hero";
import About from "../components/ui/About";
-import Terminal from "../components/ui/Terminal";
+import TerminalSection from "../components/ui/Terminal";
import Community from "../components/ui/Community";
import Footer from "../components/Footer";
@@ -13,7 +13,7 @@ const LandingPage = () => {
{/* about section */}
{/* hacktoberfest terminal section */}
-
+
{/* community section */}
{/* future footer component will be added here */}
@@ -21,5 +21,5 @@ const LandingPage = () => {