Brain-PACER page WIP.

Author: AlbertClo

app/Http/Controllers/CambridgeBrainPacerController.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class CambridgeBrainPacerController extends Controller
+{
+    public function home(Request $request): Response
+    {
+        return Inertia::render('CambridgeBrainPacer/CambridgeBrainPacer');
+    }
+}

public/assets/images/brain1.png

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <h2 class="text-3xl font-bold text-violet-400 mb-3 mt-12 tracking-tight">
+        <slot />
+    </h2>
+</template>

resources/js/Pages/CambridgeBrainPacer/CambridgeBrainPacer.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <h2 class="text-xl font-bold text-slate-500 mb-3">
+        <slot />
+    </h2>
+</template>

resources/js/Pages/CambridgeBrainPacer/Heading2.vue

@@ -0,0 +1,55 @@
+<template>
+    <div
+        class="hidden lg:block absolute left-1/2 h-[1026px] w-[1026px] -translate-x-1/3 stroke-gray-300/70 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0">
+        <svg viewBox="0 0 1026 1026" fill="none" aria-hidden="true"
+             class="absolute inset-0 h-full w-full animate-spin-slow animate-rotate">
+            <path d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
+                  stroke="#D4D4D4" stroke-opacity="0.7"></path>
+            <path d="M513 1025C230.23 1025 1 795.77 1 513" stroke="url(#:S1:-gradient-1)"
+                  stroke-linecap="round"></path>
+            <defs>
+                <linearGradient id=":S1:-gradient-1" x1="1" y1="513" x2="1" y2="1025"
+                                gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#8b5cf6"></stop>
+                    <stop offset="1" stop-color="#8b5cf6" stop-opacity="0"></stop>
+                </linearGradient>
+            </defs>
+        </svg>
+        <svg viewBox="0 0 1026 1026" fill="none" aria-hidden="true"
+             class="absolute inset-0 h-full w-full animate-spin-reverse-slower animate-rotate-reverse">
+            <path
+                d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
+                stroke="#D4D4D4" stroke-opacity="0.7"></path>
+            <path d="M913 513c0 220.914-179.086 400-400 400" stroke="url(#:S1:-gradient-2)"
+                  stroke-linecap="round"></path>
+            <defs>
+                <linearGradient id=":S1:-gradient-2" x1="913" y1="513" x2="913" y2="913"
+                                gradientUnits="userSpaceOnUse">
+                    <stop stop-color="#8b5cf6"></stop>
+                    <stop offset="1" stop-color="#8b5cf6" stop-opacity="0"></stop>
+                </linearGradient>
+            </defs>
+        </svg>
+    </div>
+</template>
+
+<style scoped>
+@keyframes pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.05); opacity: 0.8; }
+}
+
+@keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.animate-rotate {
+    animation: rotate 5s linear infinite;
+}
+
+.animate-rotate-reverse {
+    animation: rotate 3s linear infinite reverse;
+}
+
+</style>

resources/js/Pages/CambridgeBrainPacer/Heading3.vue

@@ -1,10 +1,13 @@
 <?php
 
+use App\Http\Controllers\CambridgeBrainPacerController;
 use App\Http\Controllers\ProfileController;
 use Illuminate\Foundation\Application;
 use Illuminate\Support\Facades\Route;
 use Inertia\Inertia;
 
+Route::get('/cambridge/brain-pacer', [CambridgeBrainPacerController::class, 'home'])->name('profile.edit');
+
 Route::get('/', function () {
     return Inertia::render('Welcome', [
         'canLogin' => Route::has('login'),