Merge branch 'main' into fix-daily-streak

nepalingo-web/src/components/ActivityCard.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import Button from "./Button";
+
+interface ActivityCardProps {
+  backgroundImageUrl: string;
+  quizYourselfText: string;
+  descriptionText: string;
+  buttonText: string;
+  onClick: () => void;
+}
+
+const ActivityCard: React.FC<ActivityCardProps> = ({
+  backgroundImageUrl,
+  quizYourselfText,
+  descriptionText,
+  buttonText,
+  onClick,
+}) => {
+  return (
+    <div className="relative daily-quiz-card text-white p-4 sm:p-6 md:p-8 rounded-lg flex flex-col justify-end h-[180px] sm:h-[200px] md:h-[220px] pb-5 overflow-hidden">
+      <img
+        src={backgroundImageUrl}
+        alt="Background"
+        className="absolute inset-0 w-full h-full object-cover"
+      />
+      <div className="absolute inset-0 bg-black/80" />
+      <div className="relative z-10 flex flex-col justify-between h-full">
+        <div className="flex-1 flex flex-col justify-end">
+          <p className="text-base sm:text-lg font-bold mb-1">
+            {quizYourselfText}
+          </p>
+          <p className="text-xs sm:text-sm opacity-80 mb-1">
+            {descriptionText}
+          </p>
+        </div>
+        <Button
+          className="h-auto bg-red-600 text-white font-bold py-1 px-3 sm:py-2 sm:px-5 md:py-3 md:px-6 rounded text-xs sm:text-sm md:text-base"
+          onClick={onClick}
+        >
+          {buttonText}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default ActivityCard;

nepalingo-web/src/pages/Home.tsx

@@ -1,10 +1,11 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import ReactGA from "react-ga4";
 import { useAuth } from "@/hooks/Auth";
 import Header from "@/components/header/Header";
 import GreetingCard from "@/components/GreetingCard";
-import DailyQuiz from "@/components/DailyQuiz";
-import ViewDictionary from "@/components/ViewDictionary";
+import ActivityCard from "@/components/ActivityCard";
+import { useLanguage } from "@/hooks/Langauge";
 import StreakDisplay from "@/components/header/StreakDisplay";
 
 const Home: React.FC = () => {
@@ -13,7 +14,9 @@ const Home: React.FC = () => {
     page: window.location.pathname,
     title: "home",
   });
+  const navigate = useNavigate();
   const { user } = useAuth();
+  const { selectedLanguage } = useLanguage();
 
   return (
     <div className="flex flex-col w-full h-screen bg-black text-white font-primary">
@@ -23,13 +26,28 @@ const Home: React.FC = () => {
           <GreetingCard name={user?.user_metadata?.username} />
           <StreakDisplay />
         </div>
-        <div className="flex flex-row justify-center items-center mt-10 space-x-4 h-full">
-          <div className="flex-1 h-full">
-            <DailyQuiz />
-          </div>
-          <div className="flex-1 h-full">
-            <ViewDictionary />
-          </div>
+        <div className="mb-5 pt-5">
+          <ActivityCard
+            backgroundImageUrl="/CardOverlay.jpg"
+            quizYourselfText="QUIZ YOURSELF"
+            descriptionText=" Taking Quiz is a better and fun way for learning"
+            buttonText="Start Quiz"
+            onClick={() => {
+              navigate("/flashcard");
+            }}
+          />
+        </div>
+
+        <div className="mb-5 pt-5">
+          <ActivityCard
+            backgroundImageUrl="/CardOverlay.jpg"
+            quizYourselfText="View Dictionary"
+            descriptionText={`Search for word meanings in our english to ${selectedLanguage} dicitonary!`}
+            buttonText="Go to Dictionary"
+            onClick={() => {
+              navigate("/dictionary");
+            }}
+          />
         </div>
       </div>
     </div>