Merge pull request #133 from Ajay-Dhangar/dev-2

merge codes
ajay-dhangar · Apr 4, 2024 · f3d6a4d · f3d6a4d
2 parents 39bd989 + f652cc8
commit f3d6a4d
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 141 deletions.
diff --git a/src/components/HomePage/Courses/courses.module.css b/src/components/HomePage/Courses/courses.module.css
diff --git a/src/components/HomePage/Courses/index.tsx b/src/components/HomePage/Courses/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import styles from "./courses.module.css";
+import styles from "../home.module.css";
 
 type Course = {
   title: string;

diff --git a/src/components/HomePage/Features/features.module.css b/src/components/HomePage/Features/features.module.css
diff --git a/src/components/HomePage/Features/index.tsx b/src/components/HomePage/Features/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from "./features.module.css";
+import styles from "../home.module.css";
 
 type Feature = {
   icon: string; 

diff --git a/src/components/HomePage/Hero/index.tsx b/src/components/HomePage/Hero/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import styles from "./hero.module.css";
+import styles from "../home.module.css";
+import Link from "@docusaurus/Link";
 
 interface HeroProps {
   title: string;
@@ -15,14 +16,14 @@ const Hero: React.FC<HeroProps> = ({ title, description, imageUrl }) => {
         <p className={styles.hero_description}>{description}</p>
         <div className={styles.buttons_container}>
           <button className={styles.animated_button}>
-            <a className={styles.source_link} href="/docs/">
+            <Link className={styles.source_link} to="/docs/">
               Getting Started
-            </a>
+            </Link>
           </button>
           <button className={styles.animated_button}>
-            <a className={styles.source_link} href="/courses/">
+            <Link className={styles.source_link} to="/courses/">
               Courses
-            </a>
+            </Link>
           </button>
         </div>
       </div>

diff --git a/src/components/HomePage/Hero/hero.module.css → src/components/HomePage/home.module.css b/src/components/HomePage/Hero/hero.module.css → src/components/HomePage/home.module.css
@@ -5,7 +5,7 @@
   padding: 20px 10px;
 }
 
-.hero_container::after {
+.hero_container::after, .course_cards::after, .feature_container::after {
   border-bottom: 1px solid #666;
   content: "";
   width: 100%;
@@ -27,18 +27,6 @@
   }
 }
 
-@keyframes GradientAnimation {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
-
 .hero_content {
   flex: 1;
   text-align: start;
@@ -69,8 +57,8 @@
   border-radius: 50px;
   cursor: pointer;
   color: #f2f2f2;
-  background-color: #23a6d5;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  background-color: #23a5d5;
+  box-shadow: 0 0 5px 0 #ccc;
   transition: background 0.3s ease, transform 0.2s ease;
 }
 
@@ -108,3 +96,56 @@
   background-size: 400% 400%;
   animation: GradientAnimation 15s ease infinite;
 }
+.feature_container, .course_cards {
+  margin: 20px 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 5px;
+  align-items: center;
+  justify-content: center;
+}
+
+.feature_item, .course_card {
+  padding: 3px;
+  text-align: start;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  box-shadow: 0 0 5px 0 #ccc;
+  width: 300px;
+  height: 320px;
+}
+
+.feature_item img, .course_card img {
+  width: 100%;
+  height: 150px;
+  border-radius: 5px;
+  border-bottom: 1px solid #ccc;
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  background-size: 400% 400%;
+  animation: GradientAnimation 15s ease infinite;
+}
+
+.feature_item h3, .course_card h3 {
+  padding: 0 10px;
+  font-size: 1.5rem;
+  margin-top: 10px;
+}
+
+.feature_item p, .course_card p{
+  padding: 0 10px;
+  font-size: 1rem;
+  margin-top: 5px;
+}
+
+@keyframes GradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}