Added WIP Menu

src/app/(site)/layout.tsx

@@ -1,5 +1,6 @@
 import { MenuProvider } from '@/contexts/MenuContext';
 import PageHeader from '@/components/Page/Header';
+import PageMenu from '@/components/Page/Menu';
 
 export default function SiteLayout({
   children,
@@ -7,6 +8,7 @@ export default function SiteLayout({
   return (
     <MenuProvider>
       <PageHeader />
+      <PageMenu />
       <main>{children}</main>
     </MenuProvider>
   );

src/app/(site)/page.module.css

@@ -1,3 +1,82 @@
 .wrapper {
   @mixin responsive-wrapper;
+
+  & body {
+    margin: 0;
+    padding: 2rem;
+
+    font-family: monospace;
+    color: #1a1a1d;
+
+    background: #f7f9fb;
+  }
+
+  & h1 {
+    margin-bottom: 2rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  & .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 3rem;
+  }
+
+  & .demoCard {
+    border: 3px solid #1a1a1d;
+    background: white;
+  }
+
+  & .demoTitle {
+    margin: 0;
+    padding: 0.5rem 1rem;
+
+    font-size: 0.875rem;
+    font-weight: bold;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+
+    background: #1a1a1d;
+  }
+
+  & .imageContainer {
+    cursor: pointer;
+
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    height: 200px;
+  }
+
+  & .demoImage {
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+    filter: grayscale(100) contrast(150) brightness(100);
+
+    transition: none;
+  }
+
+  & .instructions {
+    margin-top: 2rem;
+    padding: 1rem;
+
+    font-family: monospace;
+    color: white;
+
+    background: #1a1a1d;
+  }
+
+  & .instructions h2 {
+    margin-top: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
 }

src/app/(site)/page.tsx

@@ -3,9 +3,491 @@ import styles from './page.module.css';
 export default function Home() {
   return (
     <div className={styles.wrapper}>
-      <p>
+      <h1>
         DAVE! DAVE! Do Not Let Us Die In The Dark Night Of This Cold Winter!
-      </p>
+      </h1>
+      <h2>Background / Image effects</h2>
+      <div className={styles.grid}>
+        <div className={`${styles.demoCard}`}>
+          <h3 className={styles.demoTitle}>Overexposure Blast</h3>
+          <div className={styles.imageContainer}>
+            <img
+              className={`${styles.demoImage} anim-overexposure`}
+              src="https://images.pexels.com/photos/1096925/pexels-photo-1096925.jpeg"
+              alt="Demo"
+            />
+          </div>
+        </div>
+
+        <div className={`${styles.demoCard}`}>
+          <h3 className={styles.demoTitle}>Contrast Slam</h3>
+          <div className={styles.imageContainer}>
+            <img
+              className={`${styles.demoImage} anim-contrastslam`}
+              src="https://images.pexels.com/photos/119809/pexels-photo-119809.jpeg"
+              alt="Demo"
+            />
+          </div>
+        </div>
+
+        <div className={`${styles.demoCard}`}>
+          <h3 className={styles.demoTitle}>Colorbleed</h3>
+          <div className={styles.imageContainer}>
+            <img
+              className={`${styles.demoImage} anim-colorbleed`}
+              src="https://images.pexels.com/photos/12924931/pexels-photo-12924931.jpeg"
+              alt="Demo"
+            />
+          </div>
+        </div>
+
+        <div className={`${styles.demoCard}`}>
+          <h3 className={styles.demoTitle}>Film Burn</h3>
+          <div className={styles.imageContainer}>
+            <img
+              className={`${styles.demoImage} anim-filmburn`}
+              src="https://images.pexels.com/photos/1031357/pexels-photo-1031357.jpeg"
+              alt="Demo"
+            />
+          </div>
+        </div>
+
+        <div className={`${styles.demoCard}`}>
+          <h3 className={styles.demoTitle}>Photocopier Malfunction</h3>
+          <div className={styles.imageContainer}>
+            <img
+              className={`${styles.demoImage} anim-malfunction`}
+              src="https://images.pexels.com/photos/3054252/pexels-photo-3054252.jpeg"
+              alt="Demo"
+            />
+          </div>
+        </div>
+
+        <div className={`${styles.demoCard}`}>
+          <h3 className={styles.demoTitle}>Toner Starvation</h3>
+          <div className={styles.imageContainer}>
+            <img
+              className={`${styles.demoImage} anim-tonerstarvation`}
+              src="https://images.pexels.com/photos/3822728/pexels-photo-3822728.jpeg"
+              alt="Demo"
+            />
+          </div>
+        </div>
+
+        <div className={`${styles.demoCard}`}>
+          <h3 className={styles.demoTitle}>Digital Corruption</h3>
+          <div className={styles.imageContainer}>
+            <img
+              className={`${styles.demoImage} anim-corruption`}
+              src="https://images.pexels.com/photos/220793/pexels-photo-220793.jpeg"
+              alt="Demo"
+            />
+          </div>
+        </div>
+
+        <div className={`${styles.demoCard}`}>
+          <h3 className={styles.demoTitle}>Stark Flash</h3>
+          <div className={styles.imageContainer}>
+            <img
+              className={`${styles.demoImage} anim-starkflash`}
+              src="https://images.pexels.com/photos/13744675/pexels-photo-13744675.jpeg"
+              alt="Demo"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.instructions}>
+        <h2>Instructions</h2>
+        <p>
+          Hover over each image to see the effect. These are designed to work
+          with your base filter:
+        </p>
+        <code>filter: grayscale(1) contrast(150%) brightness(120%)</code>
+        <p>
+          You can replace the demo images with your own by changing the src
+          attributes. All effects use stepped animations or sharp transitions to
+          maintain that industrial, non-digital feel.
+        </p>
+        <p>
+          The effects range from subtle (Contrast Slam) to more dramatic
+          (Digital Corruption). Choose based on how aggressive you want the
+          interaction to feel.
+        </p>
+      </div>
+      <h2>Link Effects</h2>
+      <div className={styles.grid}>
+        {/* Your Ideas */}
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Strikethrough Mark (Marker)</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-strikethroughmarker">
+              strikethrough link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Strikethrough Mark (Industrial)</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-strikethroughindustrial">
+              strikethrough link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Marker Highlight [Industrial]</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-markerhighlightindustrial">
+              marker highlight link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        {/* Stamping/Punching Effects */}
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Label Maker</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-labelmaker">
+              label maker link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Rubber Stamp</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-rubberstamp">
+              rubber stamp link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        {/* Industrial/Mechanical */}
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Press/Stamp</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-pressstamp">
+              pressed link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Typewriter Underline</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-typewriter">
+              typewriter link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Hard Invert</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-hardInvert">
+              hard invert link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        {/* Marking/Annotation */}
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Bracket Annotation</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-pointer">
+              bracket link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Corner Box</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-cornerbox">
+              corner box link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        {/* Glitch/Digital */}
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Character Glitch</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-characterglitch">
+              glitch link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Pixel Shift</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-pixelshift">
+              shifting link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        {/* Extra Ideas */}
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>Redacted/Censored</h3>
+          <p>
+            This is some text with a{' '}
+            <a href="#" className="anim-redacted">
+              redacted link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+
+        <div className={styles.demoCard}>
+          <h3 className={styles.demoTitle}>X-Ray/Negative</h3>
+          <p>
+            This is some text with an{' '}
+            <a href="#" className="anim-xray">
+              x-ray link
+            </a>{' '}
+            in the middle of it.
+          </p>
+        </div>
+      </div>
+      <div className="content">
+        <h1>
+          Successful Isildur's brink again throttle flank tightening splash.
+        </h1>
+        <p>
+          Help illusion embrace liquor tightening intelligence Maggot's whips
+          bit forests. 17 sing impassable helps Southrons beheading. What's the
+          Elvish word for 'friend'?
+        </p>
+        <h2>Give Hobbitses lend yours lads picking uniting sometime.</h2>
+        <p>
+          Inferno shaken skin undo wars close circles verse suck Dwarves. I gave
+          you the chance of aiding me willingly, but you have elected the way of
+          pain! Precautions tower tied Rivendell everyone agents wouldn't?
+        </p>
+        <h3>Doorway Mithrandir clearing wielder strengths floor?</h3>
+        <p>
+          Pillaged pointy-eared mix charm Grond confounded able-bodied tact
+          glimpse instruction open dear. Suffering powerful capable gulls
+          famousest stroke breathes Bilbo squeaked pace chances. Let the
+          Ring-bearer decide.
+        </p>
+        <ul>
+          <li>Mirkwood.</li>
+          <li>Tom.</li>
+          <li>Bilbo's.</li>
+          <li>Gandalf's.</li>
+          <li>Dwarvish.</li>
+        </ul>
+        <ul>
+          <li>Queen wants Oin loose heads decay piety!</li>
+          <li>Large happening arrived owes legends wit war bled Durin's.</li>
+          <li>
+            Pursuit exactly during relief mission meats cause Noldorin ablaze
+            tracked.
+          </li>
+          <li>Darken knife midday meat Goblinses.</li>
+          <li>
+            Your Rabble-rousers greatest could beast thirty-four t wizards
+            slumbers reforge.
+          </li>
+        </ul>
+        <h3>Late vagabond knowing Ent legends there flattened cultured?</h3>
+        <p>
+          Swords are no more use here. Deny Chubbs restored. Scare rebuild
+          Argonath tracked day's large.
+        </p>
+        <ol>
+          <li>Easterlings!</li>
+          <li>Bill.</li>
+          <li>Dúnedain!</li>
+          <li>Gandalf.</li>
+          <li>Orcrist.</li>
+        </ol>
+        <ol>
+          <li>Answers feelings Elrond conjurer runs.</li>
+          <li>Sul nudge powerless jelly dumping hair grows log forgave?</li>
+          <li>
+            Retaken succumbed funeral courtyard Glóin incident mere somewhere
+            commander assistance?
+          </li>
+          <li>Bore outrun stead fight Athelas guardroom willing contains.</li>
+          <li>Hunted Angmar wager noose arguing?</li>
+        </ol>
+        <h3>Elros next own wisp whence cakehole right!</h3>
+        <p>
+          Thank hid its lessened lined tells prefers were Stone-Giants thousand
+          troubles. Earendil staff pines bog finest mushroom consumption.
+          Mistaken streaming fates paths arts puppet Barad-dûr uniting? You
+          shall not pass!
+        </p>
+        <table>
+          <thead>
+            <tr>
+              <th></th>
+              <th>Ales</th>
+              <th>Deeply</th>
+              <th>Mortality</th>
+              <th>Open</th>
+              <th>Single-handedly</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Band</td>
+              <td>appeared</td>
+              <td>waited</td>
+              <td>whose</td>
+              <td>plate</td>
+              <td>marshaling</td>
+            </tr>
+            <tr>
+              <td>Meat</td>
+              <td>nest</td>
+              <td>thatched</td>
+              <td>rallying</td>
+              <td>claimed</td>
+              <td>hungers</td>
+            </tr>
+            <tr>
+              <td>Mouse</td>
+              <td>also</td>
+              <td>birdses</td>
+              <td>moons</td>
+              <td>strain</td>
+              <td>brightest</td>
+            </tr>
+            <tr>
+              <td>Hate</td>
+              <td>different</td>
+              <td>arrangements</td>
+              <td>chiefest</td>
+              <td>think</td>
+              <td>try</td>
+            </tr>
+            <tr>
+              <td>Something's</td>
+              <td>task</td>
+              <td>here's</td>
+              <td>decent</td>
+              <td>someone</td>
+              <td>uses</td>
+            </tr>
+            <tr>
+              <td>Shirt</td>
+              <td>tonight</td>
+              <td>bay</td>
+              <td>beautifully</td>
+              <td>tad</td>
+              <td>cloaks</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td>revenge</td>
+              <td>teaching</td>
+              <td>mischief</td>
+              <td>shores</td>
+              <td>dreams</td>
+              <td>tested</td>
+            </tr>
+          </tfoot>
+        </table>
+        <h4>Stage dishcloth 20 horses Tooks souls crawl crime.</h4>
+        <p>
+          Approve Sul wilderness grave embellishment greatly over these rack
+          struggle. End ringing bell Anor halls pairs thirst fortress curtain
+          cleared? Dwelt language 1296 Underhill nasty. I gave you the chance of
+          aiding me willingly, but you have elected the way of pain!
+        </p>
+        <blockquote>
+          <p>You are full of surprises, Master Baggins.</p>
+          <footer>
+            —Girion, <cite>warmongering appears</cite>
+          </footer>
+        </blockquote>
+        <h5>
+          Sung outscoring fingers Fundin reaction inquiries buggers deadliest.
+        </h5>
+        <p>
+          Mustn't powerless pierces Muil sorry crossing diamond brandy. Rip
+          rockets hinder Braga go had web ought sakes hail. A wizard is never
+          late, Frodo Baggins. Nor is he early. He arrives precisely when he
+          means to. Ashes tie Gamgee dicky!
+        </p>
+        <pre>
+          Rhudaur fancy tilled heart beggars. Dwarf nothing talked foot club.
+          Slaughtered flatten Hobbit journey's four-day?
+        </pre>
+        <h6>Pearl tact tomb bits Arwen Evenstar worry?</h6>
+        <p>
+          Times unspoiled <time>defenses</time> Silvan.{' '}
+          <del>Sigrid Pippin Gandalf</del> thin stubbornness noises easily
+          spread. Eldar warriors <code>won answered</code> filth yourself
+          pocket. Showing store consistency <kbd>M</kbd> crevice. Decision
+          feverfew <sup>giving</sup> Misty Mountain lord supplant. Gorgoroth{' '}
+          <dfn>load born fulfilled plenty</dfn> fates serpent. Doorstep Pippin's{' '}
+          <cite>pity bridge</cite> long weak weep? Brightest <abbr>Chubbs</abbr>{' '}
+          jewels understand. Somewhat Erebor <sub>noise</sub> squealing moved?
+          Pippin's <mark>feels overrun</mark> hours brown burns. <var>Anor</var>{' '}
+          turning pick prophecy. Surrounded <q>entered needlessly weary</q> vile
+          hmm Bagshot Row. Consent <ins>outwitted dotage slug</ins> Homely hear.
+          Parapet <strong>protected favored defied roam</strong> quiet Dori sick
+          bent. <samp>Homage store hurricane</samp> prove ferret Helm's Deep
+          lately? <small>Excellent regret fun often</small> returned Wood-elves
+          apocalypse. Théodred's rights rat drawing{' '}
+          <a>examine dared bygone residence deeply</a>.{' '}
+          <em>Greenway Girion Rohirrim</em> trammel waiting edge.
+        </p>
+        <hr />
+        <dl>
+          <dt>Turn</dt>
+          <dd>
+            Bare protuberance arrived forging funny salvage Cair except first
+            banners.
+          </dd>
+          <dt>Foes</dt>
+          <dd>Bore river large house shadows it's Tuckborough warn.</dd>
+          <dd>
+            Stirring Greenwood nest sapphire grant gob flagon famous mean!
+          </dd>
+          <dt>Unprepared</dt>
+          <dd>
+            Single-handed wriggling creatures lock canopy anytime horses defense
+            Hobbit's?
+          </dd>
+          <dd>
+            Nûmenor dungeons achieving encourage fretting dines believes
+            understand.
+          </dd>
+          <dd>Ease love shine legs wee harbor Udùn adventure tumble stays.</dd>
+        </dl>
+      </div>
     </div>
   );
 }