25 newsletter page refinement archived newsletter components

.gitignore

@@ -4,3 +4,5 @@
 # React Router
 /.react-router/
 /build/
+
+.env

README.md

@@ -1,55 +1,22 @@
-<p align="center">
-  <img src="./public/cssglogo.svg" alt="CSSG Logo" width="200">
-</p>
+# CCC
 
-# CSSG Starter Template
+A CS + SG project in partnership with The Campus &amp; Community Coalition
 
-This is a starter template for CSSG projects using React, TypeScript, and Tailwind CSS. It is configured to be used with VS Code Dev Containers for a consistent development environment.
+## About The Campus &amp; Community Coalition
 
-## Prerequisites
+The Campus & Community Coalition (CCC) is a collaborative force bringing together university and community partners to address the harms associated with high-risk drinking. By fostering open dialogue, sharing power, and using data-driven strategies, they work to create an environment where everyone can thrive socially, academically, and economically.
 
-Before you begin, ensure you have the following installed:
+## Project Mission
 
-- [Git](https://git-scm.com/)
-- [Docker Desktop](https://www.docker.com/products/docker-desktop)
-- [Visual Studio Code](https://code.visualstudio.com/)
-- [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) for VS Code.
+CCC wants to migrate from under Downtown Chapel Hill's website to their own. [Click here to see the current website.](https://www.downtownchapelhill.com/coalition)
 
-## Getting Started
+## Project Overview
 
-1.  **Fork the repository:**
+This website will be used primarily to display important trends regarding alcohol use in the Chapel Hill community alongside other important resources.
 
-    Fork this repository. Then, clone your forked repository:
+This webpage uses React. [Click here to get started with React.](https://react.dev/learn)
 
-    ```bash
-    git clone <your-forked-repository-url>
-    cd <repository-name>
-    ```
+## Get Started
 
-2.  **Open in VS Code/Cursor:**
-
-    Open the cloned repository folder in VS Code or Cursor.
-
-3.  **Open in Dev Container:**
-
-    Once the project is open in VS Code, you will be prompted to "Reopen in Container". Click on it.
-
-    If you don't see the prompt, you can open the command palette and run "Dev Containers: Reopen in Container".
-    - **Windows/Linux:** `Ctrl+Shift+P`
-    - **Mac:** `Cmd+Shift+P`
-
-    This will build the Docker container for the development environment. The first build might take a few minutes. Subsequent loads will be much faster.
-
-## Available Commands
-
-Inside the dev container, you can use the following commands:
-
-| Command             | Description                                                |
-| :------------------ | :--------------------------------------------------------- |
-| `npm run dev`       | Starts the development server with Hot Module Replacement. |
-| `npm run build`     | Builds the application for production.                     |
-| `npm run start`     | Serves the production build.                               |
-| `npm run lint`      | Lints the codebase using ESLint.                           |
-| `npm run lint:fix`  | Lints and automatically fixes issues.                      |
-| `npm run format`    | Formats the code using Prettier.                           |
-| `npm run typecheck` | Runs the TypeScript compiler to check for type errors.     |
+Look at our environment setup docs: [Environment Setup](docs/environment_setup.md)\
+Also, make sure to look over the: [Contributing Guidelines](docs/contributing_guidelines.md)

app/app.css

@@ -1,14 +1,13 @@
 @import "tailwindcss";
 
 @theme {
-    --font-sans:
-        "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-sans: "Figtree";
 }
 
 html,
 body {
-    @apply bg-white dark:bg-gray-950;
+    @apply bg-white text-black;
+    color-scheme: light;
 
     @media (prefers-color-scheme: dark) {
         color-scheme: dark;

app/components/archivedNewsletterCard.tsx

@@ -0,0 +1,65 @@
+type ArchivedNewsletterCardProps = {
+    title: string;
+    date: string;
+    href?: string;
+};
+
+export default function ArchivedNewsletterCard({
+    title,
+    date,
+    href,
+}: ArchivedNewsletterCardProps) {
+    const ArrowIcon = (
+        <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M9 6L15 12L9 18"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+
+    return (
+        <div
+            className="flex h-[197px] w-[366px] flex-col gap-2 rounded-[16px] border-4 border-[#6A9F26] bg-white p-5"
+            style={{
+                fontFamily: '"Figtree", sans-serif',
+            }}
+        >
+            <div>
+                <p className="text-2xl font-normal text-[#1c1c1c]">{title}</p>
+                <p className="text-base font-normal text-[#000000]">{date}</p>
+            </div>
+            <div className="mt-auto flex justify-end pt-2">
+                {href ? (
+                    <a
+                        href={href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex items-center gap-3 rounded-full bg-[#6cb33f] px-5 py-2 text-[20px] font-semibold text-white transition hover:bg-[#5a9a33] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1c75ff]"
+                    >
+                        View
+                        <span aria-hidden="true" className="text-white">
+                            {ArrowIcon}
+                        </span>
+                    </a>
+                ) : (
+                    <span className="inline-flex items-center gap-3 rounded-full bg-[#c4c4c4] px-5 py-2 text-[20px] font-semibold text-white">
+                        View
+                        <span aria-hidden="true" className="text-white">
+                            {ArrowIcon}
+                        </span>
+                    </span>
+                )}
+            </div>
+        </div>
+    );
+}