Initial commit.

.github/workflows/deploy.yml

@@ -0,0 +1,94 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

next.config.mjs

@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  output: 'export',
+  basePath: "/Elderbrew",
+  compiler: {
+    styledComponents: true,
+  },
+};
 
 export default nextConfig;

package.json

@@ -9,16 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/material": "^5.15.15",
+    "@mui/material-nextjs": "^5.15.11",
+    "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.4"
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.1.4"
+    "eslint-config-next": "14.1.4",
+    "typescript": "^5"
   }
 }

src/app/about/page.tsx

@@ -0,0 +1,68 @@
+'use client'
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import Image from 'next/image'
+import BigHeader from '@/components/BigHeader';
+import { styled } from '@mui/material/styles';
+
+const StyledBigHeader = styled(BigHeader)(() => ({
+  backgroundColor: '#fff',
+  padding: ' 0 1rem',
+  width: 'fit-content',
+  margin: '0 0 2rem',
+}));
+
+export default function About() {
+  return (
+    <>
+      <StyledBigHeader>What does <span><i>ale</i></span> mean?</StyledBigHeader>
+      <Stack direction={{ xs: 'column', md: 'row' }} spacing={4}>
+        <Stack sx={{
+          alignItems: 'center',
+          '& img': {
+            maxWidth: '80vw',
+            height: 'auto',
+          }
+        }}>
+          <Image
+            src="/Elderbrew/elderbrew-00572.jpg"
+            width="500"
+            height="333"
+            alt="Elderbrew"
+          />
+          <Image
+            src="/Elderbrew/elderbrew-00608.jpg"
+            width="500"
+            height="333"
+            alt="Elderbrew"
+          />
+        </Stack>
+        <Stack spacing={4}>
+          <Typography variant="body1">
+            Elderbrew began as a question. What does <i>ale</i> mean, and why do pirates prefer it over lager? This question led to a 
+            years-long deep dive into the history of beer and brewing by head brewer and owner Chris Bryant. As curiosity led to discovery, 
+            it became clear that in order to really understand beer, one must brew beer&mdash;and so Elderbrew was born.
+          </Typography>
+          <Typography variant="body1">
+            After years of homebrewing and attending popular local beer festivals, Elderbrew opened at 24 6th Street in downtown Bristol, TN in 
+            September 2017. Since then, we have had only one real mission&mdash;to bring to you some of the strange brews we have shared 
+            with you at the beer festivals over the years, along with an ever-expanding repertoire of new beers.
+          </Typography>
+          <Typography variant="body1">
+            We take pride in being unique. We celebrate the weird. With live music from local musicians and art showings from local 
+            artists, Elderbrew&apos;s taproom has become a hub for the creative side of Appalachia that is often
+            overshadowed by the legacy of country music and the roar of Nascar engines.
+          </Typography>
+          <Typography variant="body1">
+            So if you&apos;re local, or you just find yourself passing through our corner of Appalachia, stop in and say hi.
+            Have a beer, check out some art, listen to some tunes, and make some new friends.
+          </Typography>
+          <Typography variant="body1">
+            And of course...
+          </Typography>
+          <StyledBigHeader sx={{ fontSize: '1.5rem !important', padding: '0.25rem 0.5rem 0.25rem' }}>Drink Full, And <span><i>Descend</i></span></StyledBigHeader>
+        </Stack>
+      </Stack>
+    </>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,33 @@
+'use client'
+import BigHeader from "@/components/BigHeader";
+import { Stack, Typography } from "@mui/material";
+import { styled } from '@mui/material/styles';
+
+const StyledBigHeader = styled(BigHeader)(() => ({
+  backgroundColor: '#fff',
+  padding: ' 0 1rem',
+  width: 'fit-content',
+  margin: '0 0 2rem',
+  paddingRight: '2rem',
+}));
+
+export default function Contact() {
+  return (
+    <>
+      <StyledBigHeader>Say <span>Hello</span></StyledBigHeader>
+      <Stack direction={{ xs: 'column', md: 'row' }} spacing={2}>
+        <iframe
+          width="600"
+          height="450"
+          style={{ border: 0 }}
+          loading="lazy"
+          allowFullScreen
+          src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJjfTZlGh2UIgRwpWf8DsrvMw&key=AIzaSyBroKYjCVfCRcH9YRNH3RxYJ1_zscytFt8"
+        ></iframe>
+        <Typography variant="body1">
+          Reach us through Facebook, Instagram, or email us directly at [email protected]. But we prefer you just come visit.
+        </Typography>
+      </Stack>
+    </>
+  );
+}

src/app/globals.css

@@ -86,22 +86,19 @@ body {
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(70, 0, 0, 0.5)),
+    url("/tentacles.png"),
+    url("/stone.jpg"),
+    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 0, 0, 0.5));
+  background-color: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: left top, left bottom, left top;
+  background-attachment: fixed, fixed, fixed;
+  background-blend-mode: hard-light;
 }
 
 a {
   color: inherit;
   text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
+}