Add SEO setup, polish UI components, and update hero/CTA sections

Add robots.txt and sitemap.xml for Google indexing, set metadataBase
in layout. Refine hero with floating logos, update bento cards with
Rollberry icon, improve feature grid sizing, and enhance CTA section
with gradient CSS variables and floating decorations.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: mokuwaki

next.config.ts

@@ -1,8 +1,10 @@
 import type { NextConfig } from "next";
 
+const isProd = process.env.NODE_ENV === "production";
+
 const nextConfig: NextConfig = {
   output: "export",
-  basePath: "/rollberry-docs",
+  basePath: isProd ? "/rollberry-docs" : "",
   images: { unoptimized: true },
   reactCompiler: true,
 };

public/favicon.svg

@@ -17,6 +17,7 @@ const jetbrainsMono = JetBrains_Mono({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL("https://co-r-e.github.io/rollberry-docs"),
   title: "Rollberry — Turn any web page into a smooth scroll video",
   description:
     "A zero-install CLI that captures full-page scrolling videos using a real browser. Open source, MIT licensed.",

src/app/layout.tsx

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next";
+
+export const dynamic = "force-static";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+    },
+    sitemap: "https://co-r-e.github.io/rollberry-docs/sitemap.xml",
+  };
+}

src/app/robots.ts

@@ -0,0 +1,14 @@
+import type { MetadataRoute } from "next";
+
+export const dynamic = "force-static";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: "https://co-r-e.github.io/rollberry-docs",
+      lastModified: new Date(),
+      changeFrequency: "weekly",
+      priority: 1,
+    },
+  ];
+}

src/app/sitemap.ts

@@ -0,0 +1,49 @@
+import { RollberryIcon } from "@/components/icons/RollberryIcon";
+
+type IconPosition = {
+  top: string;
+  left?: string;
+  right?: string;
+  size: number;
+  rotate: number;
+  opacity: number;
+};
+
+const defaultIcons: IconPosition[] = [
+  // Left side
+  { top: "8%", left: "-2%", size: 180, rotate: -15, opacity: 0.07 },
+  { top: "30%", left: "3%", size: 120, rotate: 20, opacity: 0.05 },
+  { top: "55%", left: "-4%", size: 200, rotate: -30, opacity: 0.06 },
+  { top: "78%", left: "5%", size: 100, rotate: 10, opacity: 0.04 },
+  { top: "15%", left: "8%", size: 80, rotate: 35, opacity: 0.05 },
+  // Right side
+  { top: "5%", right: "0%", size: 160, rotate: 25, opacity: 0.06 },
+  { top: "35%", right: "2%", size: 140, rotate: -20, opacity: 0.05 },
+  { top: "60%", right: "-3%", size: 190, rotate: 15, opacity: 0.07 },
+  { top: "82%", right: "4%", size: 110, rotate: -35, opacity: 0.04 },
+  { top: "48%", right: "8%", size: 90, rotate: 40, opacity: 0.05 },
+];
+
+export function FloatingLogos({ icons = defaultIcons }: { icons?: IconPosition[] }) {
+  return (
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
+      {icons.map((icon, i) => (
+        <div
+          key={i}
+          className="absolute text-white"
+          style={{
+            top: icon.top,
+            left: icon.left,
+            right: icon.right,
+            width: icon.size,
+            height: icon.size,
+            opacity: icon.opacity,
+            transform: `rotate(${icon.rotate}deg)`,
+          }}
+        >
+          <RollberryIcon className="h-full w-full" />
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/decorations/FloatingLogos.tsx

@@ -0,0 +1,19 @@
+export function RollberryIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 171 171"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M101.876 148.628C94.3212 150.401 86.8416 150.468 79.3606 150.588C73.4727 150.682 67.8164 151.956 62.3825 154.218C56.0849 156.84 52.2161 155.364 49.8148 148.99C47.1325 141.87 43.0635 135.664 38.096 130.003C29.9019 120.666 24.0365 110.174 21.9026 97.8058C17.3789 71.5849 29.8908 40.8236 58.7138 30.9666C60.9603 30.1983 62.0123 30.4536 63.1698 32.6197C66.4248 38.7109 71.7907 42.0266 78.5095 43.1359C80.3088 43.4329 80.9944 44.1092 81.0558 45.9727C81.1758 49.62 83.0967 52.5916 85.3318 55.2935C88.1559 58.7075 91.2411 61.9166 92.8837 66.6313C97.5906 62.909 103.242 62.0949 108.163 59.5935C110.652 58.3281 112.992 56.7855 114.537 54.3413C115.205 53.2837 116.015 53.0665 117.191 53.5115C123.708 55.9768 130.108 55.9527 136.318 52.4863C137.809 51.6536 138.371 52.9905 139.003 53.7964C144.191 60.4112 147.505 67.9111 149.401 76.0726C156.205 105.363 138.168 135.991 110.052 146.111C107.44 147.051 104.745 147.758 101.876 148.628ZM130.383 89.4894C130.295 90.0912 130.168 90.6902 130.125 91.2952C128.883 108.759 120.611 122.036 106.078 131.541C103.765 133.054 101.28 134.307 98.3584 135.974C119.011 131.938 134.952 115.412 138.001 95.2469C138.437 92.3652 139.22 89.4189 138.206 86.4714C137.558 84.5894 136.259 83.6144 134.254 83.7824C132.3 83.9461 131.048 85.0286 130.627 86.9589C130.48 87.6326 130.497 88.3421 130.383 89.4894ZM56.7667 54.0272C57.3841 53.4178 58.0977 52.8776 58.5979 52.1837C59.4742 50.968 60.2185 49.6288 59.3106 48.1031C58.4298 46.6228 56.9706 46.4188 55.4323 46.6097C53.7494 46.8185 52.3328 47.6729 50.9606 48.6082C39.9733 56.0973 33.975 70.9363 36.7588 84.5434C39.3845 71.5145 45.9376 61.5606 56.7667 54.0272ZM128.04 72.2957C128.199 72.9684 128.33 73.6497 128.523 74.3124C129.396 77.3021 131.26 78.6976 133.478 78.0463C135.884 77.3395 136.577 75.2094 135.43 72.0268C135.313 71.7012 135.172 71.3837 135.039 71.064C134.302 69.2996 132.964 68.093 131.078 68.2884C129.168 68.4864 128.06 69.8539 128.04 72.2957Z"
+        fill="currentColor"
+      />
+      <path
+        d="M107.021 30.4371C109.223 28.5915 111.691 28.179 114.248 28.1225C116.681 28.0688 119.122 28.1916 121.55 28.0589C123.637 27.9448 124.287 28.9201 124.373 30.8314C124.562 35.0297 124.639 34.9467 128.605 36.2123C133.525 37.782 138.45 37.9602 143.468 36.3105C143.149 41.5763 136.397 48.485 130.964 50.1625C125.553 51.8329 121.231 50.9642 112.639 46.4062C112.104 54.0014 106.398 56.1973 100.453 58.0264C98.5457 58.6131 96.7716 60.4175 94.9001 59.9154C93.0191 59.4108 92.5061 56.8741 91.1014 55.4607C90.429 54.7841 89.8546 54.0108 89.2263 53.2896C85.7242 49.2697 84.063 44.8629 86.7287 39.4183C78.9505 39.4224 71.8653 38.4663 67.4864 31.4104C64.5261 26.6401 63.8645 21.448 64.8876 15C69.8514 20.8643 76.234 22.4752 82.8097 24.1047C83.9778 21.8648 85.1923 19.5727 87.1202 17.7932C87.8358 17.1327 88.5504 16.3582 89.516 17.442C91.7553 19.9558 94.7938 21.3866 97.4636 23.3166C98.8879 24.3463 100.175 25.4993 101.027 27.0633C101.558 28.0372 101.718 29.0863 101.087 30.0374C100.509 30.9075 99.565 30.6207 98.6941 30.5496C97.5696 30.4578 96.4362 30.4343 95.3073 30.4448C93.93 30.4577 92.6327 30.8056 92.1399 32.2524C91.64 33.7201 92.565 34.7974 93.5884 35.6221C96.3608 37.856 99.5803 39.1143 103.101 39.5568C104.915 39.7849 106.763 39.8832 108.554 39.4505C109.724 39.1675 111.074 38.7545 111.254 37.3353C111.408 36.113 110.47 35.2845 109.505 34.6284C108.787 34.1397 108.04 33.6916 107.322 33.2018C106.276 32.4881 106.004 31.6262 107.021 30.4371Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

src/components/icons/RollberryIcon.tsx

@@ -16,7 +16,7 @@ export function Features() {
         </p>
       </div>
 
-      <div className="mt-12 grid grid-cols-1 gap-4 md:grid-cols-3 md:auto-rows-[140px]">
+      <div className="mt-12 grid grid-cols-1 gap-4 md:grid-cols-3 md:auto-rows-[minmax(180px,auto)]">
         {FEATURES.map((feature, i) => (
           <BentoCard
             key={feature.title}

src/components/sections/Features.tsx

@@ -3,6 +3,7 @@
 import { motion } from "motion/react";
 import { Button } from "@/components/ui/Button";
 import { GitHubIcon } from "@/components/icons/GitHubIcon";
+import { FloatingLogos } from "@/components/decorations/FloatingLogos";
 import { SITE } from "@/lib/constants";
 
 function MockCapture() {
@@ -180,59 +181,10 @@ function TrustBar() {
   );
 }
 
-function ScrollIndicator() {
-  return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ delay: 1.5 }}
-      className="absolute bottom-8 left-1/2 -translate-x-1/2"
-    >
-      <motion.div
-        animate={{ y: [0, 8, 0] }}
-        transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
-        className="flex flex-col items-center gap-2"
-      >
-        <span className="text-xs text-white/50">Scroll</span>
-        <svg
-          width="16"
-          height="24"
-          viewBox="0 0 16 24"
-          fill="none"
-          className="text-white/50"
-        >
-          <rect
-            x="1"
-            y="1"
-            width="14"
-            height="22"
-            rx="7"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <motion.rect
-            x="6.5"
-            y="5"
-            width="3"
-            height="6"
-            rx="1.5"
-            fill="currentColor"
-            animate={{ y: [5, 12, 5] }}
-            transition={{
-              duration: 1.5,
-              repeat: Infinity,
-              ease: "easeInOut",
-            }}
-          />
-        </svg>
-      </motion.div>
-    </motion.div>
-  );
-}
-
 export function Hero() {
   return (
     <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden px-6 pt-20 pb-24 bg-primary">
+      <FloatingLogos />
       <div className="relative z-10 flex flex-col items-center text-center">
         <motion.h1
           initial={{ opacity: 0, y: 20 }}
@@ -278,11 +230,9 @@ export function Hero() {
           </Button>
         </motion.div>
 
-        <TrustBar />
         <MockCapture />
+        <TrustBar />
       </div>
-
-      <ScrollIndicator />
     </section>
   );
 }

src/components/sections/Hero.tsx

@@ -4,8 +4,20 @@ import { motion, useInView } from "motion/react";
 import { useRef } from "react";
 import { Button } from "@/components/ui/Button";
 import { GitHubIcon } from "@/components/icons/GitHubIcon";
+import { FloatingLogos } from "@/components/decorations/FloatingLogos";
 import { SITE } from "@/lib/constants";
 
+const ctaIcons = [
+  // Left side
+  { top: "5%", left: "-3%", size: 150, rotate: -20, opacity: 0.07 },
+  { top: "45%", left: "2%", size: 110, rotate: 15, opacity: 0.05 },
+  { top: "75%", left: "-2%", size: 130, rotate: 30, opacity: 0.06 },
+  // Right side
+  { top: "10%", right: "1%", size: 140, rotate: 25, opacity: 0.06 },
+  { top: "55%", right: "-2%", size: 120, rotate: -15, opacity: 0.05 },
+  { top: "80%", right: "3%", size: 100, rotate: -30, opacity: 0.07 },
+];
+
 export function OpenSourceCTA() {
   const ref = useRef<HTMLElement>(null);
   const isInView = useInView(ref, { once: true, margin: "-100px" });
@@ -20,15 +32,17 @@ export function OpenSourceCTA() {
         className="absolute inset-0 -z-10"
         style={{
           background:
-            "linear-gradient(135deg, #C8102E 0%, #9B0D23 50%, #4A0511 100%)",
+            "linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, var(--primary-900) 100%)",
         }}
       />
 
+      <FloatingLogos icons={ctaIcons} />
+
       <motion.div
         initial={{ opacity: 0, y: 32 }}
         animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 32 }}
         transition={{ duration: 0.6 }}
-        className="mx-auto max-w-2xl text-center"
+        className="relative z-10 mx-auto max-w-2xl text-center"
       >
         <h2 className="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
           Built in the open