From f7afc9e51eaf9c10906ea8e837fd4d0105904ebe Mon Sep 17 00:00:00 2001 From: aysasharetasking Date: Sun, 14 Sep 2025 00:40:25 +0600 Subject: [PATCH] enhance JoinCommunity stats with continuous animations - Add sliding border animations and breathing effects - Implement gradient shifts and pulse animations - Update card designs with professional hover states --- app/index.css | 96 +++++++++++ app/page.js | 4 + components/home/FAQSection.jsx | 278 ++++++++++++++++++++++++++++++ components/home/HeroSection.jsx | 154 +++++++++++++++-- components/home/JoinCommunity.jsx | 183 ++++++++++++++++++-- 5 files changed, 682 insertions(+), 33 deletions(-) create mode 100644 components/home/FAQSection.jsx diff --git a/app/index.css b/app/index.css index 3b19d49..83a196d 100644 --- a/app/index.css +++ b/app/index.css @@ -3,3 +3,99 @@ /* body { background-color: #000000; } */ + +/* JoinCommunity Professional Card Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes borderGlow { + 0%, 100% { + opacity: 0.3; + filter: blur(0px); + } + 50% { + opacity: 0.6; + filter: blur(1px); + } +} + +@keyframes borderSlide { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + +@keyframes breathe { + 0%, 100% { + transform: scale(1); + opacity: 0.5; + } + 50% { + transform: scale(1.2); + opacity: 0.8; + } +} + +@keyframes countUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes expandWidth { + from { + width: 0; + opacity: 0; + } + to { + width: 3rem; + opacity: 1; + } +} + +/* HeroSection Professional Card Animations */ +@keyframes fadeInScale { + from { + opacity: 0; + transform: scale(0.9) translateY(20px); + } + to { + opacity: 1; + transform: scale(1) translateY(0); + } +} + +@keyframes progressFill { + from { + width: 0%; + } + to { + width: 85%; + } +} + +@keyframes shimmerBorder { + 0% { + background-position: -200% 0; + } + 100% { + background-position: 200% 0; + } +} + diff --git a/app/page.js b/app/page.js index a19ba73..902455b 100644 --- a/app/page.js +++ b/app/page.js @@ -1,6 +1,7 @@ import React from "react"; import HeroSection from "../components/home/HeroSection"; import QuestionSection from "../components/home/QuestionSection"; +import FAQSection from "../components/home/FAQSection"; import JoinCommunity from "../components/home/JoinCommunity"; const DevCrackPage = () => { @@ -12,6 +13,9 @@ const DevCrackPage = () => { {/* Questions by Technology */} + {/* FAQ Section */} + + {/* Join Our Community */} diff --git a/components/home/FAQSection.jsx b/components/home/FAQSection.jsx new file mode 100644 index 0000000..6f7c9af --- /dev/null +++ b/components/home/FAQSection.jsx @@ -0,0 +1,278 @@ +"use client"; +import React, { useState } from "react"; +import { + HiOutlineQuestionMarkCircle, + HiOutlinePlus, + HiOutlineMinus, + HiOutlineLightBulb, + HiOutlineAcademicCap, + HiOutlineChevronRight, +} from "react-icons/hi"; +import { BiCodeBlock, BiSupport, BiRocket } from "react-icons/bi"; +import { FiBook, FiTarget, FiUsers, FiTrendingUp } from "react-icons/fi"; + +const FAQSection = () => { + const [activeIndex, setActiveIndex] = useState(null); + const [activeCategory, setActiveCategory] = useState("general"); + + const categories = [ + { id: "general", name: "General", icon: , color: "from-blue-400 to-cyan-400" }, + { id: "learning", name: "Learning Path", icon: , color: "from-purple-400 to-pink-400" }, + { id: "technical", name: "Technical", icon: , color: "from-green-400 to-emerald-400" }, + { id: "community", name: "Community", icon: , color: "from-orange-400 to-red-400" }, + ]; + + const faqs = { + general: [ + { + question: "What makes Dev Crack different from other interview prep platforms?", + answer: "Dev Crack is 100% free, open-source, and community-driven. We focus on real interview questions from actual developer experiences, with detailed explanations and multiple solution approaches. Our content is constantly updated by active developers worldwide.", + icon: , + }, + { + question: "Is Dev Crack really free forever?", + answer: "Yes! Dev Crack is completely free and will always remain free. We believe in democratizing technical education and interview preparation. No hidden fees, no premium tiers - everything is accessible to everyone.", + icon: , + }, + { + question: "How often is the content updated?", + answer: "Our content is updated daily through community contributions. We review and merge pull requests regularly, ensuring you always have access to the latest interview trends and questions from the tech industry.", + icon: , + }, + ], + learning: [ + { + question: "What's the recommended learning path for beginners?", + answer: "Start with HTML/CSS fundamentals, then progress to JavaScript basics. Once comfortable, move to React for frontend or Node.js for backend. We recommend spending 2-3 weeks on each technology, practicing with our questions daily.", + icon: , + }, + { + question: "How should I use Dev Crack for interview preparation?", + answer: "Begin with basic questions in your chosen technology, then progress to intermediate and advanced levels. Practice explaining your solutions out loud, and try to solve each problem multiple ways. Aim for 5-10 questions daily for optimal retention.", + icon: , + }, + { + question: "Can I track my learning progress?", + answer: "Currently, we encourage self-tracking through note-taking. However, we're working on implementing a progress tracking feature that will help you monitor your learning journey and identify areas for improvement.", + icon: , + }, + ], + technical: [ + { + question: "What technologies are covered in Dev Crack?", + answer: "We cover HTML/CSS, JavaScript, React, Redux, Next.js, Node.js, Express.js, MongoDB, and Mongoose. Each technology has questions categorized into basic, intermediate, and advanced levels with comprehensive explanations.", + icon: , + }, + { + question: "Are code examples provided with answers?", + answer: "Yes! Every answer includes practical code examples with detailed explanations. We show multiple approaches when applicable, discuss time/space complexity, and highlight best practices and common pitfalls.", + icon: , + }, + { + question: "How technical are the advanced questions?", + answer: "Our advanced questions cover system design, performance optimization, security considerations, and complex problem-solving scenarios that you might encounter in senior developer interviews at top tech companies.", + icon: , + }, + ], + community: [ + { + question: "How can I contribute to Dev Crack?", + answer: "You can contribute by submitting new questions, improving existing answers, fixing bugs, or enhancing documentation. Simply fork our GitHub repository, make your changes, and submit a pull request. Check our CONTRIBUTING.md for guidelines.", + icon: , + }, + { + question: "Is there a community where I can discuss questions?", + answer: "Yes! Join our Discord server with 1000+ active members. You can discuss questions, share interview experiences, participate in mock interviews, and get help from experienced developers worldwide.", + icon: , + }, + { + question: "Can I request specific topics or questions?", + answer: "Absolutely! Open an issue on our GitHub repository or discuss it in our Discord community. We actively consider community requests and prioritize topics based on demand and relevance to current interview trends.", + icon: , + }, + ], + }; + + const toggleAccordion = (index) => { + setActiveIndex(activeIndex === index ? null : index); + }; + + return ( +
+ {/* Background Elements */} +
+ {/* Gradient Mesh */} +
+
+ + {/* Grid Pattern */} +
+
+ +
+ {/* Section Header */} +
+
+ + Frequently Asked +
+ +

+ Got Questions? +
+ + We've Got Answers + +

+ +

+ Everything you need to know about Dev Crack and your journey to interview success +

+
+ + {/* Category Tabs */} +
+ {categories.map((category) => ( + + ))} +
+ + {/* FAQ Accordion */} +
+ {faqs[activeCategory].map((faq, index) => ( +
+
+ {/* Glow Effect */} +
c.id === activeCategory)?.color + } rounded-2xl opacity-0 group-hover:opacity-10 blur-xl transition-opacity duration-500`}>
+ + {/* Accordion Item */} +
+ {/* Question Header */} + + + {/* Answer Content */} +
+
+ {/* Divider */} +
+ + {/* Answer Text */} +

+ {faq.answer} +

+ + {/* Action Link */} + +
+
+
+
+
+ ))} +
+ + {/* Bottom CTA */} +
+

Still have questions?

+ +
+
+
+ ); +}; + +export default FAQSection; \ No newline at end of file diff --git a/components/home/HeroSection.jsx b/components/home/HeroSection.jsx index 64a9a79..561a6c3 100644 --- a/components/home/HeroSection.jsx +++ b/components/home/HeroSection.jsx @@ -1,6 +1,23 @@ import Link from "next/link"; import GitStarButton from "../button/GitStarButton"; import StartLearning from "../button/StartLearning"; +import { + HiOutlineQuestionMarkCircle, + HiOutlineCode, + HiOutlineSparkles, + HiOutlineClock +} from "react-icons/hi"; +import { + BiCodeAlt, + BiRocket, + BiInfinite +} from "react-icons/bi"; +import { + FiTarget, + FiZap, + FiGift, + FiActivity +} from "react-icons/fi"; // stat card with value and label. @@ -9,21 +26,37 @@ const stats = [ id: 1, value: "500+", label: "Questions", + icon: , + gradient: "from-blue-400 to-cyan-400", + bgGradient: "from-blue-500/10 to-cyan-500/10", + description: "Curated from real interviews" }, { id: 2, value: "8", label: "Technologies", + icon: , + gradient: "from-purple-400 to-pink-400", + bgGradient: "from-purple-500/10 to-pink-500/10", + description: "Full-stack coverage" }, { id: 3, value: "100%", label: "Free", + icon: , + gradient: "from-green-400 to-emerald-400", + bgGradient: "from-green-500/10 to-emerald-500/10", + description: "Forever free & open-source" }, { id: 4, value: "24/7", label: "Available", + icon: , + gradient: "from-orange-400 to-red-400", + bgGradient: "from-orange-500/10 to-red-500/10", + description: "Learn at your own pace" }, ]; @@ -66,22 +99,115 @@ const HeroSection = () => { - {/* Statistics Grid */} -
- {stats.map(({ id, value, label }) => ( + {/* Statistics Grid - Professional Creative Design */} +
+ {stats.map((stat, index) => (
-

- {value} -

-

{label}

+ {/* Card Container with 3D Hover Effect */} +
+ + {/* Glow Effect Behind Card */} +
+ + {/* Main Card */} +
+ + {/* Premium Glass Overlay */} +
+ + {/* Animated Border Gradient */} +
+
+
+ + {/* Content Container */} +
+ + {/* Icon Section */} +
+ {/* Icon Box */} +
+
+
+ {stat.icon} +
+
+ + {/* Icon Animation Line */} +
+
+ + {/* Indicator Dot */} +
+
+
+
+
+
+ + {/* Value Section */} +
+

+ {stat.value} +

+ + {/* Progress Bar */} +
+
+
+
+ + {/* Label & Description */} +
+

+ {stat.label} +

+

+ {stat.description} +

+
+ + {/* Hover Arrow Indicator */} +
+ + + +
+ + {/* Corner Accent */} +
+
+
+
+
+
))}
diff --git a/components/home/JoinCommunity.jsx b/components/home/JoinCommunity.jsx index 43d0043..b355b9f 100644 --- a/components/home/JoinCommunity.jsx +++ b/components/home/JoinCommunity.jsx @@ -1,27 +1,172 @@ import Link from "next/link"; import Button from "../button/Button"; +import { FaUsers, FaCode, FaRocket, FaGithub } from "react-icons/fa"; +import { HiSparkles } from "react-icons/hi"; const JoinCommunity = () => { + const stats = [ + { icon: , value: "1K+", label: "Active Members" }, + { icon: , value: "50+", label: "Contributors" }, + { icon: , value: "24/7", label: "Support" }, + ]; + return ( -
-
-
-

- 🚀 Join Our{" "} - - Developer Community - -

-

- Be part of a growing tech community where we build, share, and grow - together.
- Whether you are fixing bugs, adding features, or improving docs — - your contribution drives us forward. -

-
- -