Launched full Ghost v2 build

X-Lovable-Edit-ID: edt-2ea27ca8-0809-4d7a-95b7-eb03fabcbc3a

Author: lovable-dev[bot]

public/favicon.svg

@@ -0,0 +1,11 @@
+User-agent: *
+Allow: /
+Disallow: /labs/
+Disallow: /academy/
+Disallow: /internships/
+Disallow: /courses/
+Disallow: /verify/
+Disallow: /blog/
+Disallow: /careers/
+Disallow: /events/
+Disallow: /community/

public/robots.txt

@@ -0,0 +1,57 @@
+import { cn } from "@/lib/utils";
+
+interface LogoProps {
+  className?: string;
+  iconOnly?: boolean;
+  size?: number;
+}
+
+/**
+ * GhostCode Dynamics brand mark.
+ * SVG-based, easy to replace with a PNG later.
+ */
+export function Logo({ className, iconOnly = false, size = 28 }: LogoProps) {
+  return (
+    <div className={cn("flex items-center gap-2.5", className)}>
+      <GhostIcon size={size} />
+      {!iconOnly && (
+        <span className="font-display text-[1.05rem] tracking-tight leading-none">
+          <span className="font-bold text-foreground">Ghost</span>
+          <span className="font-medium text-muted-foreground">Code Dynamics</span>
+        </span>
+      )}
+    </div>
+  );
+}
+
+export function GhostIcon({ size = 28, className }: { size?: number; className?: string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn("shrink-0", className)}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id="ghost-grad" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0%" stopColor="oklch(0.78 0.18 285)" />
+          <stop offset="100%" stopColor="oklch(0.62 0.2 245)" />
+        </linearGradient>
+        <radialGradient id="ghost-glow" cx="0.5" cy="0.4" r="0.6">
+          <stop offset="0%" stopColor="oklch(0.85 0.18 285 / 0.4)" />
+          <stop offset="100%" stopColor="oklch(0.5 0.2 285 / 0)" />
+        </radialGradient>
+      </defs>
+      <circle cx="16" cy="16" r="14" fill="url(#ghost-glow)" />
+      <path
+        d="M16 4.5c-5 0-8.5 3.6-8.5 8.5v12.2c0 1 1.1 1.6 1.9 1l1.6-1.2c.4-.3 1-.3 1.4 0l1.6 1.2c.4.3 1 .3 1.4 0l1.6-1.2c.4-.3 1-.3 1.4 0l1.6 1.2c.8.6 1.9 0 1.9-1V13c0-4.9-3.5-8.5-8.4-8.5Z"
+        fill="url(#ghost-grad)"
+      />
+      <circle cx="12.5" cy="14" r="1.4" fill="oklch(0.15 0.02 270)" />
+      <circle cx="19.5" cy="14" r="1.4" fill="oklch(0.15 0.02 270)" />
+    </svg>
+  );
+}

src/assets/aurora-bg.jpg

@@ -0,0 +1,67 @@
+import { Link } from "@tanstack/react-router";
+import { ArrowLeft } from "lucide-react";
+import { Reveal } from "./section";
+
+interface ComingSoonProps {
+  module: string;
+  title: string;
+  description: string;
+  bullets?: string[];
+}
+
+/**
+ * Shared "Coming soon" page used by future modules
+ * (Internships, Courses, Cert Verify, Blog, Careers, Events, Community, Academy, Labs).
+ * These routes are intentionally hidden from the main navigation but
+ * scaffolded so future expansion is just a content swap.
+ */
+export function ComingSoon({ module, title, description, bullets }: ComingSoonProps) {
+  return (
+    <section className="relative min-h-[80vh] overflow-hidden pt-32 pb-24">
+      <div className="absolute inset-0 bg-aurora opacity-60 pointer-events-none" aria-hidden />
+      <div className="absolute inset-0 bg-grid pointer-events-none" aria-hidden />
+      <div className="container-prose relative">
+        <Reveal>
+          <p className="font-mono text-[10px] uppercase tracking-[0.3em] text-primary">
+            {module} · In the lab
+          </p>
+          <h1 className="mt-4 font-display text-4xl font-semibold leading-[1.05] tracking-tight sm:text-5xl md:text-6xl">
+            <span className="text-gradient">{title}</span>
+          </h1>
+          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+
+          {bullets && (
+            <ul className="mt-8 grid gap-3 sm:grid-cols-2 max-w-2xl">
+              {bullets.map((b) => (
+                <li
+                  key={b}
+                  className="flex items-start gap-3 rounded-xl border border-border bg-card/60 backdrop-blur p-4 text-sm text-muted-foreground"
+                >
+                  <span className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-primary animate-pulse-glow" />
+                  {b}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <div className="mt-10 flex flex-wrap gap-3">
+            <Link
+              to="/contact"
+              className="inline-flex items-center gap-1.5 rounded-full bg-foreground px-5 py-2.5 text-sm font-medium text-background shadow-elevated hover:opacity-90 transition"
+            >
+              Get notified at launch
+            </Link>
+            <Link
+              to="/"
+              className="inline-flex items-center gap-1.5 rounded-full border border-border bg-surface/60 px-5 py-2.5 text-sm font-medium text-foreground hover:border-primary/40 transition"
+            >
+              <ArrowLeft className="h-4 w-4" /> Back home
+            </Link>
+          </div>
+        </Reveal>
+      </div>
+    </section>
+  );
+}

src/assets/founder.jpg

@@ -0,0 +1,61 @@
+import { Link } from "@tanstack/react-router";
+import { ArrowUpRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+type Variant = "primary" | "secondary" | "ghost";
+
+const variants: Record<Variant, string> = {
+  primary:
+    "bg-foreground text-background hover:opacity-90 shadow-elevated",
+  secondary:
+    "border border-border bg-surface/60 backdrop-blur text-foreground hover:bg-surface hover:border-primary/40",
+  ghost:
+    "text-foreground hover:text-primary",
+};
+
+interface BaseProps {
+  children: ReactNode;
+  variant?: Variant;
+  className?: string;
+  icon?: boolean;
+}
+
+export function CtaLink({
+  to,
+  href,
+  external,
+  children,
+  variant = "primary",
+  className,
+  icon = true,
+}: BaseProps & { to?: string; href?: string; external?: boolean }) {
+  const classes = cn(
+    "group inline-flex items-center gap-1.5 rounded-full px-5 py-2.5 text-sm font-medium transition-all",
+    variants[variant],
+    className,
+  );
+
+  const content = (
+    <>
+      {children}
+      {icon && (
+        <ArrowUpRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
+      )}
+    </>
+  );
+
+  if (external || href) {
+    return (
+      <a href={href} target={external ? "_blank" : undefined} rel={external ? "noopener noreferrer" : undefined} className={classes}>
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <Link to={to ?? "/"} className={classes}>
+      {content}
+    </Link>
+  );
+}

src/assets/hero-orb.jpg

@@ -0,0 +1,115 @@
+import { motion, type Variants } from "framer-motion";
+import { cn } from "@/lib/utils";
+import type { ReactNode } from "react";
+
+export const fadeUp: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.55, ease: [0.22, 1, 0.36, 1] } },
+};
+
+export const stagger: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } },
+};
+
+export function Reveal({
+  children,
+  className,
+  delay = 0,
+  as: As = "div",
+}: {
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+  as?: React.ElementType;
+}) {
+  const MotionTag = motion(As as any);
+  return (
+    <MotionTag
+      initial="hidden"
+      whileInView="show"
+      viewport={{ once: true, margin: "-80px" }}
+      variants={fadeUp}
+      transition={{ delay }}
+      className={className}
+    >
+      {children}
+    </MotionTag>
+  );
+}
+
+export function SectionHeader({
+  eyebrow,
+  title,
+  description,
+  className,
+  align = "left",
+}: {
+  eyebrow?: string;
+  title: ReactNode;
+  description?: ReactNode;
+  className?: string;
+  align?: "left" | "center";
+}) {
+  return (
+    <Reveal className={cn(align === "center" && "text-center mx-auto max-w-2xl", className)}>
+      {eyebrow && (
+        <div
+          className={cn(
+            "inline-flex items-center gap-2 rounded-full border border-border bg-surface/60 px-3 py-1 text-xs font-medium text-muted-foreground",
+            align === "center" && "mx-auto",
+          )}
+        >
+          <span className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse-glow" />
+          {eyebrow}
+        </div>
+      )}
+      <h2 className="mt-5 font-display text-3xl font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl">
+        {title}
+      </h2>
+      {description && (
+        <p className="mt-4 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
+          {description}
+        </p>
+      )}
+    </Reveal>
+  );
+}
+
+export function PageHero({
+  eyebrow,
+  title,
+  description,
+  children,
+}: {
+  eyebrow?: string;
+  title: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+}) {
+  return (
+    <section className="relative overflow-hidden pt-32 pb-16 md:pt-40 md:pb-24">
+      <div className="absolute inset-0 bg-aurora opacity-70 pointer-events-none" aria-hidden />
+      <div className="absolute inset-0 bg-grid pointer-events-none" aria-hidden />
+      <div className="container-prose relative">
+        <Reveal>
+          {eyebrow && (
+            <div className="inline-flex items-center gap-2 rounded-full border border-border glass px-3 py-1 text-xs font-medium text-muted-foreground">
+              <span className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse-glow" />
+              {eyebrow}
+            </div>
+          )}
+          <h1 className="mt-5 font-display text-4xl font-semibold leading-[1.05] tracking-tight text-foreground sm:text-5xl md:text-6xl lg:text-7xl">
+            <span className="text-gradient">{title}</span>
+          </h1>
+          {description && (
+            <p className="mt-6 max-w-2xl text-lg leading-relaxed text-muted-foreground">
+              {description}
+            </p>
+          )}
+          {children && <div className="mt-8">{children}</div>}
+        </Reveal>
+      </div>
+    </section>
+  );
+}