Marin/landing page

code-salmon-landing/components/CTA.tsx

@@ -2,46 +2,54 @@
 export default function CTA() {
   const team = [
     {
-      name: "Marin Minamiya",
-      role: "Full Stack Software Engineer",
-      image: "images/Marin.JPG",
+      name: 'Marin Minamiya',
+      role: 'Full Stack Software Engineer',
+      image: 'images/Marin.JPG',
+      linkedin: 'https://www.linkedin.com/in/marin-minamiya/',
     },
     {
-      name: "Jamie Tait",
-      role: "Full Stack Software Engineer",
-      image: "/images/alex.jpeg",
+      name: 'Jamie Tait',
+      role: 'Full Stack Software Engineer',
+      image: '/images/jamie.png',
+      linkedin: 'ttps://www.linkedin.com/in/jamiejtait/',
     },
     {
-      name: "Everett Merril",
-      role: "Full Stack Software Engineer",
-      image: "/images/sarah.jpeg",
+      name: 'Everett Merrill',
+      role: 'Full Stack Software Engineer',
+      image: '/images/everett.png',
+      linkedin: 'https://www.linkedin.com/in/everett-merrill/',
     },
     {
-      name: "Anne Salim",
-      role: "Full Stack Software Engineer",
-      image: "/images/david.jpeg",
+      name: 'Anne Salim',
+      role: 'Full Stack Software Engineer',
+      image: '/images/anne.png',
+      linkedin: 'https://www.linkedin.com/in/annesalim/',
     },
   ];
 
   return (
-    <section className="bg-black text-white text-center py-20 px-6">
-      <h2 className="text-3xl font-bold mb-4">Ready to Stop Silent Failures?</h2>
-      <p className="text-lg mb-12 max-w-xl mx-auto">
+    <section className='text-white text-center py-20 px-6'>
+      <h2 className='text-3xl text-salmon font-subheader font-bold mb-4'>
+        Ready to Stop Silent Failures?
+      </h2>
+      <p className='text-lg mb-12 font-subheader max-w-xl mx-auto'>
         Explore the people behind the product and reach out.
       </p>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 max-w-6xl mx-auto">
+      <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 max-w-6xl mx-auto'>
         {team.map((person) => (
-          <div key={person.name} className="text-center">
-            <img
-              src={person.image}
-              alt={person.name}
-              className="w-24 h-24 mx-auto rounded-full object-cover shadow-md mb-3 border-2 border-white"
-            />
-            <h3 className="text-lg font-semibold">{person.name}</h3>
-            <p className="text-sm text-white/80">{person.role}</p>
+          <div key={person.name} className='text-center'>
+            <a href={person.linkedin} target='_blank' rel='noopener noreferrer'>
+              <img
+                src={person.image}
+                alt={person.name}
+                className='w-24 h-24 mx-auto rounded-full object-cover shadow-md mb-3 border-2 border-white hover:opacity-80 transition'
+              />
+            </a>
+            <h3 className='text-lg font-semibold'>{person.name}</h3>
+            <p className='text-sm text-white/80'>{person.role}</p>
           </div>
         ))}
       </div>
     </section>
   );
-}
+}

code-salmon-landing/components/Features.tsx

@@ -1,37 +1,48 @@
 const features = [
   {
-    title: "Schema Drift Detection",
-    desc: "Deep structural diffing of Fetch API responses — no OpenAPI spec needed. It parses your TypeScript monorepo, identifies API usage, and extracts each endpoint call.",
+    title: 'Schema Drift Detection',
+    desc: 'Deep structural diffing of Fetch API responses: no OpenAPI spec needed. It parses your TypeScript monorepo, identifies API usage, and extracts each endpoint call.',
   },
   {
-    title: "Automated test requests & response analysis",
-    desc: "For every detected API call, it sends a live test request and compares the actual response to your app's expected structure -checking for missing fields, type mismatches, or structural changes.",
+    title: 'Automated test requests & response analysis',
+    desc: "For every detected API call, it sends a live test request and compares the actual response to your app's expected structure checking for missing fields, type mismatches, or structural changes.",
   },
   {
-    title: "Contract drift alerting",
-    desc: "When it finds discrepancies between expected and actual API responses, it flags them-helping you catch upstream contract changes early and avoid runtime surprises.",
+    title: 'Contract drift alerting',
+    desc: 'When it finds discrepancies between expected and actual API responses, it flags them. Helping you catch upstream contract changes early and avoid runtime surprises.',
   },
 ];
 
 export default function Features() {
   return (
-    <section className="bg-black text-text py-20 px-6 font-detective">
-      <h2 className="text-3xl font-bold text-center mb-12 text-salmon">Code Salmon Capabilities</h2>
+    <section className="text-text py-20 px-6 font-body">
+      <h2 className="text-3xl font-bold font-subheader text-center mb-12 text-white">
+        Capabilities
+      </h2>
       <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
-        {features.map((f) => (
+        {features.map((f, index) => (
           <div
             key={f.title}
-            className="relative overflow-hidden text-background border border-border p-6 rounded-xl shadow-sm transition-transform transform hover:scale-105"
-            style={{
-              backgroundImage: "url('https://media.giphy.com/media/l1J9LI09nwD0BBAPK/giphy.gif')",
-              backgroundSize: "cover",
-              backgroundPosition: "center",
-              backgroundAttachment: "fixed",
-            }}
+            className="relative bg-white text-gray-800 font-subheader border border-gray-300 p-6 rounded-md shadow-md overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl"
           >
+            {/* Red margin line (like index card) */}
+            <div className="absolute top-0 bottom-0 left-10 w-[2px] bg-red-400 opacity-40 z-0" />
+
+            {/* Horizontal ruled lines */}
+            <div className="absolute inset-0 z-0 pointer-events-none">
+              {[...Array(6)].map((_, i) => (
+                <div
+                  key={i}
+                  className="absolute left-4 right-4 h-[1px] bg-gray-200"
+                  style={{ top: `${60 + i * 24}px` }} // adjust spacing here
+                />
+              ))}
+            </div>
+
+            {/* Card content */}
             <div className="relative z-10">
-              <h3 className="text-xl font-semibold mb-2">{f.title}</h3>
-              <p>{f.desc}</p>
+              <h3 className="text-lg font-bold mb-2">{f.title}</h3>
+              <p className="text-sm">{f.desc}</p>
             </div>
           </div>
         ))}

code-salmon-landing/components/Footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer className='bg-gray-950 text-gray-400 text-sm py-10 px-6 text-center'>
+   <footer className="text-gray-400 text-sm py-10 px-6 text-center">
       <p>
         &copy; {new Date().getFullYear()}{' '}
         <span className='text-salmon font-semibold'>Code Salmon</span>. All

code-salmon-landing/components/Hero.tsx

@@ -1,32 +1,26 @@
 export default function Hero() {
   return (
-    <section
-  className="text-text text-center py-24 px-6 font-detective"
-  style={{
-    backgroundColor: "black",
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    backgroundRepeat: "no-repeat",
-  }}
->
-  <h1 className="text-5xl font-extrabold mb-4 text-salmon">Meet Code Salmon 🕵️‍♀️</h1>
-  <p className="text-xl mb-6 max-w-2xl mx-auto">
-    Investigate contract drift before it escapes into production.
-  </p>
-  <div className="flex justify-center gap-4">
-    <a
-      href="/documentation"
-      className="bg-salmon text-white px-6 py-3 rounded-lg font-semibold hover:bg-highlight transition"
-    >
-      Documentation
-    </a>
-    <a
-      href="#"
-      className="border border-border px-6 py-3 rounded-lg font-semibold hover:text-highlight transition"
-    >
-      GitHub Repo
-    </a>
-  </div>
-</section>
+    <section className="text-text text-center py-12 px-6">
+      <h1 className="text-[10rem] font-title mb-4 text-salmon text-red-450">CODE SALMON</h1>
+      <p className="text-[1.7rem] font-subheader mb-6 max-w-1xl mx-auto">
+        Investigate contract drift before it escapes into production.
+      </p>
+      <div className="flex justify-center gap-4">
+        <a
+          href="/documentation"
+          className="bg-salmon text-white px-6 py-3 rounded-lg font-semibold font-subheader hover:text-highlight transition"
+        >
+          Documentation
+        </a>
+        <a
+          href="https://github.com/OSP-54-2/codesalmon"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="border border-border px-6 py-3 rounded-lg font-semibold  font-subheader hover:text-highlight transition"
+        >
+          GitHub Repo
+        </a>
+      </div>
+    </section>
   );
-}
+}

code-salmon-landing/pages/_app.tsx

@@ -1,5 +1,18 @@
-import '../styles/globals.css'
+// pages/_app.tsx
+import '../styles/globals.css';
 
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+<div
+  className="relative min-h-screen bg-scroll bg-cover bg-top bg-center text-[#E5E5E5]"
+  style={{ backgroundImage: "url('/images/hero-bbg.jpg')", 
+    backgroundSize: "120%"
+   }}
+>
+  <div className="absolute inset-0 bg-black bg-opacity-50 z-0" />
+  <div className="relative z-10">
+    <Component {...pageProps} />
+  </div>
+</div>
+  );
 }

code-salmon-landing/pages/documentation.tsx

@@ -1,26 +1,111 @@
 export default function Documentation() {
   return (
-    <div className="min-h-screen bg-white text-gray-800 p-12">
-      <h1 className="text-4xl font-bold text-salmon mb-4">Code Salmon Documentation</h1>
-      <p className="text-lg mb-6">
-        Welcome to the Code Salmon CLI documentation. Learn how to set up, run scans, and interpret results.
-      </p>
+    <div
+      className='relative min-h-screen flex items-center justify-center px-4 bg-cover bg-center bg-no-repeat'
+      style={{ backgroundImage: "url('/images/docs-bbg.jpg')" }}
+    >
+      {/* 🔲 Dark Overlay */}
+      <div className='absolute inset-0 bg-black opacity-25 z-0' />
 
-      <h2 className="text-2xl font-semibold mt-8 mb-2 text-salmon">Link</h2>
-      <pre className="bg-gray-100 p-4 rounded-lg text-sm overflow-auto">
-        <code>npm link</code>
-      </pre>
+      {/* 🟨 Legal Pad */}
+      <div
+        className='relative z-10 pl-20 bg-[#fef3c7] text-gray-900 p-10 shadow-4xl rounded-md border border-gray-300 w-full max-w-7xl h-auto overflow-hidden font-body'
+        style={{
+          backgroundImage: `repeating-linear-gradient(
+            to bottom,
+            transparent 0px,
+            transparent 23px,
+            rgba(0, 0, 255, 0.15) 24px
+          )`,
+          boxShadow: '0px 20px 40px rgba(0, 0, 0, 0.5)', // Custom shadow
+        }}
+      >
+        {/* Red margin line */}
+        <div className='absolute top-0 bottom-0 left-14 w-[2px] bg-red-400 opacity-60 z-0' />
 
-      <h2 className="text-2xl font-semibold mt-8 mb-2 text-salmon">Basic Usage</h2>
-      <pre className="bg-gray-100 p-4 rounded-lg text-sm overflow-auto">
-        <code>scanSalmon</code>
-      </pre>
+        {/* Content */}
+        <div className='relative z-10'>
+          <h1
+            className='text-4xl font-title mb-4 text-salmon'
+            style={{
+              textShadow: '6px 6px 8px rgb(255, 255, 255)',
+            }}
+          >
+            Code Salmon Documentation
+          </h1>
+          <p className='text-lg mb-6'>
+            Welcome to the Code Salmon CLI documentation. Learn how to set up,
+            run scans, and interpret results.
+          </p>
 
-      <h2 className="text-2xl font-semibold mt-8 mb-2 text-salmon">How It Works</h2>
-      <p>
-        Code Salmon parses your monorepo, identifies REST API calls, sends live test requests,
-        and compares the responses to detect contract drift.
-      </p>
+          <h2 className='text-2xl font-semibold mt-8 mb-2 text-salmon'>Link</h2>
+          <pre
+            className='bg-white/60 p-4 rounded-lg text-sm overflow-auto'
+            style={{
+              boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.5)', // Custom shadow
+            }}
+          >
+            <code>npm link</code>
+          </pre>
+
+          <h2 className='text-2xl font-semibold mt-8 mb-2 text-salmon'>
+            Basic Usage
+          </h2>
+          <pre
+            className='bg-white/60 p-4 rounded-lg text-sm overflow-auto'
+            style={{
+              boxShadow: '0px 10px 20px rgba(0, 0, 0, 0.5)', // Custom shadow
+            }}
+          >
+            <code>scanSalmon</code>
+          </pre>
+
+          <h2 className='text-2xl font-semibold mt-8 mb-2 text-salmon'>
+            How It Works
+          </h2>
+          <p>
+            Code Salmon parses your monorepo, identifies REST API calls, sends
+            live test requests, and compares the responses to detect contract
+            drift. Here we are thinking about fishes. We like to watch them swim
+            upstream. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of
+            the printing and typesetting industry. Lorem Ipsum has been the
+            industry's standard dummy text ever since the 1500s, when an unknown
+            printer took a galley of type and scrambled it to make a type
+            specimen book. It has survived not only five centuries, but also the
+            leap into electronic typesetting, remaining essentially unchanged.
+            It was popularised in the 1960s with the release of Letraset sheets
+            containing Lorem Ipsum passages, and more recently with desktop
+            publishing software like Aldus PageMaker including versions of Lorem
+            Ipsum. Why do we use it? It is a long established fact that a reader
+            will be distracted by the readable content of a page when looking at
+            its layout. The point of using Lorem Ipsum is that it has a
+            more-or-less normal distribution of letters, as opposed to using
+            'Content here, content here', making it look like readable English.
+            Many desktop publishing packages and web page editors now use Lorem
+            Ipsum as their default model text, and a search for 'lorem ipsum'
+            will uncover many web sites still in their infancy. Various versions
+            have evolved over the years, sometimes by accident, sometimes on
+            purpose (injected humour and the like). Where does it come from?
+            Contrary to popular belief, Lorem Ipsum is not simply random text.
+            It has roots in a piece of classical Latin literature from 45 BC,
+            making it over 2000 years old. Richard McClintock, a Latin professor
+            at Hampden-Sydney College in Virginia, looked up one of the more
+            obscure Latin words, consectetur, from a Lorem Ipsum passage, and
+            going through the cites of the word in classical literature,
+            discovered the undoubtable source. Lorem Ipsum comes from sections
+            1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
+            of Good and Evil) by Cicero, written in 45 BC. This book is a
+            treatise on the theory of ethics, very popular during the
+            Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit
+            amet..", comes from a line in section 1.10.32. The standard chunk of
+            Lorem Ipsum used since the 1500s is reproduced below for those
+            interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et
+            Malorum" by Cicero are also reproduced in their exact original form,
+            accompanied by English versions from the 1914 translation by H.
+            Rackham.
+          </p>
+        </div>
+      </div>
     </div>
   );
-}
+}

code-salmon-landing/pages/index.tsx

@@ -6,7 +6,7 @@ import Footer from "../components/Footer";
 
 export default function Home() {
   return (
-    <main className="bg-white text-gray-900">
+    <main className="text-gray-900">
       <Hero />
       <Features />
       <CTA />