diff --git a/src/App.js b/src/App.js
index 6e37669105984a7d1190a2bc098460cdb8922735..066f0afab18d681b70cb04ed647ac8e5cb22dd39 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,7 @@ import Home from "./components/Home";
import Logo from './components/Logo';
import Abort from './components/AbortionInfo';
import About from './components/About';
+import Contact from './components/Contact'
function App() {
return (
@@ -20,6 +21,7 @@ function App() {
<Route path="/" element={<Home />} />
<Route path="/abort" element={<Abort />} />
<Route path="/about" element={<About />} />
+ <Route path="/contacts" element={<Contact />} />
</Routes>
</Router>
</>
diff --git a/src/components/About.js b/src/components/About.js
index c4002260859a1ca2d45618861c1a8ce832299224..255c3673596376a4431780973693f805dfceb632 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -1,12 +1,103 @@
import Menu from "./Menu.js";
import '../styles/Body.css';
+import '../styles/Abort.css';
function Abort() {
return(
<div className="App">
<Menu current="About Us" />
<div className="Body">
- asdf
+ <div className="et_pb_row et_pb_row_0">
+ <div className="et_pb_column et_pb_column_4_4 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough et-last-child">
+ <div className="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
+ <div className="et_pb_text_inner">
+ <h2>
+ Our Story
+ </h2>
+ <p>
+ The Sexual Health Options, Resources & Education – SHORE Centre was founded in 1972 and originally named Planned Parenthood Kitchener-Waterloo, followed by Planned Parenthood Waterloo Region. The Centre grew out of the Birth Control Centre at the University of Waterloo in order to provide all residents of our community with sexual health information and support. SHORE Centre’s founders included a librarian, a social worker, a doctor and nurse, Catherine “Kitty†Francis. Watch the video below to hear Kitty Francis tell our founding story.
+ </p>
+ <p>
+
+ </p>
+ </div>
+ </div>
+ <div className="et_pb_module et_pb_video et_pb_video_0">
+ <div className="et_pb_video_box">
+ <div className="fluid-width-video-wrapper">
+ <iframe title="Promoting Choice for 45 Years" src="https://www.youtube.com/embed/4hJyt9hykMY?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen="" name="fitvid0">
+ </iframe>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="et_pb_row et_pb_row_1">
+ <div className="et_pb_column et_pb_column_2_3 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough">
+ <div className="et_pb_module et_pb_text et_pb_text_1 et_pb_text_align_left et_pb_bg_layout_light">
+ <div className="et_pb_text_inner">
+ <h2>
+ Our Vision
+ </h2>
+ <p>
+ SHORE Centre imagines a community that values sexual health and reproductive freedom as essential for people to live their best lives.
+ </p>
+ <h2>
+ Our Mission
+ </h2>
+ <p>
+ SHORE Centre offers exceptional and inclusive sexual and reproductive health services in our community that uphold the dignity of everyone.
+ </p>
+ <h2>
+ Our Values
+ </h2>
+ <p>
+ <strong>
+ Accessible:
+ </strong> We strive to make our programs and services welcoming to all and barrier-free.
+ </p>
+ <p>
+ <strong>
+ Inclusive:
+ </strong> We celebrate diversity and respect the unique lived experiences of every person in our community. We are sex positive and value sexual and gender diversity.
+ </p>
+ <p>
+ <strong>
+ Accurate:
+ </strong> Our programs and services are modeled on scientific evidence and best-practices as well as the lived experience of the people we work with.
+ </p>
+ <p>
+ <strong>
+ Courageous:
+ </strong> We fearlessly advocate for the human right of bodily autonomy and boldly defend choice as we adapt to policy and system changes.
+ <span className="abort">
+
+ </span>
+ </p>
+ <p>
+ SHORE Centre is affiliated to the <a href="http://www.ippf.org/">International Planned Parenthood Federation</a> through our membership with <a href="http://www.sexualhealthandrights.ca/">Action Canada for Sexual Health and Rights</a> and are members of the <a href="http://www.nafcanada.org/" target="_blank" rel="noopener noreferrer">National Abortion Federation</a>. For more information about SHORE Centre’s work, please review our <a href="https://www.shorecentre.ca/wp-content/uploads/2020-21-Annual-Report.pdf" target="_blank" rel="noopener noreferrer">Annual Report</a>, <a href="https://www.shorecentre.ca/wp-content/uploads/Strategic-Plan-2020-2023.pdf" rel="attachment wp-att-14801">Strategic Plan, </a>and <a href="https://www.shorecentre.ca/wp-content/uploads/2021-Financial-Statements.pdf">Audited Financial Statements</a>.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div className="et_pb_column et_pb_column_1_3 et_pb_column_2 et_pb_css_mix_blend_mode_passthrough et-last-child">
+ <div className="et_pb_module et_pb_image et_pb_image_0 et-animated et_had_animation">
+ <span className="et_pb_image_wrap "><img src="https://www.shorecentre.ca/wp-content/uploads/inclusive.jpg" alt="" title="" height="auto" width="auto" srcSet="https://www.shorecentre.ca/wp-content/uploads/inclusive.jpg 600w, https://www.shorecentre.ca/wp-content/uploads/inclusive-300x227.jpg 300w" sizes="(max-width: 600px) 100vw, 600px" className="wp-image-2050"/></span>
+ </div>
+ <div className="et_pb_module et_pb_text et_pb_text_2 et_pb_text_align_left et_pb_bg_layout_light">
+ <div className="et_pb_text_inner">Our office is barrier-free and interpretation is available upon request. Our programs, services and policies are inclusive of all genders, orientations, abilities, ages and cultures.</div>
+ </div>
+ <div className="et_pb_module et_pb_text et_pb_text_3 et_pb_text_align_left et_pb_bg_layout_light">
+ <div className="et_pb_text_inner"><a href="https://livingwagewr.org/" target="_blank" rel="noopener noreferrer"><img className="size-medium wp-image-986 alignleft" src="https://www.shorecentre.ca/wp-content/uploads/LWWR-Logo-300x229.png" alt="LWWR Logo" width="300" height="229" srcSet="https://www.shorecentre.ca/wp-content/uploads/LWWR-Logo-300x229.png 300w, https://www.shorecentre.ca/wp-content/uploads/LWWR-Logo.png 448w" sizes="(max-width: 300px) 100vw, 300px"/></a><p></p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p>We are proud to be a Living Wage Employer.</p></div>
+ </div>
+ </div>
+ </div>
</div>
</div>
)
diff --git a/src/components/Contact.js b/src/components/Contact.js
new file mode 100644
index 0000000000000000000000000000000000000000..23011450f46fde38ff642afec9b98cfd27f8fe5a
--- /dev/null
+++ b/src/components/Contact.js
@@ -0,0 +1,41 @@
+import Menu from './Menu.js'
+import '../styles/Contact.css'
+import constants from '../constants/constants'
+
+function newTab(url) {
+ window.open(url, "_blank")
+}
+
+function Contact() {
+ var key = 0;
+ var contactItems = constants.contactItems.map((tuple) =>
+ <div key={key++} className="small-12 referral-results-clinic">
+ <h3>{tuple.name}</h3>
+ {tuple.description === "" ? null : <h5>{tuple.description}</h5>}
+ <span>Website: </span>
+ <span className="link" onClick={() => newTab(tuple.website)}>
+ {tuple.website}
+ </span>
+ <p className="phone">
+ Phone: {tuple.phoneNumber}
+ </p>
+ <p>
+ Email: {tuple.email}
+ </p>
+ </div>
+ )
+ return (
+ <div className="App">
+ <Menu current="Contacts" />
+ <div className="Body">
+ <h1>Contacts</h1>
+ <p>Contacts for questions or more information. Links on this page will open a new tab.</p>
+ <div className="contacts-container">
+ {contactItems}
+ </div>
+ </div>
+ </div>
+ )
+}
+
+export default Contact;
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
index 7bc3ca2b51cb82b0e0b9890233d137478f3e2c2d..71448c5a3ea0539ff13be56f4ef27c9ffe8e612f 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -3,41 +3,23 @@ import '../styles/Body.css';
import '../styles/App.css';
function Home() {
+
+ function Start() {
+ window.open("https://www.choiceconnect.ca", "_self")
+ }
return (
<div className="App">
<Menu current="Homepage"/>
<div className="Body">
- <div class="loc-link" id="fr-CA">Utilisez ce site en Français</div>
+ <div className="loc-link" id="fr-CA">Utilisez ce site en Français</div>
<div>
Choice Connect helps you find your nearest abortion provider based on your needs. The app features detailed referral information for more than 120 abortion providers and clinics across Canada. The web app is anonymous and free to use.
</div>
<div>
- <br/>
- By answering the following questions, you will be provided with the contact information for the abortion providers who best meet your needs. If you are not certain about your decision to have an abortion or would like to speak with a support worker, please contact
- <a href="http://www.sexualhealthandrights.ca/about-us/#contact" target="_blank" rel="noopener">
- <strong>
- Action Canada for Sexual Health & Rights
- </strong>
- </a>
- <strong>
- '
- </strong>
- Access Line at
- <span class="phoneNumber">
- 1-888-642-2725
- </span>
- . If you are located in BC, please call
- <a href="https://www.optionsforsexualhealth.org/sex-sense/" target="_blank" rel="noopener">
- <strong>
- Sex Sense
- </strong>
- </a>
- at
- <span class="phoneNumber">
- 1-800-739-7367
- </span>
- for information and resources related to abortion care.
- <br/>
+ <br />
+ In order to use the app, some information must be obtained. A pregnancy test and an ultrasound must have been taken prior to using this app. If you have not obtained results from other, please consult with your pharmacy and ultrasound clinic to get the results.
+ </div>
+ <div>
<br/>
Please be aware that due to the recent COVID-19 outbreak, many clinics are adjusting their policies and procedures to ensure the health and safety of both staff and patients. Please reach out to individual abortion providers, but be aware that some clinics are having to change the services they are able to provide.
</div>
@@ -45,7 +27,7 @@ function Home() {
<br/>
This tool is designed for people who live in Canada. If you live in the United States, please contact the
<strong> </strong>
- <a href="https://prochoice.org/think-youre-pregnant/find-a-provider/" target="_blank" rel="noopener">
+ <a href="https://prochoice.org/think-youre-pregnant/find-a-provider/" target="_blank" rel="noreferrer">
<strong>National Abortion Federation</strong>
</a>
<strong>
@@ -53,6 +35,18 @@ function Home() {
</strong>
<br/>
</div>
+ <div>
+ If you would like your clinic added to Choice Connect or changes made to your listing, please contact choiceconnect@shorecentre.ca.
+ <br/>
+ <br />
+ If you have any questions or concerns, please visit the contacts section to find someone to contact. Visit the locations section if you would like to get in touch with an abortion clinic.
+ <br />
+ <br/>
+ Want to help keep Choice Connect running? Donate today by visiting: <a href="https://www.shorecentre.ca/cc/" target="_blank" rel="noreferrer">www.shorecentre.ca/cc</a>
+ </div>
+ <div id="nav" className="row-center medium-8-center large-6 columns text-center">
+ <input id="next-btn" type="button" className="button" value="Start Now" aria-label="Start Now" onClick={Start}/>
+ </div>
</div>
</div>
);
diff --git a/src/components/Menu.js b/src/components/Menu.js
index ab521179b3ae919a0f93c084c190b333d590a172..bacf2cb119b9f7e10b9942e11f1d2c2f2b0c5e5f 100644
--- a/src/components/Menu.js
+++ b/src/components/Menu.js
@@ -1,23 +1,10 @@
import '../styles/Menu.css'
import { Link } from "react-router-dom";
+import constants from '../constants/constants';
function Menu(current) {
var key = 0;
- var menuTuple = [
- {
- name: "Homepage",
- path: "/"
- },
- {
- name: "Abortion Information",
- path: "/abort"
- },
- {
- name: "About Us",
- path: "/about"
- }
- ]
- var listItems = menuTuple.map((tuple) =>
+ var listItems = constants.menuItems.map((tuple) =>
<li key={key++} className={(current.current === tuple.name ? "current" : "false")}>
<Link to={tuple.path} className={"menuLink "}>
{tuple.name}
diff --git a/src/constants/constants.js b/src/constants/constants.js
new file mode 100644
index 0000000000000000000000000000000000000000..13b4ba24e32af949d5f4b1f2a442e561526e1a3a
--- /dev/null
+++ b/src/constants/constants.js
@@ -0,0 +1,54 @@
+const constants = {
+ menuItems: [
+ {
+ name: "Homepage",
+ path: "/"
+ },
+ {
+ name: "Abortion Information",
+ path: "/abort"
+ },
+ {
+ name: "About Us",
+ path: "/about"
+ },
+ {
+ name: "Contacts",
+ path: "/contacts"
+ },
+ {
+ name: "Locations",
+ path: "/locations"
+ }
+ ],
+ contactItems: [
+ {
+ name: "SHORE Centre",
+ website: "https://www.shorecentre.ca/",
+ phoneNumber: "519-743-9360",
+ email: "info@shorecentre.ca"
+ },
+ {
+ name: "Sex Sense",
+ description: "For Those in BC",
+ website: "https://www.optionsforsexualhealth.org/",
+ phoneNumber: "1-800-739-7367",
+ email: "info@optbc.org"
+ },
+ {
+ name: "Action Canada for Sexual Health & Rights",
+ website: "https://www.actioncanadashr.org/",
+ phoneNumber: "1-888-642-2725",
+ email: "info@actioncanadaSHR.org"
+ },
+ {
+ name: "National Abortion Federation",
+ description: "For those in the US",
+ website: "https://prochoice.org/",
+ phoneNumber: "202-667-5881",
+ email: "naf@prochoice.org"
+ }
+ ]
+}
+
+export default constants;
\ No newline at end of file
diff --git a/src/styles/About.css b/src/styles/About.css
new file mode 100644
index 0000000000000000000000000000000000000000..9c9d8666ad140b554ac44f53f18526a80f9d788c
--- /dev/null
+++ b/src/styles/About.css
@@ -0,0 +1,3 @@
+.fluid-width-video-wrapper {
+ padding-top: 56.2963%;
+}
\ No newline at end of file
diff --git a/src/styles/App.css b/src/styles/App.css
index e99842f3a2cbeaf224d4d4a0978a6541d96fe1a7..4395a437feffb498f2c795d87715a58353d430bf 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -37,3 +37,32 @@
transform: rotate(360deg);
}
}
+
+.button, [type=button], [type=submit] {
+ border-radius: 0.25em;
+}
+
+input {
+ background-color: #2199e8;
+ padding: 0.85em 1em;
+ border: 1px solid transparent;
+ color: #fefefe;
+ cursor: pointer;
+}
+
+.row-center {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+@media screen and (max-width: 40em) {
+ .small-12-center {
+ width: 100%;
+ }
+}
+
+@media screen and (min-width: 40em) {
+ .medium-8-center {
+ width: 33.3333%;
+ }
+}
diff --git a/src/styles/Contact.css b/src/styles/Contact.css
new file mode 100644
index 0000000000000000000000000000000000000000..b885cf7c48b4c7d0093d71eee39909c096d4a0d4
--- /dev/null
+++ b/src/styles/Contact.css
@@ -0,0 +1,14 @@
+.referral-results-clinic {
+ border-bottom: 1px solid #ccc;
+ padding-bottom: 1rem;
+}
+
+.contacts-container {
+ border-top: 1px solid #ccc;
+}
+
+.link {
+ color: blue;
+ cursor: pointer;
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/src/styles/Menu.css b/src/styles/Menu.css
index c6f1f3d874fb8cd4c4f728a3c35d138e66ed0ef2..737228a6ca4062690109dee0b659aeecccbff07c 100644
--- a/src/styles/Menu.css
+++ b/src/styles/Menu.css
@@ -6,6 +6,10 @@
margin-top: 1em;
}
+li:hover {
+ background-color: #0975c7;
+}
+
ul {
display: block;
list-style-type: none;
@@ -47,14 +51,17 @@ ul {
a.menuLink {
display: block;
text-align: left;
- margin-left: 1em;
+ padding-top: 1em;
+ padding-left: 1em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
+ font-size: 24px;
+ height: 3.1em;
}
li {
- height: 2em;
+ height: 5em;
}
li.hidden {
diff --git a/src/styles/Panic.css b/src/styles/Panic.css
index 3bf2b544a4a139cbbf47d4ab42a84e289871dc44..034fcee93422045ea052477a7c4585e54180dca2 100644
--- a/src/styles/Panic.css
+++ b/src/styles/Panic.css
@@ -11,7 +11,7 @@
}
#panic-button-top {
- background-color: #F00;
+ background-color: rgb(203, 81, 81);
text-transform: uppercase;
font-weight: bold;
font-size: 2em;