diff --git a/src/app/ai-builds/page.tsx b/src/app/ai-builds/page.tsx new file mode 100644 index 0000000..1d48ab7 --- /dev/null +++ b/src/app/ai-builds/page.tsx @@ -0,0 +1,11 @@ +import type { Metadata } from 'next'; +import AiBuildWall from '@/features/HomePage/components/AiBuildWall'; + +export const metadata: Metadata = { + title: 'AI-Assisted Build Wall', + description: 'A showcase of shipped AI-assisted websites and products from J StaR Films Studios, including the AI model stacks and creative attributions behind each build.', +}; + +export default function AiBuildsPage() { + return ; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c57ed7e..0e30d16 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -37,7 +37,19 @@ export default async function RootLayout({ }: { children: React.ReactNode; }) { - const { user } = await withAuth(); + let user = null; + + try { + const auth = await withAuth(); + user = auth.user; + } catch (error) { + if (typeof error === 'object' && error !== null && 'digest' in error && error.digest === 'DYNAMIC_SERVER_USAGE') { + throw error; + } + + console.warn('[WorkOS] Auth is unavailable; rendering public layout without a signed-in user.', error); + } + const authButton = user ? : ; return ( diff --git a/src/app/page.tsx b/src/app/page.tsx index a6e0d9c..5734716 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,6 +3,7 @@ import HeroSection from "@/features/HomePage/components/HeroSection"; import AboutSection from "@/features/HomePage/components/AboutSection"; import ServicesSection from "@/features/HomePage/components/ServicesSection"; import PortfolioSection from "@/features/HomePage/components/PortfolioSection"; +import AiBuildWall from "@/features/HomePage/components/AiBuildWall"; import ProcessSection from "@/features/HomePage/components/ProcessSection"; import PricingSection from "@/features/HomePage/components/PricingSection"; import TestimonialsSection from "@/features/HomePage/components/TestimonialsSection"; @@ -18,6 +19,7 @@ export default function HomePage() { + diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx index 24ca943..090f3f9 100644 --- a/src/app/portfolio/page.tsx +++ b/src/app/portfolio/page.tsx @@ -1,5 +1,6 @@ import PortfolioHero from "@/features/PortfolioPage/components/PortfolioHero"; +import AiBuildWall from "@/features/HomePage/components/AiBuildWall"; import PortfolioFilter from "@/features/PortfolioPage/components/PortfolioFilter"; import PortfolioGrid from "@/features/PortfolioPage/components/PortfolioGrid"; import PortfolioCta from "@/features/PortfolioPage/components/PortfolioCta"; @@ -8,6 +9,7 @@ export default function PortfolioPage() { return ( <> + diff --git a/src/components/auth/SignInButton.tsx b/src/components/auth/SignInButton.tsx index fdfeba8..c048dc8 100644 --- a/src/components/auth/SignInButton.tsx +++ b/src/components/auth/SignInButton.tsx @@ -9,7 +9,17 @@ export async function SignInButton() { // Encode current URL in state parameter const state = encodeURIComponent(currentUrl); - const signInUrl = await getSignInUrl({ state }); + let signInUrl = '/auth/callback'; + + try { + signInUrl = await getSignInUrl({ state }); + } catch (error) { + if (typeof error === 'object' && error !== null && 'digest' in error && error.digest === 'DYNAMIC_SERVER_USAGE') { + throw error; + } + + console.warn('[WorkOS] Sign-in URL unavailable; auth is not configured for this environment.', error); + } return ( {
  • Home
  • Services
  • Portfolio
    • +
  • AI Build Wall
  • About Us
  • Contact
    • diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index e74691c..6fa4de9 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -4,7 +4,7 @@ import { useState, useEffect, useCallback, useMemo } from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import { MenuIcon, CloseIcon, SunIcon, MoonIcon, UserIcon, VideoCameraIcon, FilmIcon, PenFancyIcon, GiftIcon, EnvelopeIcon } from '@/components/icons'; +import { MenuIcon, CloseIcon, SunIcon, MoonIcon, UserIcon, VideoCameraIcon, FilmIcon, CodeIcon, PenFancyIcon, GiftIcon, EnvelopeIcon } from '@/components/icons'; import { useSmartNavigation } from '@/hooks/useSmartNavigation'; import Tooltip from '@/components/ui/Tooltip'; @@ -73,6 +73,7 @@ const Header: React.FC = ({ authButton }) => { { href: '/about', label: 'About', icon: UserIcon }, { href: '/services', label: 'Services', icon: VideoCameraIcon }, { href: '/portfolio', label: 'Portfolio', icon: FilmIcon }, + { href: '/ai-builds', label: 'AI Builds', icon: CodeIcon }, { href: '/blog', label: 'Blog', icon: PenFancyIcon }, { href: '/store', label: 'Store', icon: GiftIcon }, { href: '/contact', label: 'Contact', icon: EnvelopeIcon } diff --git a/src/content/aiBuildWall.ts b/src/content/aiBuildWall.ts new file mode 100644 index 0000000..11a7d90 --- /dev/null +++ b/src/content/aiBuildWall.ts @@ -0,0 +1,76 @@ +export interface AiAssistedBuildProject { + name: string; + url: string; + description: string; + stack: string[]; + bannerAttribution: string; + logoAttribution?: string; + proofLine: string; + accent: string; +} + +export const aiAssistedBuildProjects: AiAssistedBuildProject[] = [ + { + name: 'J StaR Studios', + url: 'https://jstarstudios.com', + description: 'Flagship creative studio website for presenting John’s production, strategy, and technology work.', + stack: ['Gemini 3.0 Pro', 'Claude Opus 4.5'], + bannerAttribution: 'Banner by Gemini 3 Pro', + proofLine: 'Shows how AI can accelerate a premium studio presence without flattening the brand voice.', + accent: 'from-jstar-blue to-faith-purple', + }, + { + name: 'For Your Business', + url: 'https://fyb.jstarstudios.com', + description: 'Business-facing web experience built to translate creative capability into clearer client action.', + stack: ['Gemini 3.0 Pro', 'Claude 4.5'], + bannerAttribution: 'Pure SVG banner by Gemini 3.0 Pro', + logoAttribution: 'Logo by Nano Banana', + proofLine: 'Proves fast iteration can still produce custom SVG craft and polished conversion framing.', + accent: 'from-growth-green to-jstar-blue', + }, + { + name: 'KageOS', + url: 'https://kageos.jstarstudios.com', + description: 'A high-concept product site for an OS-style creative and technical experience.', + stack: ['Gemini 3.0 Pro', 'Kimi K2.5'], + bannerAttribution: 'Banner by Claude Opus 4.6 SVG and Nano Banana Pro', + proofLine: 'Shows multi-model art direction: one stack for structure, another for cinematic visual language.', + accent: 'from-faith-purple to-red-500', + }, + { + name: 'KOE Voice', + url: 'https://www.koevoice.xyz', + description: 'Voice-oriented product website with a character-led identity and advanced AI-assisted build process.', + stack: ['GPT 5.3 Codex', 'GPT 5.4', 'Gemini 3.1 Pro', 'Claude Opus 4.6', 'GPT 5.5'], + bannerAttribution: 'Banner by GPT 5.5 High', + logoAttribution: 'Logo uses a real character', + proofLine: 'Demonstrates orchestration across frontier coding, copy, and visual-direction models.', + accent: 'from-cyan-400 to-faith-purple', + }, + { + name: 'Melo School', + url: 'https://meloschool.com', + description: 'Education-focused website for music learning with a friendly product and enrollment feel.', + stack: ['GPT 5.4', 'Gemini 3.1 Flash', 'GPT 5.5 Low'], + bannerAttribution: 'Banner by GPT 5.5 High and GPT Image 2', + proofLine: 'Shows a lighter AI stack can ship a warm, accessible education brand quickly.', + accent: 'from-amber-400 to-growth-green', + }, + { + name: 'Olive Vine Dental', + url: 'https://www.olivevinedental.com/', + description: 'Dental practice website with clear service positioning and search-friendly content support.', + stack: ['Gemini 3.5 Flash'], + bannerAttribution: 'Banner not done yet', + logoAttribution: 'SEO support by GPT 5.5', + proofLine: 'Proves a constrained, practical model stack can still move a real client site forward.', + accent: 'from-emerald-400 to-jstar-blue', + }, +]; + +export const aiBuildWallStats = [ + { label: 'Live projects', value: '6' }, + { label: 'AI stacks documented', value: '6' }, + { label: 'Fake metrics', value: '0' }, +]; diff --git a/src/features/HomePage/components/AiBuildWall.tsx b/src/features/HomePage/components/AiBuildWall.tsx new file mode 100644 index 0000000..288c511 --- /dev/null +++ b/src/features/HomePage/components/AiBuildWall.tsx @@ -0,0 +1,114 @@ +import Link from 'next/link'; +import { aiAssistedBuildProjects, aiBuildWallStats } from '@/content/aiBuildWall'; + +interface AiBuildWallProps { + compact?: boolean; +} + +const AiBuildWall = ({ compact = false }: AiBuildWallProps) => { + const visibleProjects = compact ? aiAssistedBuildProjects.slice(0, 3) : aiAssistedBuildProjects; + + return ( +
    +
    +
    + +
    +
    +
    + + AI-Assisted Build Wall + +

    + AI-accelerated websites/products shipped fast — with the stack in plain sight. +

    +

    + A public ledger of shipped sites where AI was used as a production partner: strategy, + code, SVG direction, image generation, SEO, and polish. Client-friendly on the surface; + builder-detail underneath. +

    +
    + +
    + {aiBuildWallStats.map((stat) => ( +
    +
    {stat.value}
    +
    {stat.label}
    +
    + ))} +
    +
    + +
    + {visibleProjects.map((project) => ( +
    +
    +
    +
    +

    Live build

    +

    {project.name}

    +
    + + Visit ↗ + +
    + +

    {project.description}

    + +
    +

    AI stack used

    +
    + {project.stack.map((model) => ( + + {model} + + ))} +
    +
    + +
    +

    Banner: {project.bannerAttribution}

    + {project.logoAttribution && ( +

    Logo/detail: {project.logoAttribution}

    + )} +
    + +
    +

    + What this proves: {project.proofLine} +

    +
    +
    + ))} +
    + + {compact && ( +
    + + View the full AI build wall + → + +
    + )} +
    +
    + ); +}; + +export default AiBuildWall;