Merge pull request #100 from Gitstar-OC/probability

Probability

README.md

@@ -4,6 +4,7 @@
 
 - Mindect are docs for everyone who wants to learn about AI, ML, Supervised Learning and Advanced Learning ALgorithms.
 <!--
+- use media query for special navigation bar so that it only appears on pc and not on mobile or tablet
 - add backlins for pages to make the pages go on top with search engines named additioanl resourses, read more at etc.
 - add all the exports in the lib file
 - add cn in the components that you have made so it will take the styling

components/ui/Learn/Learn.jsx

@@ -1,40 +1,33 @@
 "use client";
-import { motion } from "framer-motion";
-import { AuroraBackground } from "@/components/ui/aurora-background";
-import Footer from "../footer"
+import Footer from "../footer";
 import MachineLearningSection from "./MachineLearning/MachineLearningSection";
-import MathematicsSection from "./Mathematics/MathematicsSection"
+import MathematicsSection from "./Mathematics/MathematicsSection";
 
 const Learn = () => {
-
   return (
     <>
-      <AuroraBackground className="justify-start">
-        <motion.div
-          initial={{ opacity: 0.0, y: 40 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          transition={{
-            delay: 0.2,
-            duration: 0.8,
-            ease: "easeInOut",
-          }}
-          className="relative flex flex-col gap-4 px-4 mt-10"
-        >
-          <header>
-            <div className="text-[30px] md:text-[40px] lg:text-[48px] text-black font-light dark:text-white text-center">
-              What would you like to learn today?
-            </div>
-            <div className="text-center text-[18px] md:text-[22px] lg:text-[26px] text-black dark:text-neutral-200 lg:mx-60">
-              I first thought about teaching literature and arts.
-              <br />
-              But the thing is those topics are kind of hard, so here are some
-              easy topics for you to start with!
-            </div>
-          </header>
-          <MachineLearningSection />
-          <MathematicsSection />
-        </motion.div>
-      </AuroraBackground>
+      <header className="relative mt-10 mb-10 xl:mt-28 xl:mb-20">
+        {/* Light theme background gradient circle */}
+        <div className="absolute inset-0 flex justify-center items-center">
+          <div className="w-[28rem] h-[28rem] bg-gradient-to-r bg-gradient-radial from-blue-300 via-purple-400 to-transparent dark:from-blue-800/80 dark:via-purple-900/80 rounded-full opacity-50 blur-3xl shadow-2xl "></div>
+        </div>
+        {/* Dark theme background gradient circle */}
+        <div className="absolute inset-0 flex justify-center items-center">
+          <div className="w-[28rem] h-[28rem] bg-gradient-radial from-blue-900 via-purple-800 to-transparent rounded-full opacity-30 blur-3xl shadow-2xl hidden dark:block"></div>
+        </div>
+        {/* Content */}
+        <div className="relative text-[28px] md:text-[34px] lg:text-[40px] text-black font-light dark:text-white text-center z-10">
+          What would you like to learn today?
+        </div>
+        <div className="relative text-center text-[16px] md:text-[20px] lg:text-[22px] text-black dark:text-neutral-200 lg:mx-60 z-10">
+          I first thought about teaching literature and arts.
+          <br />
+          But the thing is those topics are kind of hard, so here are some easy
+          topics for you to start with!
+        </div>
+      </header>
+      <MachineLearningSection />
+      <MathematicsSection />
       <Footer />
     </>
   );

components/ui/Learn/MachineLearning/MachineLearningSection.jsx

@@ -4,11 +4,11 @@ import UnsupervisedLearningCard from "./UnsupervisedLearningCard";
 
 const MachineLearningSection = () => {
   return (
-    <div className="lg:mx-8 bg-gray-50/50 dark:bg-zinc-950/60 rounded-xl flex flex-col mt-10 mb-10">
-      <div className="text-[26px] md:text-[36px] lg:text-[40px] text-black font-light dark:text-white text-center mt-6">
+    <div className="lg:mx-8 bg-gradient-radial bg-gradient-to-b from-purple-100 via-blue-200 bg-gradient-radial dark:from-purple-900/10 dark:via-blue-600/20   rounded-xl flex flex-col mt-10 mb-10" id="machine-learning">
+      <div className="text-[26px] md:text-[34px] lg:text-[38px] text-black font-light dark:text-white text-center mt-6">
         Machine Learning
       </div>
-      <div className="text-center text-balance text-[16px] md:text-[18px] lg:text-[20px] text-gray-800 dark:text-neutral-300 xl:mx-[23rem] mt-3">
+      <div className="text-center text-balance text-[16px] md:text-[18px] lg:text-[20px] text-gray-800 dark:text-neutral-300 xl:mx-[10rem] mt-3">
         Well, it's the second easiest thing next to calculus.
         Hope reading this you know and gain more insights about machines. Sorry,
         not sorry :)

components/ui/Learn/Mathematics/MathematicsSection.jsx

@@ -4,8 +4,8 @@ import ProbabilityCard from "./ProbabilityCard";
 
 const MathematicsSection = () => {
   return (
-    <div className="xl:mx-8 bg-gray-50/50 dark:bg-zinc-950/70 rounded-xl flex flex-col mt-10 mb-10">
-      <div className="text-[26px] md:text-[36px] lg:text-[40px] text-black font-light dark:text-white text-center mt-6">
+    <div className="xl:mx-8 bg-gradient-radial bg-gradient-to-b from-purple-100 via-purple-300 bg-gradient-radial dark:from-purple-900/10 dark:via-purple-600/20 rounded-xl flex flex-col mt-10 mb-10">
+      <div className="text-[26px] md:text-[34px] lg:text-[38px] text-black font-light dark:text-white text-center mt-6">
         Mathematics
       </div>
       <div className="text-center text-balance text-[16px] md:text-[18px] lg:text-[20px] text-gray-800 dark:text-neutral-300  mt-3">
@@ -25,3 +25,5 @@ const MathematicsSection = () => {
 
 export default MathematicsSection;
 
+// previous color bg-gradient-conic from-purple-200 via-pink-200 to-blue-200  bg-gradient-to-b dark:bg-gradient-to-b dark:bg-gradient-conic dark:from-purple-500/50 dark:via-pink-600/50 dark:to-blue-700/50
+

components/ui/base-card.jsx → components/ui/base-card.tsx

@@ -39,12 +39,13 @@ const BaseCard = ({
   buttonPath,
   isDisabled,
   extraSteps = [],
+  colors
 }) => {
   return (
     <>
-      {/* <div className="flex relative flex-col mx-auto py-8 px-4 rounded-xl items-center sm:mt-4 justify-center overflow-hidden border bg-background md:shadow-xl"> */}
-      <ShineBorder className="relative flex-col md:w-[80vw] sm:w-[80vw] xl:mt-0 rounded-3xl xl:w-[23rem] xl:h-[29rem] mx-auto  items-center sm:mt-4 justify-center overflow-hidden border bg-background md:shadow-xl" 
-       color={["#25AFAA", "#FE8FB5", "#4C054C"]}  > 
+      {/* <div className="flex relative flex-col mx-auto py-2 px-2 rounded-xl items-center sm:mt-4 justify-center overflow-hidden border bg-background md:shadow-xl"> */}
+      <ShineBorder className="relative flex-col md:w-[80vw] sm:w-[80vw] xl:mt-0 rounded-3xl xl:w-[22rem] xl:h-[29rem] mx-auto  items-center sm:mt-4 justify-center overflow-hidden border bg-background md:shadow-xl" 
+       color={[`${colors}`]}  > 
            {/* <span 
             className={cn(
               "text-xs font-medium  px-2.5 py-0.5 rounded-full relative",
@@ -87,8 +88,8 @@ const BaseCard = ({
               className={cn("relative p-[3px] mt-6 mb-6", buttonStyle)}
               disabled={isDisabled}
             >
-              <div className="absolute inset-0 bg-gradient-to-r from-[#25AFAA] to-[#4C054C] rounded-lg" />
-              <div className="flex items-center px-8 py-2 rounded-[6px] text-white relative group transition duration-200 ">
+              <div className="absolute inset-0 dark:border-white dark:border-[0.01px] border-white bg-gradient-to-r rounded-lg" />
+              <div className="flex items-center px-8 py-2 rounded-[6px] text-black dark:text-white relative group transition duration-200 ">
                 Start Learning
                 <ChevronRightIcon className="ml-2 transition-transform duration-300 group-hover:translate-x-1" />
               </div>

hooks/use-media-query.tsx

@@ -0,0 +1,20 @@
+
+import * as React from "react";
+
+export function useMediaQuery(query: string) {
+  const [value, setValue] = React.useState(false);
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches);
+    }
+
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+
+  return value;
+}