flyer addition

Author: TestingMasterDotIn

src/components/TestingMasterFlyer.tsx

@@ -0,0 +1,68 @@
+import { useState, useEffect } from "react";
+import { X, ExternalLink, Globe } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+interface TestingMasterFlyerProps {
+  onClose: () => void;
+}
+
+const TestingMasterFlyer = ({ onClose }: TestingMasterFlyerProps) => {
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <Card className="w-full max-w-md mx-auto relative animate-in fade-in-0 zoom-in-95 duration-300">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute right-2 top-2 h-8 w-8"
+          onClick={onClose}
+        >
+          <X className="h-4 w-4" />
+        </Button>
+        
+        <CardContent className="p-6 pt-12 text-center">
+          <div className="mb-4">
+            <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary to-primary-glow rounded-full flex items-center justify-center">
+              <Globe className="h-8 w-8 text-white" />
+            </div>
+            <h3 className="text-xl font-bold mb-2">
+              Welcome to Awesome-Playwright
+            </h3>
+            <p className="text-muted-foreground text-sm mb-4">
+              This awesome Playwright resource collection is part of the larger TestingMaster.in ecosystem. 
+              Discover more testing tools, frameworks, and learning paths!
+            </p>
+          </div>
+          
+          <div className="space-y-3">
+            <Button 
+              className="w-full bg-primary hover:bg-primary/90"
+              onClick={() => {
+                window.open("https://testingmaster.in", "_blank");
+                onClose();
+              }}
+            >
+              <Globe className="h-4 w-4 mr-2" />
+              Visit TestingMaster.in
+              <ExternalLink className="h-3 w-3 ml-2" />
+            </Button>
+            
+            <Button 
+              variant="outline" 
+              className="w-full"
+              onClick={onClose}
+            >
+              Continue Exploring
+            </Button>
+          </div>
+          
+          <p className="text-xs text-muted-foreground mt-4">
+            Built with ❤️ for the testing community
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default TestingMasterFlyer;

src/data/resources.ts

@@ -19,7 +19,8 @@ export const categories = [
   "Premium Courses",
   "Integrations",
   "Reporters",
-  "Playwright Official"
+  "Playwright Official",
+  "AI/MCP"
 ];
 
 export const playwrightResources: Resource[] = [
@@ -265,7 +266,7 @@ export const playwrightResources: Resource[] = [
     title: "cucumber-playwright",
     description: "A starter repo for writing E2E tests based on Cucumber with Playwright using TypeScript",
     url: "https://github.com/Tallyb/cucumber-playwright",
-    category: "Integrations",
+    category: "Sample Frameworks",
     tags: ["integrations", "cucumber", "bdd"],
     isGithub: true,
   },
@@ -740,14 +741,59 @@ export const playwrightResources: Resource[] = [
   },
   {
     id: "84",
+    title: "Playwright MCP",
+    description: "Playwright MCP (Model-based Conformance Protocol) is a framework for building and running model-based tests with Playwright",
+    url: "https://github.com/microsoft/playwright-mcp",
+    category: "AI/MCP",
+    tags: ["AI", "MCP", "Playwright"],
+    isGithub: true,
+  },
+  {
+    id: "85",
     title: "PW Framework Step By Step",
     description: "A step-by-step guide to building a Playwright framework with best practices",
     url: "https://github.com/idavidov13/PW-Framework-Step-By-Step",
     category: "Sample Frameworks",
     tags: ["Sample Frameworks", "Playwright", "Community"],
     isGithub: true,
-  }
+  },
 
-  
+    {
+    id: "86",
+    title: "MCP Playwright By Execute Automation",
+    description: "A framework for building and running model-based tests with Playwright",
+    url: "https://github.com/executeautomation/mcp-playwright",
+    category: "AI/MCP",
+    tags: ["AI", "MCP", "Playwright"],
+    isGithub: true,
+  },
+  {
+    id: "87",
+    title: "Scrapy Playwright",
+    description: "A Scrapy plugin that integrates Playwright for web scraping",
+    url: "https://github.com/scrapy-plugins/scrapy-playwright",
+    category: "Sample Frameworks",
+    tags: ["Sample Frameworks", "Scrapy", "Web Scraping"],
+    isGithub: true,
+  },
+  {
+    id: "88",
+    title: "Playwright Microsoft Teams Reporter",
+    description: "A Playwright reporter that sends test results to Microsoft Teams",
+    url: "https://github.com/playwright-community/playwright-msteams-reporter",
+    category: "Reporters",
+    tags: ["Reporters", "Playwright", "Microsoft Teams"],
+    isGithub: true,
+  },
+  {
+    //https://github.com/vitalets/playwright-bdd
+    id: "89",
+    title: "Playwright BDD",
+    description: "BDD testing with Playwright runner and CucumberJS integration",
+    url: "https://github.com/vitalets/playwright-bdd",
+    category: "Integrations",
+    tags: ["Integrations", "Playwright", "BDD"],
+    isGithub: true,
+  }
 ];
 

src/pages/Index.tsx

@@ -1,19 +1,34 @@
-import { useState, useMemo, useRef } from "react";
+import { useState, useMemo, useRef, useEffect } from "react";
 import Hero from "@/components/Hero";
 import ResourceCard from "@/components/ResourceCard";
 import SearchFilters from "@/components/SearchFilters";
+import TestingMasterFlyer from "@/components/TestingMasterFlyer";
 import { playwrightResources, categories } from "@/data/resources";
 import { shuffleArray } from "@/lib/shuffle";
 import {  Globe, ExternalLink} from 'lucide-react';
 
 const Index = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedCategory, setSelectedCategory] = useState("All");
+  const [showFlyer, setShowFlyer] = useState(false);
   const resourcesRef = useRef<HTMLElement>(null);
 
   // Shuffle resources once when component mounts
   const shuffledResources = useMemo(() => shuffleArray(playwrightResources), []);
 
+  // Show flyer after 10 seconds
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowFlyer(true);
+    }, 10000); // 10 seconds
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleCloseFlyer = () => {
+    setShowFlyer(false);
+  };
+
   const scrollToResources = () => {
     resourcesRef.current?.scrollIntoView({ 
       behavior: 'smooth',
@@ -121,6 +136,9 @@ const Index = () => {
           </div>
         </div>
       </footer>
+      
+      {/* TestingMaster Flyer */}
+      {showFlyer && <TestingMasterFlyer onClose={handleCloseFlyer} />}
     </div>
   );
 };