Merge pull request #208 from ctfguide-tech/dev

sync learn up

Author: Laphatize

public/darkLogocrop.png

@@ -15,7 +15,10 @@ export function Footer() {
               <NavLink href="../privacy-policy">Privacy Policy</NavLink>
               <NavLink href="https://status.ctfguide.com/">Status</NavLink>
               <NavLink href="../careers">Careers</NavLink>
+      
             </div>
+
+          
           </nav>
         </div>
         <div className="mx-auto flex max-w-4xl flex-col items-center border-t border-slate-400/10 py-10 sm:flex-row-reverse sm:justify-between">
@@ -74,7 +77,7 @@ export function Footer() {
             </Link>
           </div>
           <p className="mt-6 text-sm text-white sm:mt-0">
-            Copyright &copy; {new Date().getFullYear()} CTFGuide. All rights
+            Copyright &copy; {new Date().getFullYear()} CTFGuide Corporation. All rights
             reserved. <br></br>
           </p>
         </div>

public/site.png

@@ -92,9 +92,11 @@ export function Header() {
         <nav className="relative z-50 flex justify-between">
           <div className="flex items-center md:gap-x-12">
             <Link href="../" aria-label="Home">
-              <Logo className="h-10 w-auto" />
+              <Logo className="h-10 w-auto" /> 
             </Link>
+            
           </div>
+          
           <div className="flex items-center gap-x-5 md:gap-x-8">
             <div>
               <NavLink className="text-white" href="/login">

src/components/Footer.jsx

@@ -67,7 +67,7 @@ export default function GP() {
           <h2 className="text-base font-semibold leading-7 text-blue-600">CTFGuide Practice Range</h2>
           <p className="mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">Never run out of practice material.</p>
           <p className="mt-6 text-lg leading-8 text-white">
-            Access hundreds of challenges, writeups, and dynamic labs to help you improve your skills and prepare for competitions.
+            Access community uploaded challenges, writeups, and dynamic labs to help you improve your skills and prepare for competitions.
           </p>
         </div>
       </div>
@@ -78,7 +78,7 @@ className="mx-auto max-w-7xl px-6 lg:px-8">
             <img
               src="../site.png"
               alt="App screenshot"
-              className="animate__animated animate__backInUp mb-[-12%] rounded-xl shadow-2xl ring-1 ring-neutral-800 pt-4"
+              className="animate__animated animate__backInUp mb-[-12%] rounded-xl shadow-2xl ring-1 ring-neutral-800"
               width={2432}
 
               height={1442}

src/components/Header.jsx

@@ -1,11 +1,11 @@
-import { useState } from 'react'
-import { Dialog } from '@headlessui/react'
-import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
+import { useState, useEffect } from 'react'
+import { Dialog, Popover, Transition } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon, ChevronDownIcon, AcademicCapIcon, BuildingOfficeIcon } from '@heroicons/react/24/outline'
 import TextLoop from "react-text-loop";
 import Link from 'next/link'
 import { Logo } from '@/components/Logo'
 import Banner from '@/components/home/Banner';
-
+import request from '@/utils/request';
 
 const navigation = [
 
@@ -15,7 +15,29 @@ const navigation = [
 
 export function Hero() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [visibleCards, setVisibleCards] = useState(0)
+  const [activityFeed, setActivityFeed] = useState([])
+
+  useEffect(() => {
+    const fetchActivityFeed = async () => {
+  
+      // use mock data if api is down
+      setActivityFeed([
+        { userName: 'laphatize', challengeName: 'Excel-lently Hidden', profilePic: 'https://imagedelivery.net/1Dym4oPRvM_5USnDWCdSCw/7523c0cb-2330-443c-94f1-030cd8bde300/public' },
+        { userName: 'herronjo', challengeName: 'Trading Bananas' , profilePic: 'https://imagedelivery.net/1Dym4oPRvM_5USnDWCdSCw/1bd03d05-1057-48fc-3d3f-b3ed512cb500/public' },
+        { userName: 'thunderbird', challengeName: 'Sneaky Cat ' , profilePic: 'https://imagedelivery.net/1Dym4oPRvM_5USnDWCdSCw/3b312b5f-c90d-490d-80d0-e52b367d4400/public' },
+        { userName: 'stevestef', challengeName: 'Pretty Obvious', profilePic: 'https://imagedelivery.net/1Dym4oPRvM_5USnDWCdSCw/3e75c7a3-dfe9-47cc-0d46-736187e62400/public' },
+      ]);
+    };
+
+    fetchActivityFeed();
 
+    const timer = setInterval(() => {
+      setVisibleCards((prev) => (prev < activityFeed.length ? prev + 1 : prev))
+    }, 1000) // Adjust timing as needed
+
+    return () => clearInterval(timer)
+  }, [activityFeed.length])
 
     return (
       <div className="bg-neutral-900">
@@ -27,6 +49,59 @@ export function Hero() {
             <Link href="../" aria-label="Home">
               <Logo className="h-10 w-auto" />
             </Link>
+            
+            </div>
+            <div className="flex items-center gap-x-5 md:gap-x-8 hidden sm:flex">
+              <Popover className="relative">
+                {({ open }) => (
+                  <>
+                    <Popover.Button className="flex items-center gap-x-1 text-white focus:outline-none">
+                      Solutions
+                      <ChevronDownIcon className={`${open ? 'transform rotate-180' : ''} h-5 w-5 transition-transform duration-150 ease-in-out`} />
+                    </Popover.Button>
+                    <Transition
+                      enter="transition duration-100 ease-out"
+                      enterFrom="transform scale-95 opacity-0"
+                      enterTo="transform scale-100 opacity-100"
+                      leave="transition duration-75 ease-out"
+                      leaveFrom="transform scale-100 opacity-100"
+                      leaveTo="transform scale-95 opacity-0"
+                    >
+                      <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0">
+                        <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
+                          <div className="relative grid gap-6 bg-neutral-900 bg-blend-overlay px-5 py-6 sm:gap-8 sm:p-8">
+                            <Link href="/education" className="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-neutral-800">
+                              <div className="flex items-start">
+                                <AcademicCapIcon className="h-8 w-8 text-blue-500 mr-3 mt-1" />
+                                <div>
+                                  <p className="text-base font-medium text-white pb-1"><span className='font-semibold'>CTFGuide</span> Education</p>
+                                  <p className="text-sm text-white">A platform for learning and training cybersecurity skills in the classroom.</p>
+                                </div>
+                              </div>
+                            </Link>
+                            <div className="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-neutral-800">
+                              <div className="flex items-start">
+                                <BuildingOfficeIcon className="h-6 w-6 text-blue-500 mr-3 mt-1" />
+                                <div className="flex-grow">
+                                  <div className="text-base font-medium text-white flex justify-between items-center">
+                                    <span><span className='font-semibold'>CTFGuide</span> Enterprise</span>
+                                    <span className='text-xs text-white bg-blue-800 px-2 rounded-full'>Coming Soon</span>
+                                  </div>
+                                  <p className="text-sm text-white">Train your team to defend against real-world threats.</p>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </Popover.Panel>
+                    </Transition>
+                  </>
+                )}
+              </Popover>
+              <Link href="/careers" className="text-white">
+                 Company 
+              </Link>
+          
             </div>
             <div className="flex lg:hidden">
               <button
@@ -112,22 +187,31 @@ export function Hero() {
               }}
             />
           </div>
-          <div className="py-24 sm:py-32 lg:pb-40">
+          <div className="py-24 sm:py-24 lg:pb-40">
             <div className="mx-auto max-w-7xl px-6 lg:px-8">
-              <div className= "  animate__animated animate__fadeInUp mx-auto max-w-4xl text-center">
-                <h1 className="text-4xl font-bold tracking-normal text-white sm:text-6xl leading-relaxed ">
+              <div className= "  animate__animated animate__fadeInUp mx-auto max-w-6xl  text-left">
+              <div className='grid sm:grid-cols-6 grid-cols-1'>
+                <div className='col-span-4 '>
+                <h1 className="text-4xl font-normal tracking-normal text-white sm:text-4xl leading-relaxed ">
+             
+                <div className="mt-10 mb-2 text-3xl  text-white sm:text-2xl flex items-center justify-left">
+                <img className=" w-8 text-center ml-0 mr-2 " src="../../../../darkLogocrop.png" />
+   
+              <h1 className='text-3xl font-normal m'>        <span className="text-white font-semibold"> CTFGuide </span> 
+              </h1>
+                </div>
                   The platform that <span className="text-blue-600 leading-relaxed">
                     <TextLoop>
                       <span>grows</span>
                       <span>develops</span>
                       <span>trains</span>
                   </TextLoop>
-</span> <span className='mt-3'> cybersecurity talent.</span>
+</span> <br></br><span className='mt-3'> cybersecurity talent.</span>
                 </h1>
                 <p className="mt-6 text-lg leading-8 text-gray-300">
-                  A data-driven simulation platform that provides a realistic, hands-on experience for you to become a cybersecurity professional.
+                  The social learning platform for all things cybersecurity.
                 </p>
-                <div className="mt-10 flex items-center justify-center gap-x-6">
+                <div className="mt-10 flex items-center  gap-x-6">
                   <a
                     href="../register"
                     className="rounded-md   px-6 py-1.5 text-lg font-semibold text-white border border-white hover:bg-white hover:text-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400"
@@ -137,7 +221,32 @@ export function Hero() {
                   <p onClick={() => window.scrollTo(0, 1500)} className="cursor-pointer text-lg font-semibold leading-6 text-white">
                     Learn more <span aria-hidden="true">→</span>
                   </p>
+                  </div>
                 </div>
+
+                <div className='col-span-2 mt-10 hidden sm:block'>
+                  <div className="space-y-2">
+                  {activityFeed.slice(0, visibleCards).map((card, index) => (
+  <div
+    key={card.userName}
+    className='hover:bg-neutral-700 duration-300 bg-neutral-800 cursor-pointer p-4 rounded-lg flex items-center transform transition-all ease-in-out'
+    style={{
+      opacity: 0,
+      animation: `fadeInUp 0.5s ease-out ${index * 0.2}s forwards`,
+    }}
+  >
+    <img src={card.profilePic ? card.profilePic : `https://robohash.org/${card.userName}`} className='w-12 h-12 rounded-full mr-4' alt={card.userName} />
+    <div>
+      <p className='text-white font-bold'>{card.userName}</p>
+      <p className='text-gray-400 text-sm'>
+        solved <span className='text-yellow-400'>{card.challengeName}</span>
+      </p>
+    </div>
+  </div>
+))}
+                  </div>
+                </div>
+              </div>
               </div>
               <img
 
@@ -148,7 +257,7 @@ export function Hero() {
               autoPlay
               width={2432}
               height={1442}
-              className="animate__animated animate__fadeInUp mt-16 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
+              className="animate__animated animate__fadeInUp mt-16 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-28"
 
               >
                 <source src="../sample_vid.mp4" type="video/mp4" />
@@ -171,4 +280,4 @@ export function Hero() {
         </div>
       </div>
   );
-}
+}

src/components/home/GP.jsx

@@ -296,14 +296,14 @@ export function SecondaryFeatures() {
     <section
       id="secondary-features"
       aria-label="Features for simplifying everyday business tasks"
-      className="pb-14 pt-20 sm:pb-20 sm:pt-32 lg:pb-32"
+      className="pb-14 pt-20 sm:pb-20 sm:pt-32 lg:pb-32 "
     >
       <Container>
         <div className="mx-auto max-w-6xl md:text-center">
-        <h2 className="text-base font-semibold leading-7 text-blue-600">CTFGuide Education</h2>
+        <h2 className="text-base font-semibold leading-7 text-blue-600 hidden">CTFGuide for K-12 and Universities</h2>
 
           <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
-            We're the best platform for teaching cybersecurity.
+           An all-in-one platform for teaching cybersecurity.
           </h2>
 
         </div>

src/components/home/Hero.jsx

@@ -3,7 +3,8 @@ import ChallengeCard from '../profile/ChallengeCard';
 import { Fragment } from 'react';
 import { Listbox, Transition } from '@headlessui/react';
 import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
-
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFolderOpen } from '@fortawesome/free-solid-svg-icons';
 function getCategoryIcon(category) {
   switch (category.toLowerCase()) {
     case 'forensics':
@@ -290,39 +291,48 @@ export function Community({ challenges }) {
           </div>
         </div>
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6">
-          {challenges && (results.length > 0 ? results : challenges)
-            .filter((challenge) => {
-              if (
-                difficulty.toLowerCase() !== 'all' &&
-                challenge.difficulty.toLowerCase() !== difficulty.toLowerCase()
-              ) {
-                return false;
-              }
-              if (
-                filter !== '' &&
-                challenge.category.includes(filter.toLowerCase())
-              ) {
+          {results.length > 0 ? (
+            results
+              .filter((challenge) => {
+                if (
+                  difficulty.toLowerCase() !== 'all' &&
+                  challenge.difficulty.toLowerCase() !== difficulty.toLowerCase()
+                ) {
+                  return false;
+                }
+                if (
+                  filter !== '' &&
+                  challenge.category.includes(filter.toLowerCase())
+                ) {
+                  return true;
+                }
+                if (
+                  filter !== '' &&
+                  !(
+                    challenge.title
+                      .toLowerCase()
+                      .includes(filter.toLowerCase()) ||
+                    challenge.content
+                      .toLowerCase()
+                      .includes(filter.toLowerCase())
+                  )
+                ) {
+                  return false;
+                }
                 return true;
-              }
-              if (
-                filter !== '' &&
-                !(
-                  challenge.title
-                    .toLowerCase()
-                    .includes(filter.toLowerCase()) ||
-                  challenge.content
-                    .toLowerCase()
-                    .includes(filter.toLowerCase())
-                )
-              ) {
-                return false;
-              }
-              return true;
-            })
-            .map((challenge) => (
-              <ChallengeCard challenge={challenge} key={challenge.challengeId} />
-            ))
-          }
+              })
+              .map((challenge) => (
+                <ChallengeCard challenge={challenge} key={challenge.challengeId} />
+              ))
+          ) : (
+            // kinda hacky but it works
+            challenges.length != 0 && (
+              <div className="bg-neutral-800/50 p-4 py-10 rounded-md w-full col-span-4 text-center">
+                <FontAwesomeIcon icon={faFolderOpen} className="w-10 h-10 mx-auto mb-4 text-neutral-400" />
+                <p className="text-white">No challenges found with the current filters. Try changing the filters or search for a different challenge.</p>
+              </div>
+            )
+          )}
         </div>
       </div>
     </>

src/components/home/SecondaryFeatures.jsx

@@ -11,7 +11,7 @@ import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import Markdown from 'react-markdown';
+import { MarkdownViewer } from '@/components/MarkdownViewer';
 import { Context } from '@/context';
 import { useContext } from 'react';
 import { CheckIcon } from '@heroicons/react/20/solid';
@@ -691,7 +691,7 @@ export default function General() {
                     Bio Preview
                   </label>
                   <div className="mt-2 rounded-lg bg-neutral-800 p-4 text-white">
-                    <Markdown>{tempBio}</Markdown>
+                    <MarkdownViewer content={tempBio}></MarkdownViewer>
                   </div>
                 </div>
               )}

src/components/practice/community.jsx

@@ -25,5 +25,5 @@ export function middleware(req) {
 }
 
 export const config = {
-  matcher: ['/((?!_next/static|favicon.ico|login|careers|register|onboarding|forgot-password|userrs|privacy-policy|404|terms-of-service|learn|$).*)'],
+  matcher: ['/((?!_next/static|favicon.ico|login|careers|register|onboarding|forgot-password|education|userrs|privacy-policy|404|terms-of-service|learn|$).*)'],
 }