Skip to content

Commit 6c00df8

Browse files
marcysuttonmarcysutton
committed
Migrate additional pages
1 parent eb412a6 commit 6c00df8

23 files changed

+1522
-21
lines changed

‎.parcelrc

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"extends": "@parcel/config-default",
33
"transformers": {
4+
"*.mp4": ["@parcel/transformer-raw"],
45
"*.{js,mjs,jsx,cjs,ts,tsx}": [
56
"@parcel/transformer-js",
67
"@parcel/transformer-react-refresh-wrap"

‎App.js

+12
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,14 @@ import "./global-styles/styles.scss"
55
import Header from "components/header"
66
import HomePage from "components/page-home"
77
import AboutPage from "components/page-about"
8+
import CareersPage from "components/page-careers"
9+
import TripIdeasPage from "components/page-trip-ideas"
810
import ListingsPage from "components/page-listings"
911
import Listing from "components/page-listing-detail"
12+
import EventsPage from "components/page-events"
13+
import PassesPage from "components/page-passes"
14+
import SubmitListingPage from "components/page-submit-listing"
15+
import HikesPage from "components/page-adventures-hikes"
1016
import SemanticsExercise from "./exercise1-headings-landmarks/page-listing-detail"
1117
import ARIAExercise from "./exercise2-what-is-aria/page-listing-detail"
1218
import A11yNamingExercise from "./exercise3-accessible-names/page-listing-detail"
@@ -22,8 +28,14 @@ export function App() {
2228
<Router>
2329
<HomePage path="/" />
2430
<AboutPage path="/about" />
31+
<CareersPage path="/careers" />
2532
<ListingsPage path="/listings" />
2633
<Listing path="/listing/:id" />
34+
<SubmitListingPage path="/submit-listing" />
35+
<EventsPage path="/events" />
36+
<PassesPage path="/passes" />
37+
<HikesPage path="/adventures-hikes" />
38+
<TripIdeasPage path="/trip-ideas" />
2739
<SemanticsExercise path="/exercise1/:id" />
2840
<ARIAExercise path="/exercise2/:id" />
2941
<A11yNamingExercise path="/exercise3/:id" />

‎components/page-adventures-hikes.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { useState } from "react"
2+
import BodyClassName from "react-body-classname"
3+
import {Helmet} from "react-helmet"
4+
5+
import HeaderPortal from "components/header-portal"
6+
import Slideshow from "components/slideshow/slideshow"
7+
8+
import "components/styles/page-adventure-ideas.scss"
9+
import * as imageURLs from "../images/adventure-ideas/hikes/*.{png,jpg}"
10+
11+
const HikesPage = () => {
12+
const images = [{
13+
"src": "img1.jpg",
14+
"alt": "",
15+
"caption": "Late afternoon sun over Skyline Divide"
16+
},{
17+
"src": "img2.jpg",
18+
"alt": "",
19+
"caption": "Sunset from Olympic National Park"
20+
},{
21+
"src": "img3.jpg",
22+
"alt": "",
23+
"caption": "Wildflowers on Washington Highway 20"
24+
},{
25+
"src": "img4.jpg",
26+
"alt": "",
27+
"caption": "Hiking the North Cascades with a slice of berry pie"
28+
}]
29+
return (
30+
<BodyClassName className="header-overlap page-adventure-ideas">
31+
<>
32+
<HeaderPortal>
33+
<h1 className="visually-hidden">CampSpots</h1>
34+
</HeaderPortal>
35+
<section aria-labelledby="heading-1">
36+
<header className="page-header">
37+
<div className="page-header-content layout">
38+
<h2 className="primary-heading h1-style" id="heading-1">Adventure Ideas: Hikes</h2>
39+
</div>
40+
</header>
41+
<article className="layout">
42+
<div className="inspiration-slideshow">
43+
<h3>Inspiration Gallery</h3>
44+
<Slideshow images={images} imageURLs={imageURLs} />
45+
</div>
46+
</article>
47+
</section>
48+
</>
49+
</BodyClassName>
50+
)
51+
}
52+
53+
export default HikesPage

‎components/page-careers.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React, { useRef, useState } from "react"
2+
import BodyClassName from "react-body-classname"
3+
import {Helmet} from "react-helmet"
4+
5+
import HeaderPortal from "components/header-portal"
6+
import "components/styles/page-careers.scss"
7+
8+
const CareersPage = () => {
9+
const closeBtnRef = useRef(null)
10+
const customAmtRadio = useRef(null)
11+
12+
const [dialogActive, setDialogState] = useState(false)
13+
let [currentDialog, setCurrentDialog] = useState('')
14+
15+
const btnCloseClick = () => {
16+
setDialogState(false)
17+
}
18+
const focusInCustomInput = () => {
19+
customAmtRadio.current.checked = true
20+
}
21+
const openDialog = (dialogName) => {
22+
setCurrentDialog(dialogName)
23+
setDialogState(true)
24+
}
25+
return (
26+
<BodyClassName className="header-overlap page-careers">
27+
<>
28+
<HeaderPortal>
29+
<h1 className="visually-hidden">CampSpots</h1>
30+
</HeaderPortal>
31+
<header className="page-header">
32+
<div className="page-header-content layout">
33+
<h2 className="primary-heading h1-style">Work With Us</h2>
34+
</div>
35+
</header>
36+
<section>
37+
<article className="layout">
38+
<h2 className="h3-style">Open career positions</h2>
39+
<div className="three-parts">
40+
<div className="item">
41+
<h4>Operations</h4>
42+
<p><a href="#">Bookeeper, Accounting</a><br />
43+
Remote</p>
44+
<p><a href="#">Senior HR Partner</a><br />
45+
Remote</p>
46+
47+
<h4>Brand Management</h4>
48+
<p><a href="#">Associate Brand Manager</a><br />
49+
Remote</p>
50+
<p><a href="#">Brand Manager</a><br />
51+
Remote</p>
52+
</div>
53+
<div className="item">
54+
<h4>Engineering</h4>
55+
<p><a href="#">Data Engineer</a><br />
56+
Remote</p>
57+
<p><a href="#">Senior Data Engineer</a><br />
58+
Remote</p>
59+
<p><a href="#">Senior JavaScript Engineer</a><br />
60+
Remote</p>
61+
<p><a href="#">Senior Software Engineer, Web</a><br />
62+
Remote</p>
63+
<p><a href="#">Senior Software Engineer, CMS</a><br />
64+
Remote</p>
65+
</div>
66+
<div className="item">
67+
<h4>Audience Development</h4>
68+
<p><a href="#">Managing Director</a><br />
69+
Remote</p>
70+
<p><a href="#">Site Partner</a><br />
71+
Remote</p>
72+
<p><a href="#">Marketing Coordinator</a><br />
73+
Remote</p>
74+
</div>
75+
</div>
76+
</article>
77+
<article className="layout careers-portal-cta">
78+
<div>
79+
<h3>Employee portal</h3>
80+
<p className="subhead">Join your team on CampSpot portal</p>
81+
<p><a href="#" target="_blank">Log in to CampSpot Portal <span className="icon" aria-hidden="true"></span></a></p>
82+
</div>
83+
</article>
84+
</section>
85+
</>
86+
</BodyClassName>
87+
)
88+
}
89+
90+
export default CareersPage

‎components/page-events.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { useEffect } from "react"
2+
import BodyClassName from "react-body-classname"
3+
import {Helmet} from "react-helmet"
4+
5+
import HeaderPortal from "components/header-portal"
6+
import "components/styles/page-events.scss"
7+
import video from "/images/camping-reel.mp4"
8+
9+
const EventsPage = () => {
10+
11+
return (
12+
<BodyClassName className="header-overlap page-events">
13+
<>
14+
<HeaderPortal>
15+
<h1 className="visually-hidden">CampSpots</h1>
16+
</HeaderPortal>
17+
<section>
18+
<header className="page-header">
19+
<div className="header-video">
20+
<video autoPlay muted loop>
21+
<source src={video} />
22+
Sorry, your browser doesn't support this video.
23+
</video>
24+
</div>
25+
<div className="page-header-content layout">
26+
<h2 className="primary-heading h1-style">Events</h2>
27+
</div>
28+
</header>
29+
<article className="wide-layout two-parts-70-30">
30+
<div>
31+
<div className="headline-flex">
32+
<h2>Looking for fun stuff to do? Join a community event!</h2>
33+
<svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32">
34+
<path className="one" d="M16,26c1.1,0,2,0.9,2,2v2c0,1.1-0.9,2-2,2s-2-0.9-2-2v-2C14,26.9,14.9,26,16,26z" />
35+
<path className="one" d="M16,6c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2s2,0.9,2,2v2C18,5.1,17.1,6,16,6z" />
36+
<path className="one" d="M30,14c1.1,0,2,0.9,2,2s-0.9,2-2,2h-2c-1.1,0-2-0.9-2-2s0.9-2,2-2H30z" />
37+
<path className="one" d="M6,16 c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2s0.9-2,2-2h2C5.1,14,6,14.9,6,16z" />
38+
<path className="two" d="M25.9,23.1l1.4,1.4c0.8,0.8,0.8,2,0,2.8s-2,0.8-2.8,0l-1.4-1.4c-0.8-0.8-0.8-2,0-2.8S25.1,22.3,25.9,23.1z" />
39+
<path className="two" d=" M6.1,8.9L4.7,7.5c-0.8-0.8-0.8-2,0-2.8s2-0.8,2.8,0l1.4,1.4c0.8,0.8,0.8,2,0,2.8S6.9,9.7,6.1,8.9z" />
40+
<path className="two" d="M25.9,8.9c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8l1.4-1.4c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8L25.9,8.9z" />
41+
<path className="two" d="M6.1,23.1c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8l-1.4,1.4c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8C4.7,24.5,6.1,23.1,6.1,23.1z" />
42+
<path className="middle" d="M16,8c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S20.4,8,16,8z M16,21c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5
43+
S18.8,21,16,21z" />
44+
</svg>
45+
</div>
46+
<ul className="event-list">
47+
<li><a href="https://summermeltdown.com/">Summer Meltdown Festival 2022</a> - July 28-31, Sky Meadows Park - Darrington, WA</li>
48+
<li>YurtFest 2022 - August 5-7 - Deming, WA</li>
49+
<li>Lopez Island Bikepacking Adventure - Ongoing - Lopez Island, WA</li>
50+
<li>Mountain Loop Backpacking - September, dependent on conditions - Granite Falls, WA</li>
51+
<li>Mountain bike skills workshops - All summer long - Bellingham, WA</li>
52+
</ul>
53+
</div>
54+
<div className="aside">
55+
<h3>Summer must-haves</h3>
56+
<ul className="event-list">
57+
<li>Camp towel</li>
58+
<li>Backpacker water filter</li>
59+
<li>Hip-pack</li>
60+
<li>Sunscreen</li>
61+
<li>Pizza slice pool float</li>
62+
<li>Twinkle lights</li>
63+
</ul>
64+
</div>
65+
</article>
66+
</section>
67+
</>
68+
</BodyClassName>
69+
)
70+
}
71+
72+
export default EventsPage

0 commit comments

Comments
 (0)