feat: add developer week page

components/About/about.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unescaped-entities */
-import React from 'react';
+import React, { JSX } from 'react';
 import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
 import Button from '../Buttons/button';

components/Agenda/agenda.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
 import { Agenda as AgendaType, ExtendedCity } from '../../types/types';

components/Buttons/button.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 type ButtonType = 'button' | 'submit' | 'reset' | undefined;
 
 interface IButton {
@@ -18,7 +20,7 @@ function Button({
   type,
   disabled,
   test,
-}: IButton): JSX.Element {
+}: IButton): React.JSX.Element {
   return (
     <button
       disabled={disabled}

components/Dropdown/dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, SetStateAction } from 'react';
+import React, { useState, useRef, useEffect, SetStateAction, JSX } from 'react';
 import { City } from '../../types/types';
 
 interface IDropdown {

components/Footer/footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import Image from 'next/image';
 import ILink from '../illustration/link';
 import { Social } from '../../types/types';

components/Form/Cfp/stepOne.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unescaped-entities */
-import React from 'react';
+import React, { JSX } from 'react';
 import Button from '../../Buttons/button';
 import { CfpStepProps } from '../../../types/types';
 

components/Form/Cfp/stepThree.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unescaped-entities */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, JSX } from 'react';
 import Select from '../../Select/select';
 import Button from '../../Buttons/button';
 import { CfpStepProps, SelectOptions } from '../../../types/types';

components/Form/Cfp/stepTwo.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unescaped-entities */
-import React from 'react';
+import React, { JSX } from 'react';
 import Button from '../../Buttons/button';
 import { CfpStepProps } from '../../../types/types';
 

components/Form/paper.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, FormEvent } from 'react';
+import React, { useState, useEffect, useRef, FormEvent, JSX } from 'react';
 import Confetti from 'react-confetti';
 import StepOne from './Cfp/stepOne';
 import StepTwo from './Cfp/stepTwo';

components/Form/subscription.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import Button from '../Buttons/button';
 
 function Subscription(): JSX.Element {

components/Header/header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
 import Button from '../Buttons/button';

components/Navbar/navDrop.tsx

@@ -1,4 +1,10 @@
-import React, { useState, forwardRef, Dispatch, SetStateAction } from 'react';
+import React, {
+  useState,
+  forwardRef,
+  Dispatch,
+  SetStateAction,
+  JSX,
+} from 'react';
 import links from '../../config/links.json';
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';

components/Navbar/navbar.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback, JSX } from 'react';
 import links from '../../config/links.json';
 import NavDrop from './navDrop';
 import Hamburger from '../illustration/hamburger';

components/PastEditionCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import ILink from '../illustration/link';
 
 interface PastEditonCardProp {

components/Popup/popup.tsx

@@ -0,0 +1,130 @@
+/* eslint-disable @next/next/no-img-element */
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Heading from '../Typography/heading';
+import Paragraph from '../Typography/paragraph';
+import Button from '../Buttons/button';
+import Link from 'next/link';
+
+function Popup() {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+    }
+  }, [isOpen]);
+
+  const handleClose = () => {
+    setIsVisible(false);
+    setTimeout(() => {
+      setIsOpen(false);
+    }, 350);
+  };
+
+  return (
+    <>
+      {isOpen &&
+        createPortal(
+          <div
+            data-testid="popup-container"
+            className={`fixed inset-0 bg-black flex items-center justify-center transition-opacity duration-300 z-[100] ${
+              isVisible ? 'bg-opacity-90 ' : 'bg-opacity-0'
+            }`}
+            onClick={handleClose}
+          >
+            <div
+              className={`w-[650px] h-[750px] sm:w-[400px] sm:h-[700px] card p-6 transition-all duration-300 ease-out transform fixed top-[150px]${
+                isVisible
+                  ? 'translate-y-0 opacity-100 scale-100'
+                  : 'translate-y-8 opacity-0 scale-95'
+              }`}
+              style={{
+                top: '150px',
+                left: '50%',
+                transform: `translateX(-50%) ${isVisible ? 'translateY(0) scale(1)' : 'translateY(2rem) scale(0.95)'}`,
+                zIndex: 51,
+                borderRadius: '30px',
+              }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="flex items-center justify-between gap-2 mb-8">
+                <div className="bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
+                  <img
+                    src="/img/logos/2025-logo.png"
+                    alt="conference logo"
+                    className="w-[150px]"
+                  />
+                </div>
+                <button
+                  data-test="close-button"
+                  className="p-2 hover:bg-gray-400 cursor-pointer w-10 h-10 flex items-center justify-center rounded-full transition-colors duration-200"
+                  onClick={handleClose}
+                >
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 18 18"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M1 1L17 17"
+                      stroke="#E9EAEA"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                    <path
+                      d="M17 1L0.999999 17"
+                      stroke="#E9EAEA"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </button>
+              </div>
+              <div className="my-10 flex justify-center">
+                <Image
+                  src="/img/rocket.gif"
+                  alt="rocket"
+                  width={0}
+                  height={0}
+                  className="w-[230px] h-[230px] sm:w-[150px] sm:h-[150px]"
+                />
+              </div>
+              <div className="flex flex-col items-center text-center space-y-6">
+                <h1 className="text-[32px] sm:text-[25px] font-bold text-white">
+                  AsyncAPI Is Headed to
+                  <br />
+                  DeveloperWeek <span className="text-[#B31942]">U</span>
+                  <span>S</span>
+                  <span className="text-[#0A3161]">A</span> 2026!
+                </h1>
+                <Paragraph typeStyle="body-md">
+                  For the first time ever, we&apos;re bringing the AsyncAPI
+                  community to
+                  <br />
+                  DeveloperWeek USA in San Jose, CA
+                </Paragraph>
+
+                <Paragraph typeStyle="body-md" className="text-white font-bold">
+                  Be a part of the journey as we build the future of
+                  event-driven APIs!
+                </Paragraph>
+                <Link href="/venue/California">
+                  <Button type="button" className="w-[200px]">
+                    See What&apos;s Next
+                  </Button>
+                </Link>
+              </div>
+            </div>
+          </div>,
+          document.body
+        )}
+    </>
+  );
+}
+
+export default Popup;

components/Select/select.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, JSX } from 'react';
 import Select, { MultiValue, StylesConfig } from 'react-select';
 import { SelectOptions } from '../../types/types';
 
@@ -60,7 +60,7 @@ function SelectDropdown({
         className={`${dataTest || ''}`}
         styles={customStyles}
         defaultValue={selectedOption}
-        onChange={(option) => setSelectedOption(option as any)}
+        onChange={(option: any) => setSelectedOption(option as any)}
         options={options}
         isMulti={multi}
       />

components/Slider/slider.tsx

@@ -1,5 +1,5 @@
 import Slider from 'react-slick';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, JSX } from 'react';
 import { useMediaQuery } from 'react-responsive';
 
 interface ISlider {

components/Speaker/speaker.tsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React from 'react';
+import React, { JSX } from 'react';
 import { Speaker as SpeakerTypes } from '../../types/types';
 
 interface ISpeaker {
@@ -9,11 +9,11 @@ interface ISpeaker {
 }
 
 function Speaker({ details, location, className }: ISpeaker): JSX.Element {
-
-  function getName(names: string[]){
+  function getName(names: string[]) {
     return `${names[0]} ${names[1]}`;
   }
-  const shortenedName = details.name.length > 20 ? getName(details.name.split(' ')) : details.name;
+  const shortenedName =
+    details.name.length > 20 ? getName(details.name.split(' ')) : details.name;
 
   return (
     <div

components/Tickets/tickets.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { JSX, useState } from 'react';
 import Button from '../Buttons/button';
 import Arrows from '../illustration/arrows';
 import TicketIcon from '../illustration/ticket';

components/Typography/heading.tsx

@@ -1,3 +1,5 @@
+import { JSX } from 'react';
+
 type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 type TypeStyle =

components/Typography/paragraph.tsx

@@ -1,3 +1,5 @@
+import { JSX } from 'react';
+
 type TypeStyle = 'body-lg' | 'body-md' | 'body-sm';
 
 interface IParagraph {

components/announcement.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import Link from 'next/link';
 
 function Announcement(): JSX.Element {

components/illustration/activityLoader.tsx

@@ -1,3 +1,4 @@
+import { JSX } from 'react';
 import { SVGTypes } from '../../types/types';
 
 /**

components/illustration/arrow.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { SVGTypes } from '../../types/types';
 
 /**

components/illustration/arrows.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { SVGTypes } from '../../types/types';
 
 interface IArrows extends SVGTypes {

components/illustration/cancel.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { SVGTypes } from '../../types/types';
 
 /**

components/illustration/dropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { SVGTypes } from '../../types/types';
 
 /**

components/illustration/link.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { SVGTypes } from '../../types/types';
 
 /**

components/illustration/plus.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { SVGTypes } from '../../types/types';
 
 /**

components/illustration/ticket.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { SVGTypes } from '../../types/types';
 
 /**

config/city-lists.json

@@ -152,5 +152,27 @@
     "cfp": "https://apidays.typeform.com/to/ILJeAaV8?typeform-source=www.apidays.global#event_name=xxxxx",
     "recordings": null,
     "playlist": null
+  },
+  {
+    "name": "California",
+    "country": "USA",
+    "date": "18-20, Feburary 2026",
+    "cfpDate": "7 November, 2025",
+    "description": "Join the AsyncAPI Summit as an integral part of DeveloperWeek 2026.",
+    "img": "/img/locations/san-jose.webp",
+    "address": "150 W San Carlos St, San Jose, CA 95113",
+    "mapUrl": "https://maps.app.goo.gl/29C6zbBjzNMuxUi4A",
+    "sponsors": {
+      "eventSponsors": [
+        {
+          "image": "/img/logos/developerweek-logo.webp",
+          "websiteUrl": "https://www.developerweek.com/"
+        }
+      ]
+    },
+    "freeEntry": true,
+    "cfp": "https://confengine.com/conferences/asyncapi-summit-at-developerweek2026",
+    "recordings": null,
+    "playlist": null
   }
 ]

config/tickets.json

@@ -90,5 +90,16 @@
     "available": 100,
     "eventDate": "2025-12-09T00:00:00.000Z",
     "benefits": ["AsyncAPI Track", "All talks", "Networking"]
+  },
+  {
+    "id": 8,
+    "type": "California, USA",
+    "price": 0,
+    "url": null,
+    "description": "Access to all conference talks and workshops",
+    "status": "Not Yet Available",
+    "available": 100,
+    "eventDate": "2026-02-18T00:00:00.000Z",
+    "benefits": ["AsyncAPI Track", "All talks", "Networking", "Lunch included"]
   }
 ]