starter files

.gitignore

@@ -0,0 +1,70 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# next files
+.next/
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+yarn.lock
+.pnp/
+.pnp.js
+
+# Yarn Integrity file
+.yarn-integrity
+
+# Secrets
+.env*

.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2
+}

README.md

@@ -0,0 +1,11 @@
+# HULL
+Website built on [Next.js](https://nextjs.org) 🤘
+Headless CMS powered by [Sanity.io](https://sanity.io)
+
+
+## Quick start
+
+1. Clone this repository from your GitHub account
+2. `npm install` in the project root folder on local
+3. `npm run dev` to start the frontend locally
+   - Your site should be running on [http://localhost:3000](http://localhost:3000)

components/accordion.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+const Accordion = ({ toggle, onChange, id, title, children }) => {
+  const [open, setOpen] = useState(toggle)
+
+  useEffect(() => {
+    setOpen(toggle)
+  }, [toggle])
+
+  useEffect(() => {
+    if (onChange) {
+      onChange(id, open)
+    }
+  }, [open])
+
+  return (
+    <div key={id} className="accordion">
+      <button
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        className={`accordion--toggle${open ? ' is-open' : ''}`}
+      >
+        {title}
+        <div className="accordion--icon" />
+      </button>
+      <AnimatePresence initial={false}>
+        {open && (
+          <motion.section
+            key="content"
+            initial="collapsed"
+            animate="open"
+            exit="collapsed"
+            variants={{
+              open: { opacity: 1, height: 'auto' },
+              collapsed: { opacity: 0, height: 0 },
+            }}
+            transition={{ duration: 0.5, ease: [0.19, 1.0, 0.22, 1.0] }}
+            className="accordion--content"
+          >
+            <div className="accordion--inner">{children}</div>
+          </motion.section>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export default Accordion

components/carousel.js

@@ -0,0 +1,111 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { useEmblaCarousel } from 'embla-carousel/react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+const Carousel = ({ hasArrows, children }) => {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ speed: 5, loop: true })
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [scrollSnaps, setScrollSnaps] = useState([])
+
+  const scrollTo = useCallback((index) => emblaApi.scrollTo(index), [emblaApi])
+
+  useEffect(() => {
+    const onSelect = () => {
+      setSelectedIndex(emblaApi.selectedScrollSnap())
+    }
+    if (emblaApi) {
+      setScrollSnaps(emblaApi.scrollSnapList())
+      emblaApi.on('select', onSelect)
+      onSelect()
+    }
+  }, [emblaApi])
+
+  const flipAnim = {
+    show: {
+      y: ['100%', '0%'],
+      transition: {
+        duration: 1,
+        ease: [0.16, 1, 0.3, 1],
+        when: 'beforeChildren',
+      },
+    },
+    hide: {
+      y: ['0%', '-100%'],
+      transition: {
+        duration: 1,
+        ease: [0.16, 1, 0.3, 1],
+        when: 'afterChildren',
+      },
+    },
+  }
+
+  return (
+    <div ref={emblaRef} className="carousel">
+      <div className="carousel--container">
+        {children.map((child, index) => (
+          <div className="carousel--slide" key={index}>
+            {child}
+          </div>
+        ))}
+      </div>
+
+      {scrollSnaps && (
+        <div className="carousel--hud">
+          {hasArrows && (
+            <div className="carousel--nav">
+              <button
+                onClick={() => emblaApi.scrollPrev()}
+                className="carousel--prev"
+                tab-index="0"
+                role="button"
+                aria-label="Previous slide"
+              >
+                ←
+              </button>
+              <button
+                onClick={() => emblaApi.scrollNext()}
+                className="carousel--next"
+                tab-index="0"
+                role="button"
+                aria-label="Next slide"
+              >
+                →
+              </button>
+            </div>
+          )}
+          <div className="carousel--status">
+            <div className="carousel--counter is-current">
+              <AnimatePresence>
+                <motion.span
+                  key={selectedIndex + 1}
+                  initial="hide"
+                  animate="show"
+                  exit="hide"
+                  variants={flipAnim}
+                >
+                  {selectedIndex + 1}
+                </motion.span>
+              </AnimatePresence>
+            </div>
+
+            <div className="carousel--progress">
+              <span
+                style={{
+                  transform: `scaleX(${
+                    selectedIndex / (scrollSnaps.length - 1)
+                  })`,
+                }}
+              />
+            </div>
+
+            <div className="carousel--counter is-total">
+              <span>{scrollSnaps.length}</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Carousel

components/drawer.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { motion, AnimatePresence } from 'framer-motion'
+
+const Drawer = ({ title, open, toggle, children }) => {
+  if (typeof document === `undefined`) {
+    return null
+  }
+
+  const toggleBodyClass = (state) => {
+    if (typeof document !== `undefined`) {
+      document.body.classList.toggle('drawer-open', state)
+    }
+  }
+
+  useEffect(() => {
+    toggleBodyClass(open)
+  }, [open])
+
+  return ReactDOM.createPortal(
+    <AnimatePresence initial={false}>
+      {open && (
+        <>
+          <motion.div
+            key="drawerBG"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={{
+              visible: { opacity: 1 },
+              hidden: { opacity: 0 },
+            }}
+            transition={{ duration: 0.4, ease: [0.19, 1.0, 0.22, 1.0] }}
+            className="drawer--backdrop"
+          />
+          <motion.nav
+            key="drawer"
+            initial="closed"
+            animate="open"
+            exit="closed"
+            variants={{
+              open: { x: '0%' },
+              closed: { x: '100%' },
+            }}
+            transition={{ duration: 0.5, ease: [0.19, 1.0, 0.22, 1.0] }}
+            className="drawer"
+          >
+            <div className="drawer--inner">
+              <div className="drawer--header">
+                {title && <div className="drawer--title">{title}</div>}
+                <button
+                  className="btn drawer--close"
+                  onClick={() => toggle(false)}
+                >
+                  Done
+                </button>
+              </div>
+              <div className="drawer--content">{children}</div>
+            </div>
+          </motion.nav>
+        </>
+      )}
+    </AnimatePresence>,
+    document.querySelector('#drawer')
+  )
+}
+
+export default Drawer