Dev to Main

.env.development

@@ -1,6 +1,9 @@
 # Port on which the react app will run
 PORT=3000
 
+# Clarity
+NEXT_PUBLIC_CLARITY_ID="sm45wic0hf"
+
 # Base URL for the EVAPP API SERVER config
 NEXT_PUBLIC_EVAPP_SERVER_BASE_URL="https://staging.evapp.heedlabs.com/api"
 NEXT_PUBLIC_EVAPP_SEVER_REQUEST_TIMEOUT=10000

.env.production

@@ -1,6 +1,9 @@
 # Port on which the react app will run
 PORT=3000
 
+# Clarity
+NEXT_PUBLIC_CLARITY_ID="sm45wic0hf"
+
 # Base URL for the EVAPP API SERVER config
 NEXT_PUBLIC_EVAPP_SERVER_BASE_URL="https://staging.evapp.heedlabs.com/api"
 NEXT_PUBLIC_EVAPP_SEVER_REQUEST_TIMEOUT=10000

.github/workflows/nextjs.yml

@@ -32,45 +32,77 @@ jobs:
 
       - name: Debug - List workspace contents
         run: |
+          echo "=== Workspace Contents ==="
           ls -la ${{ github.workspace }}
-          echo "Looking for yarn.lock file..."
+          echo "=== Package Files Check ==="
           if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "yarn.lock file found"
+            echo "✅ yarn.lock file found"
           else
-            echo "yarn.lock file NOT found"
+            echo "❌ yarn.lock file NOT found"
           fi
+          if [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "✅ package.json file found"
+            echo "=== Package.json Contents ==="
+            cat package.json
+          else
+            echo "❌ package.json file NOT found"
+          fi
+
+      - name: Debug - Node and Yarn versions
+        run: |
+          echo "=== Node Version ==="
+          node --version
+          echo "=== Yarn Version ==="
+          yarn --version
+          echo "=== NPM Version ==="
+          npm --version
 
       - name: Detect package manager
         id: detect-package-manager
         run: |
+          echo "=== Package Manager Detection ==="
           if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "📦 Using Yarn as package manager"
             echo "manager=yarn" >> $GITHUB_OUTPUT
             echo "command=install" >> $GITHUB_OUTPUT
             echo "runner=yarn" >> $GITHUB_OUTPUT
             exit 0
           elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "📦 Using NPM as package manager"
             echo "manager=npm" >> $GITHUB_OUTPUT
             echo "command=ci" >> $GITHUB_OUTPUT
             echo "runner=npx --no-install" >> $GITHUB_OUTPUT
             exit 0
           else
-            echo "Unable to determine package manager"
+            echo "❌ Unable to determine package manager"
             exit 1
           fi
 
+      # Enable Corepack and install the correct Yarn version (3.5.0) BEFORE Node setup
+      - name: Enable Corepack and install Yarn
+        run: |
+          echo "=== Setting up Yarn ==="
+          corepack enable
+          corepack prepare [email protected] --activate
+          echo "✅ Yarn setup complete"
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: "20"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
+          cache: yarn
 
-      # Enable Corepack and install the correct Yarn version (3.5.0) as defined in package.json
-      - name: Enable Corepack and install Yarn
+      - name: Debug - Environment after Node setup
         run: |
-          corepack enable
-          corepack prepare [email protected] --activate
+          echo "=== Environment Variables ==="
+          env | sort
+          echo "=== Current Directory ==="
+          pwd
+          echo "=== Directory Contents ==="
+          ls -la
 
       - name: Setup Pages
+        if: github.actor != 'nektos/act'
         uses: actions/configure-pages@v5
         with:
           # Automatically inject basePath in your Next.js configuration file and disable
@@ -91,18 +123,43 @@ jobs:
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
 
       - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+        run: |
+          echo "=== Installing Dependencies ==="
+          if [ "${{ github.actor }}" = "nektos/act" ]; then
+            echo "Using --no-immutable flag for local testing"
+            yarn install --no-immutable
+          else
+            echo "Using --immutable flag for CI"
+            # First try with --immutable
+            if ! yarn install --immutable; then
+              echo "⚠️ Lockfile needs updates, updating dependencies..."
+              # If immutable fails, update dependencies and regenerate lockfile
+              yarn install --mode=update-lockfile
+              # Verify the installation
+              yarn install --immutable
+            fi
+          fi
+          echo "=== Dependencies Installation Complete ==="
+          echo "=== Node Modules Contents ==="
+          ls -la node_modules
 
       - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        run: |
+          echo "=== Starting Next.js Build ==="
+          ${{ steps.detect-package-manager.outputs.runner }} next build
+          echo "=== Build Complete ==="
+          echo "=== Build Output Contents ==="
+          ls -la out
 
       - name: Upload artifact
+        if: github.actor != 'nektos/act'
         uses: actions/upload-pages-artifact@v3
         with:
           path: ./out
 
   # Deployment job
   deploy:
+    if: github.actor != 'nektos/act'
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
@@ -111,4 +168,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

next.config.js

@@ -3,8 +3,8 @@ const nextConfig = {
 	output: "export",
 	trailingSlash: true, // GitHub Pages prefers this for routing
 	reactStrictMode: false,
-	basePath: "/makerchat.co-website", // Add basePath for GitHub Pages
-	assetPrefix: "/makerchat.co-website/", // Add assetPrefix for GitHub Pages
+	basePath: "", // Add basePath for custom domain
+	assetPrefix: "", //
 	images: {
 		unoptimized: true, // Required for `next export`
 		remotePatterns: [

package.json

@@ -47,6 +47,8 @@
 		"@radix-ui/react-separator": "^1.1.0",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@radix-ui/react-tooltip": "^1.1.3",
+		"@splinetool/react-spline": "^4.1.0",
+		"@splinetool/runtime": "^1.10.33",
 		"@types/leaflet": "^1.9.14",
 		"@types/node": "20.5.6",
 		"@types/react": "18.2.21",
@@ -74,6 +76,7 @@
 		"next-contentlayer": "^0.3.4",
 		"next-mdx-remote": "^5.0.0",
 		"ogl": "^1.0.11",
+		"powerglitch": "^2.4.0",
 		"react": "19.0.0-rc-69d4b800-20241021",
 		"react-dom": "19.0.0-rc-69d4b800-20241021",
 		"react-leaflet": "v5.0.0-rc.1",
@@ -82,6 +85,7 @@
 		"react-use-measure": "^2.1.7",
 		"rehype-raw": "^7.0.0",
 		"remark-gfm": "^4.0.0",
+		"sonner": "^2.0.6",
 		"tailwind-merge": "^2.5.4",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "5.1.6"

src/app/events/page.tsx

@@ -6,6 +6,8 @@ import Image from "next/image";
 import {placesData} from "@/db";
 import PlaceCard from "@/components/ui/location-card";
 import Images from "@/config/constants/Images";
+import BackgroundImages from "@/components/BackgroundImages";
+import CitiesSection from "@/components/ui/cities-section";
 
 export const metadata = {
 	title: "Cities – MakerChat",
@@ -27,7 +29,7 @@ export const metadata = {
 	keywords: [
 		"MakerChat cities",
 		"MakerChat Kochi",
-		"MakerChat Bangalore",
+		"MakerChat Bengaluru",
 		"maker events India",
 		"startup meetups",
 		"tech meetups India",
@@ -64,46 +66,16 @@ export const metadata = {
 
 export default function Events() {
 	return (
-		<section className="bg-grid-black/10 relative pb-32 pt-16 md:pt-10">
+		<section className="bg-grid-[#4b3f33]/5 relative bg-[#f5f5f7]">
 			{/* Background Mask */}
 
-			<div className="absolute inset-0 pointer-events-none bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,white)] z-0" />
+			<div className="absolute pointer-events-none inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,#fff9eb)] z-0"></div>
 
 			{/* Background Image */}
-			<div className="absolute top-0 left-0 flex justify-start items-center pointer-events-none z-0">
-				<Image
-					src={Images.elements.piSkelton.src}
-					width={600}
-					height={600}
-					alt="Raspberry Pi"
-					className="opacity-10 object-contain"
-				/>
+			<BackgroundImages />
+			<div className="mx-auto  relative z-10  py-20">
+				<CitiesSection />
 			</div>
-			<div className="absolute -bottom-36 -right-20 flex justify-start items-center pointer-events-none z-0">
-				<Image
-					src={Images.elements.arduinoSkelton.src}
-					width={500}
-					height={500}
-					alt="Arduino"
-					className="opacity-10 object-cover"
-				/>
-			</div>
-
-			<section className=" px-4 md:px-8 lg:px-16 z-50">
-				<h2 className="text-left md:text-center text-sm md:text-base text-gray-500 uppercase tracking-widest mb-2">
-					MakerChat across the Cities
-				</h2>
-				<p className="text-left md:text-center text-3xl md:text-4xl font-bold text-[#1d1d1f] mb-10 leading-snug">
-					Where MakerChat Comes to Life
-				</p>
-
-				<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4 max-w-7xl mx-auto">
-					{placesData.ids.map((placeId: string) => {
-						const place = placesData.details[placeId];
-						return <PlaceCard key={placeId} {...place} />;
-					})}
-				</div>
-			</section>
 		</section>
 	);
 }

src/app/layout.tsx

@@ -2,21 +2,57 @@
 // by default and can not be set to a Client Component.
 import React from "react";
 
+import {Toaster} from "sonner";
 import {Manrope, Instrument_Serif} from "next/font/google";
 const manrope = Manrope({subsets: ["latin"], variable: "--font-manrope"});
 import localFont from "next/font/local";
-
 import "./globals.css";
+import Script from "next/script";
+
 import TopNavBar from "@/components/ui/top-navbar";
 import {cn} from "@/lib/utils";
 import Footer from "@/components/ui/footer";
+import env from "@/config/env";
 
 const instrumentSerif = Instrument_Serif({
 	subsets: ["latin"],
 	weight: ["400"],
 	variable: "--font-instrument-serif",
 });
 
+const yultan = localFont({
+	src: [
+		{
+			path: "../../public/fonts/Barakallah-PERSONAL-USE ONLY.ttf",
+			weight: "400",
+			style: "normal",
+		},
+	],
+	variable: "--font-yultan",
+});
+
+const ocean = localFont({
+	src: [
+		{
+			path: "../../public/fonts/AMORIA.otf",
+			weight: "400",
+			style: "normal",
+		},
+	],
+	variable: "--font-ocean",
+});
+
+const cyber = localFont({
+	src: [
+		{
+			path: "../../public/fonts/Cyber City.otf",
+			weight: "300",
+			style: "normal",
+		},
+	],
+	variable: "--font-cyber",
+});
+
 const TiemposHeadline = localFont({
 	src: [
 		{
@@ -91,14 +127,35 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
 				manrope.variable,
 				instrumentSerif.variable,
 				TiemposHeadline.variable,
+				yultan.variable,
+				cyber.variable,
+				ocean.variable,
 			)}
 		>
-			<body className="flex flex-col min-h-screen bg-white antialiased font-manrope ">
-				<main className="flex-grow">
+			<head>
+				{/* Microsoft Clarity Tracking */}
+
+				<Script
+					id="clarity-script"
+					strategy="afterInteractive"
+					dangerouslySetInnerHTML={{
+						__html: `
+          (function(c,l,a,r,i,t,y){
+              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "${env.CLARITY_ID}");
+        `,
+					}}
+				/>
+			</head>
+			<body className="flex flex-col min-h-screen h-dvh bg-white antialiased font-manrope ">
+				<main className="">
 					<TopNavBar />
 					{children}
 				</main>
 				<Footer />
+				<Toaster position="top-center" />
 			</body>
 		</html>
 	);