diff --git a/examples/winter-sale/app/favicon.ico b/examples/winter-sale/app/favicon.ico
index 4b98a2b..a5f43c6 100644
Binary files a/examples/winter-sale/app/favicon.ico and b/examples/winter-sale/app/favicon.ico differ
diff --git a/examples/winter-sale/components/color-picker.tsx b/examples/winter-sale/components/color-picker.tsx
deleted file mode 100644
index 7d41255..0000000
--- a/examples/winter-sale/components/color-picker.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-
-import clsx from 'clsx';
-import { useState } from 'react';
-import { RadioGroup } from '@headlessui/react';
-import { product } from '@/app/data';
-
-export function ColorPicker() {
-  const [selectedColor, setSelectedColor] = useState(product.colors[0]);
-
-  return (
-    <div>
-      <h2 className="text-sm font-medium text-gray-900">Color</h2>
-
-      <RadioGroup
-        value={selectedColor}
-        onChange={setSelectedColor}
-        className="mt-2"
-      >
-        <RadioGroup.Label className="sr-only">Choose a color</RadioGroup.Label>
-        <div className="flex items-center space-x-3">
-          {product.colors.map((color) => (
-            <RadioGroup.Option
-              key={color.name}
-              value={color}
-              className={({ active, checked }) =>
-                clsx(
-                  color.selectedColor,
-                  active && checked ? 'ring ring-offset-1' : '',
-                  !active && checked ? 'ring-2' : '',
-                  'relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none',
-                )
-              }
-            >
-              <RadioGroup.Label as="span" className="sr-only">
-                {color.name}
-              </RadioGroup.Label>
-              <span
-                aria-hidden="true"
-                className={clsx(
-                  color.bgColor,
-                  'h-8 w-8 rounded-full border border-black border-opacity-10',
-                )}
-              />
-            </RadioGroup.Option>
-          ))}
-        </div>
-      </RadioGroup>
-    </div>
-  );
-}
diff --git a/examples/winter-sale/components/eu-flag.tsx b/examples/winter-sale/components/eu-flag.tsx
deleted file mode 100644
index 76d1b8f..0000000
--- a/examples/winter-sale/components/eu-flag.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-export function EuFlag({ className }: { className: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      viewBox="0 0 640 480"
-      className={className}
-    >
-      <defs>
-        <g id="eu-d">
-          <g id="eu-b">
-            <path id="eu-a" d="m0-1-.3 1 .5.1z" />
-            <use xlinkHref="#eu-a" transform="scale(-1 1)" />
-          </g>
-          <g id="eu-c">
-            <use xlinkHref="#eu-b" transform="rotate(72)" />
-            <use xlinkHref="#eu-b" transform="rotate(144)" />
-          </g>
-          <use xlinkHref="#eu-c" transform="scale(-1 1)" />
-        </g>
-      </defs>
-      <path fill="#039" d="M0 0h640v480H0z" />
-      <g fill="#fc0" transform="translate(320 242.3)scale(23.7037)">
-        <use xlinkHref="#eu-d" width="100%" height="100%" y={-6} />
-        <use xlinkHref="#eu-d" width="100%" height="100%" y={6} />
-        <g id="eu-e">
-          <use xlinkHref="#eu-d" width="100%" height="100%" x={-6} />
-          <use
-            xlinkHref="#eu-d"
-            width="100%"
-            height="100%"
-            transform="rotate(-144 -2.3 -2.1)"
-          />
-          <use
-            xlinkHref="#eu-d"
-            width="100%"
-            height="100%"
-            transform="rotate(144 -2.1 -2.3)"
-          />
-          <use
-            xlinkHref="#eu-d"
-            width="100%"
-            height="100%"
-            transform="rotate(72 -4.7 -2)"
-          />
-          <use
-            xlinkHref="#eu-d"
-            width="100%"
-            height="100%"
-            transform="rotate(72 -5 .5)"
-          />
-        </g>
-        <use
-          xlinkHref="#eu-e"
-          width="100%"
-          height="100%"
-          transform="scale(-1 1)"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/examples/winter-sale/components/footer.tsx b/examples/winter-sale/components/footer.tsx
deleted file mode 100644
index af89fa8..0000000
--- a/examples/winter-sale/components/footer.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import { ShoppingBagIcon } from '@heroicons/react/24/outline';
-import { footerNavigation } from '@/app/data';
-
-export function Footer() {
-  return (
-    <footer aria-labelledby="footer-heading">
-      <h2 id="footer-heading" className="sr-only">
-        Footer
-      </h2>
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="border-t border-gray-200 py-20">
-          <div className="grid grid-cols-1 md:grid-flow-col md:auto-rows-min md:grid-cols-12 md:gap-x-8 md:gap-y-16">
-            {/* Image section */}
-            <div className="col-span-1 md:col-span-2 lg:col-start-1 lg:row-start-1">
-              <ShoppingBagIcon className="h-8 w-auto" />
-            </div>
-
-            {/* Sitemap sections */}
-            <div className="col-span-6 mt-10 grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8 md:col-start-3 md:row-start-1 md:mt-0 lg:col-span-6 lg:col-start-2">
-              <div className="grid grid-cols-1 gap-y-12 sm:col-span-2 sm:grid-cols-2 sm:gap-x-8">
-                <div>
-                  <h3 className="text-sm font-medium text-gray-900">
-                    Products
-                  </h3>
-                  <ul role="list" className="mt-6 space-y-6">
-                    {footerNavigation.products.map((item) => (
-                      <li key={item.name} className="text-sm">
-                        <a
-                          href={item.href}
-                          className="text-gray-500 hover:text-gray-600"
-                        >
-                          {item.name}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-                <div>
-                  <h3 className="text-sm font-medium text-gray-900">Company</h3>
-                  <ul role="list" className="mt-6 space-y-6">
-                    {footerNavigation.company.map((item) => (
-                      <li key={item.name} className="text-sm">
-                        <a
-                          href={item.href}
-                          className="text-gray-500 hover:text-gray-600"
-                        >
-                          {item.name}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              </div>
-              <div>
-                <h3 className="text-sm font-medium text-gray-900">
-                  Customer Service
-                </h3>
-                <ul role="list" className="mt-6 space-y-6">
-                  {footerNavigation.customerService.map((item) => (
-                    <li key={item.name} className="text-sm">
-                      <a
-                        href={item.href}
-                        className="text-gray-500 hover:text-gray-600"
-                      >
-                        {item.name}
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-
-            {/* Newsletter section */}
-            <div className="mt-12 md:col-span-8 md:col-start-3 md:row-start-2 md:mt-0 lg:col-span-4 lg:col-start-9 lg:row-start-1">
-              <h3 className="text-sm font-medium text-gray-900">
-                Sign up for our newsletter
-              </h3>
-              <p className="mt-6 text-sm text-gray-500">
-                The latest deals and savings, sent to your inbox weekly.
-              </p>
-              <form className="mt-2 flex sm:max-w-md">
-                <label htmlFor="email-address" className="sr-only">
-                  Email address
-                </label>
-                <input
-                  id="email-address"
-                  type="text"
-                  autoComplete="email"
-                  required
-                  className="w-full min-w-0 appearance-none rounded-md border border-gray-300 bg-white px-4 py-2 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
-                />
-                <div className="ml-4 flex-shrink-0">
-                  <button
-                    type="submit"
-                    className="flex w-full items-center justify-center rounded-md border border-transparent bg-slate-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
-                  >
-                    Sign up
-                  </button>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-
-        <div className="border-t border-gray-100 py-10 text-center">
-          <p className="text-sm text-gray-500">
-            &copy; 2021 Your Company, Inc. All rights reserved.
-          </p>
-        </div>
-      </div>
-    </footer>
-  );
-}
diff --git a/examples/winter-sale/components/header.tsx b/examples/winter-sale/components/header.tsx
deleted file mode 100644
index 2b6071a..0000000
--- a/examples/winter-sale/components/header.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import { Popover } from '@headlessui/react';
-import {
-  Bars3Icon,
-  MagnifyingGlassIcon,
-  ShoppingBagIcon,
-  ShoppingCartIcon,
-  UserIcon,
-} from '@heroicons/react/24/outline';
-import { EuFlag } from './eu-flag';
-import { navigation } from '@/app/data';
-
-export function Header() {
-  return (
-    <header className="relative bg-white">
-      <nav aria-label="Top" className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="border-b border-gray-200">
-          <div className="flex h-16 items-center justify-between">
-            <div className="flex flex-1 items-center lg:hidden">
-              <button
-                type="button"
-                className="-ml-2 rounded-md bg-white p-2 text-gray-400"
-              >
-                <span className="sr-only">Open menu</span>
-                <Bars3Icon className="h-6 w-6" aria-hidden="true" />
-              </button>
-
-              <a
-                href="#"
-                className="ml-2 p-2 text-gray-400 hover:text-gray-500"
-              >
-                <span className="sr-only">Search</span>
-                <MagnifyingGlassIcon className="h-6 w-6" aria-hidden="true" />
-              </a>
-            </div>
-
-            {/* Flyout menus */}
-            <Popover.Group className="hidden lg:block lg:flex-1 lg:self-stretch">
-              <div className="flex h-full space-x-8">
-                {navigation.categories.map((category) => (
-                  <Popover key={category.name} className="flex">
-                    {({ open }) => (
-                      <>
-                        <div className="relative flex">
-                          <Popover.Button
-                            className={clsx(
-                              open
-                                ? 'text-slate-600'
-                                : 'text-gray-700 hover:text-gray-800',
-                              'relative z-10 flex items-center justify-center text-sm font-medium transition-colors duration-200 ease-out',
-                            )}
-                          >
-                            {category.name}
-                            <span
-                              className={clsx(
-                                open ? 'bg-slate-600' : '',
-                                'absolute inset-x-0 bottom-0 h-0.5 transition-colors duration-200 ease-out sm:mt-5 sm:translate-y-px sm:transform',
-                              )}
-                              aria-hidden="true"
-                            />
-                          </Popover.Button>
-                        </div>
-                      </>
-                    )}
-                  </Popover>
-                ))}
-              </div>
-            </Popover.Group>
-
-            {/* Logo */}
-            <a href="#" className="flex">
-              <span className="sr-only">Your Company</span>
-              <ShoppingBagIcon className="h-8 w-auto" />
-            </a>
-
-            <div className="flex flex-1 items-center justify-end">
-              <a
-                href="#"
-                className="hidden text-gray-700 hover:text-gray-800 lg:flex lg:items-center"
-              >
-                <EuFlag className="block h-auto w-5 flex-shrink-0" />
-                <span className="ml-3 block text-sm font-medium">EUR</span>
-                <span className="sr-only">, change currency</span>
-              </a>
-
-              {/* Search */}
-              <a
-                href="#"
-                className="ml-6 hidden p-2 text-gray-400 hover:text-gray-500 lg:block"
-              >
-                <span className="sr-only">Search</span>
-                <MagnifyingGlassIcon className="h-6 w-6" aria-hidden="true" />
-              </a>
-
-              {/* Account */}
-              <a
-                href="#"
-                className="p-2 text-gray-400 hover:text-gray-500 lg:ml-4"
-              >
-                <span className="sr-only">Account</span>
-                <UserIcon className="h-6 w-6" aria-hidden="true" />
-              </a>
-
-              {/* Cart */}
-              <div className="ml-4 flow-root lg:ml-6">
-                <a href="#" className="group -m-2 flex items-center p-2">
-                  <ShoppingCartIcon
-                    className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-                    aria-hidden="true"
-                  />
-                  <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
-                    0
-                  </span>
-                  <span className="sr-only">items in cart, view bag</span>
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
-    </header>
-  );
-}
diff --git a/examples/winter-sale/components/image-gallery.tsx b/examples/winter-sale/components/image-gallery.tsx
deleted file mode 100644
index 4289787..0000000
--- a/examples/winter-sale/components/image-gallery.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import clsx from 'clsx';
-import { product } from '@/app/data';
-import Image from 'next/image';
-
-export function ImageGallery() {
-  return (
-    <div className="mt-8 lg:col-span-7 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:mt-0">
-      <h2 className="sr-only">Images</h2>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-3 lg:gap-8">
-        {product.images.map((image) => (
-          <Image
-            key={image.id}
-            src={image.imageSrc}
-            alt={image.imageAlt}
-            className={clsx(
-              image.primary ? 'lg:col-span-2 lg:row-span-2' : 'hidden lg:block',
-              'rounded-lg',
-            )}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export function ImageGalleryTwoColumns() {
-  return (
-    <div className="mt-8 lg:col-span-7 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:mt-0">
-      <h2 className="sr-only">Images</h2>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-3 lg:gap-8">
-        {product.images.map((image) => {
-          if (image.primary) return null;
-          return (
-            <Image
-              key={image.id}
-              src={image.imageSrc}
-              alt={image.imageAlt}
-              className="lg:block rounded-lg"
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export function ImageGalleryReversed() {
-  return (
-    <div className="mt-8 lg:col-span-7 lg:col-start-1 lg:row-span-3 lg:row-start-1 lg:mt-0">
-      <h2 className="sr-only">Images</h2>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-3 lg:gap-8">
-        {product.images
-          .slice()
-          .reverse()
-          .map((image) => (
-            <Image
-              key={image.id}
-              src={image.imageSrc}
-              alt={image.imageAlt}
-              className={clsx(
-                image.primary
-                  ? 'lg:col-span-2 lg:row-span-2'
-                  : 'hidden lg:block',
-                'rounded-lg',
-              )}
-            />
-          ))}
-      </div>
-    </div>
-  );
-}
diff --git a/examples/winter-sale/components/materials.tsx b/examples/winter-sale/components/materials.tsx
deleted file mode 100644
index 2c03407..0000000
--- a/examples/winter-sale/components/materials.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { product } from '@/app/data';
-
-export function Materials() {
-  return (
-    <div className="mt-8 border-t border-gray-200 pt-8">
-      <h2 className="text-sm font-medium text-gray-900">Fabric &amp; Care</h2>
-
-      <div className="prose prose-sm mt-4 text-gray-500">
-        <ul role="list">
-          {product.details.map((item) => (
-            <li key={item}>{item}</li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
diff --git a/examples/winter-sale/components/policies.tsx b/examples/winter-sale/components/policies.tsx
deleted file mode 100644
index 10bc1d1..0000000
--- a/examples/winter-sale/components/policies.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { policies } from '@/app/data';
-
-export function Policies() {
-  return (
-    <section aria-labelledby="policies-heading" className="mt-10">
-      <h2 id="policies-heading" className="sr-only">
-        Our Policies
-      </h2>
-
-      <dl className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-        {policies.map((policy) => (
-          <div
-            key={policy.name}
-            className="rounded-lg border border-gray-200 bg-gray-50 p-6 text-center"
-          >
-            <dt>
-              <policy.icon
-                className="mx-auto h-6 w-6 flex-shrink-0 text-gray-400"
-                aria-hidden="true"
-              />
-              <span className="mt-4 text-sm font-medium text-gray-900">
-                {policy.name}
-              </span>
-            </dt>
-            <dd className="mt-1 text-sm text-gray-500">{policy.description}</dd>
-          </div>
-        ))}
-      </dl>
-    </section>
-  );
-}
diff --git a/examples/winter-sale/components/product-detail-reviews.tsx b/examples/winter-sale/components/product-detail-reviews.tsx
deleted file mode 100644
index a69b1e5..0000000
--- a/examples/winter-sale/components/product-detail-reviews.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import clsx from 'clsx';
-import { StarIcon } from '@heroicons/react/24/solid';
-import { reviews } from '@/app/data';
-
-export function ProductDetailReviews() {
-  return (
-    <div className="mt-4">
-      <h2 className="sr-only">Reviews</h2>
-      <div className="flex items-center">
-        <p className="text-sm text-gray-700">
-          {reviews.average}
-          <span className="sr-only"> out of 5 stars</span>
-        </p>
-        <div className="ml-1 flex items-center">
-          {[0, 1, 2, 3, 4].map((rating) => (
-            <StarIcon
-              key={rating}
-              className={clsx(
-                reviews.average > rating ? 'text-yellow-400' : 'text-gray-200',
-                'h-5 w-5 flex-shrink-0',
-              )}
-              aria-hidden="true"
-            />
-          ))}
-        </div>
-        <div aria-hidden="true" className="ml-4 text-sm text-gray-300">
-          ·
-        </div>
-        <div className="ml-4 flex">
-          <a
-            href="#"
-            className="text-sm font-medium text-slate-600 hover:text-slate-500"
-          >
-            See all {reviews.totalCount} reviews
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/examples/winter-sale/components/product-details.tsx b/examples/winter-sale/components/product-details.tsx
deleted file mode 100644
index cbe984f..0000000
--- a/examples/winter-sale/components/product-details.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { product } from '@/app/data';
-
-export function ProductDetails() {
-  return (
-    <div className="mt-10">
-      <h2 className="text-sm font-medium text-gray-900">Description</h2>
-
-      <div
-        className="prose prose-sm mt-4 text-gray-500"
-        dangerouslySetInnerHTML={{ __html: product.description }}
-      />
-    </div>
-  );
-}
diff --git a/examples/winter-sale/components/product-heading.tsx b/examples/winter-sale/components/product-heading.tsx
deleted file mode 100644
index 6af3438..0000000
--- a/examples/winter-sale/components/product-heading.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { product } from '@/app/data';
-
-export function ProductHeading() {
-  return (
-    <div className="flex justify-between">
-      <h1 className="text-xl font-medium text-gray-900">{product.name}</h1>
-      <p className="text-xl font-medium text-gray-900">{product.price}</p>
-    </div>
-  );
-}
diff --git a/examples/winter-sale/components/promo.tsx b/examples/winter-sale/components/promo.tsx
deleted file mode 100644
index d3490f2..0000000
--- a/examples/winter-sale/components/promo.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-import summer from '../public/etienne-girardet-Xh6BpT-1tXo-unsplash.jpg';
-import { track } from '@vercel/analytics/react';
-
-export function Promo() {
-  return (
-    <div className="bg-white">
-      <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
-        <div className="relative overflow-hidden rounded-lg">
-          <div className="absolute inset-0">
-            <Image
-              src={summer}
-              alt=""
-              className="h-full w-full object-cover object-center"
-            />
-          </div>
-          <div className="relative  px-6 py-32 sm:px-12 sm:py-16 lg:px-16">
-            <div className="relative mx-auto flex max-w-3xl flex-col items-start text-left">
-              <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-                <span className="block sm:inline">Summer Sale</span>
-              </h2>
-              <p className="mt-3 text-xl text-white">
-                Enjoy 20% off all summer styles,
-                <br />
-                from bright dresses to pastel-hued tops.
-              </p>
-              <button
-                type="button"
-                className="mt-8 block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto"
-                onClick={() => {
-                  track(
-                    'Clicked Shop Now',
-                    {},
-                    { flagKeys: ['winter-sale', 'free-delivery'] },
-                  );
-                }}
-              >
-                Shop now
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/examples/winter-sale/components/related-products.tsx b/examples/winter-sale/components/related-products.tsx
deleted file mode 100644
index 863502f..0000000
--- a/examples/winter-sale/components/related-products.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { relatedProducts } from '@/app/data';
-import Image from 'next/image';
-
-export function RelatedProducts() {
-  return (
-    <section aria-labelledby="related-heading" className="mt-16 sm:mt-24">
-      <h2 id="related-heading" className="text-lg font-medium text-gray-900">
-        Customers also purchased
-      </h2>
-
-      <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
-        {relatedProducts.map((relatedProduct) => (
-          <div key={relatedProduct.id} className="group relative">
-            <div className="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-md lg:aspect-none group-hover:opacity-75 lg:h-80">
-              <Image
-                src={relatedProduct.imageSrc}
-                alt={relatedProduct.imageAlt}
-                className="h-full w-full object-cover object-center lg:h-full lg:w-full"
-              />
-            </div>
-            <div className="mt-4 flex justify-between">
-              <div>
-                <h3 className="text-sm text-gray-700">
-                  <a href={relatedProduct.href}>
-                    <span aria-hidden="true" className="absolute inset-0" />
-                    {relatedProduct.name}
-                  </a>
-                </h3>
-                <p className="mt-1 text-sm text-gray-500">
-                  {relatedProduct.color}
-                </p>
-              </div>
-              <p className="text-sm font-medium text-gray-900">
-                {relatedProduct.price}
-              </p>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}
diff --git a/examples/winter-sale/components/reviews.tsx b/examples/winter-sale/components/reviews.tsx
deleted file mode 100644
index 27ad322..0000000
--- a/examples/winter-sale/components/reviews.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import clsx from 'clsx';
-import { StarIcon } from '@heroicons/react/24/solid';
-import { reviews } from '@/app/data';
-
-export function Reviews() {
-  return (
-    <section aria-labelledby="reviews-heading" className="mt-16 sm:mt-24">
-      <h2 id="reviews-heading" className="text-lg font-medium text-gray-900">
-        Recent reviews
-      </h2>
-
-      <div className="mt-6 space-y-10 divide-y divide-gray-200 border-b border-t border-gray-200 pb-10">
-        {reviews.featured.map((review) => (
-          <div
-            key={review.id}
-            className="pt-10 lg:grid lg:grid-cols-12 lg:gap-x-8"
-          >
-            <div className="lg:col-span-8 lg:col-start-5 xl:col-span-9 xl:col-start-4 xl:grid xl:grid-cols-3 xl:items-start xl:gap-x-8">
-              <div className="flex items-center xl:col-span-1">
-                <div className="flex items-center">
-                  {[0, 1, 2, 3, 4].map((rating) => (
-                    <StarIcon
-                      key={rating}
-                      className={clsx(
-                        review.rating > rating
-                          ? 'text-yellow-400'
-                          : 'text-gray-200',
-                        'h-5 w-5 flex-shrink-0',
-                      )}
-                      aria-hidden="true"
-                    />
-                  ))}
-                </div>
-                <p className="ml-3 text-sm text-gray-700">
-                  {review.rating}
-                  <span className="sr-only"> out of 5 stars</span>
-                </p>
-              </div>
-
-              <div className="mt-4 lg:mt-6 xl:col-span-2 xl:mt-0">
-                <h3 className="text-sm font-medium text-gray-900">
-                  {review.title}
-                </h3>
-
-                <div
-                  className="mt-3 space-y-6 text-sm text-gray-500"
-                  dangerouslySetInnerHTML={{ __html: review.content }}
-                />
-              </div>
-            </div>
-
-            <div className="mt-6 flex items-center text-sm lg:col-span-4 lg:col-start-1 lg:row-start-1 lg:mt-0 lg:flex-col lg:items-start xl:col-span-3">
-              <p className="font-medium text-gray-900">{review.author}</p>
-              <time
-                dateTime={review.datetime}
-                className="ml-4 border-l border-gray-200 pl-4 text-gray-500 lg:ml-0 lg:mt-2 lg:border-0 lg:pl-0"
-              >
-                {review.date}
-              </time>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}
diff --git a/examples/winter-sale/components/size-picker.tsx b/examples/winter-sale/components/size-picker.tsx
deleted file mode 100644
index 2173311..0000000
--- a/examples/winter-sale/components/size-picker.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client';
-
-import clsx from 'clsx';
-import { useState } from 'react';
-import { RadioGroup } from '@headlessui/react';
-import { product } from '@/app/data';
-
-export function SizePicker() {
-  const [selectedSize, setSelectedSize] = useState(product.sizes[2]);
-
-  return (
-    <div className="mt-8">
-      <div className="flex items-center justify-between">
-        <h2 className="text-sm font-medium text-gray-900">Size</h2>
-        <a
-          href="#"
-          className="text-sm font-medium text-slate-600 hover:text-slate-500"
-        >
-          See sizing chart
-        </a>
-      </div>
-
-      <RadioGroup
-        value={selectedSize}
-        onChange={setSelectedSize}
-        className="mt-2"
-      >
-        <RadioGroup.Label className="sr-only">Choose a size</RadioGroup.Label>
-        <div className="grid grid-cols-3 gap-3 sm:grid-cols-6">
-          {product.sizes.map((size) => (
-            <RadioGroup.Option
-              key={size.name}
-              value={size}
-              className={({ active, checked }) =>
-                clsx(
-                  size.inStock
-                    ? 'cursor-pointer focus:outline-none'
-                    : 'cursor-not-allowed opacity-25',
-                  active ? 'ring-2 ring-slate-500 ring-offset-2' : '',
-                  checked
-                    ? 'border-transparent bg-slate-600 text-white hover:bg-slate-700'
-                    : 'border-gray-200 bg-white text-gray-900 hover:bg-gray-50',
-                  'flex items-center justify-center rounded-md border py-3 px-3 text-sm font-medium uppercase sm:flex-1',
-                )
-              }
-              disabled={!size.inStock}
-            >
-              <RadioGroup.Label as="span">{size.name}</RadioGroup.Label>
-            </RadioGroup.Option>
-          ))}
-        </div>
-      </RadioGroup>
-    </div>
-  );
-}
diff --git a/examples/winter-sale/components/top-banner.tsx b/examples/winter-sale/components/top-banner.tsx
deleted file mode 100644
index 00775e2..0000000
--- a/examples/winter-sale/components/top-banner.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export function TopBanner({ children }: { children?: string }) {
-  return (
-    <div className="px-4 py-2 bg-gray-950 text-white text-center text text-sm font-medium">
-      {children ? children : 'Get free delivery on orders over $100'}
-    </div>
-  );
-}
diff --git a/examples/winter-sale/middleware.ts b/examples/winter-sale/middleware.ts
index 76e32ac..24204c9 100644
--- a/examples/winter-sale/middleware.ts
+++ b/examples/winter-sale/middleware.ts
@@ -1,6 +1,6 @@
 import { type NextRequest, NextResponse } from 'next/server';
 import { precompute } from '@vercel/flags/next';
-import { precomputeFlags, bannerFlags } from '@/flags';
+import { precomputeFlags } from '@/flags';
 import { getOrGenerateVisitorId } from './utils/generateVisitorId';
 
 export const config = { matcher: ['/', '/precomputed-pages-router-example'] };
@@ -24,15 +24,4 @@ export async function middleware(request: NextRequest) {
         : undefined,
     });
   }
-
-  if (request.nextUrl.pathname === '/precomputed-pages-router-example') {
-    const code = await precompute(bannerFlags);
-
-    // rewrites the request to the variant for this flag combination
-    const nextUrl = new URL(
-      `/${code}${request.nextUrl.pathname}${request.nextUrl.search}`,
-      request.url,
-    );
-    return NextResponse.rewrite(nextUrl, { request });
-  }
 }