Initial push
parent
ba871f21a1
commit
e8e1915830
|
|
@ -1,2 +1,8 @@
|
|||
# northshrevebaptist.org
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
echo "Switching to branch main"
|
||||
git checkout main
|
||||
echo "building app..."
|
||||
npm run build
|
||||
|
||||
echo "Deploying files to server"
|
||||
scp -r dist/* jeremy@154.56.60.138:/var/www/trailblazer.shop/
|
||||
|
||||
echo "DONE!"
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>North Shreve Baptist Church</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "front",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"framer-motion": "^10.16.4",
|
||||
"localforage": "^1.10.0",
|
||||
"match-sorter": "^6.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.11.0",
|
||||
"react-router-dom": "^6.16.0",
|
||||
"sort-by": "^1.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.31",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
import { useState } from "react";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
return <></>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import React from "react";
|
||||
import { FaFacebook } from "react-icons/fa";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<div className="h-fit py-6 px-5 grid grid-cols-4 gap-2 w-full items-center text-white border-b-2 border-gray-50 inset-0 bg-blue-900/70 backdrop-blur-sm dark:bg-slate-900/80">
|
||||
<div className="text-4xl">NSBC</div>
|
||||
<div>
|
||||
<ul className="text-sm">
|
||||
<li>
|
||||
<Link to={"/"}>Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/about"}>About</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/church-staff"}>Church Staff</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/become-a-christian"}>How to Become a Christian</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to={"/contact"}>Contact</Link>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div></div>
|
||||
<div className="flex gap-2 justify-end items-center">
|
||||
<a
|
||||
href="https://www.facebook.com/profile.php?id=100064770274048"
|
||||
className="border border-white rounded-md py-1 px-2"
|
||||
>
|
||||
<FaFacebook />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import { FaBars, FaDotCircle, FaGripLines, FaHamburger } from 'react-icons/fa'
|
||||
|
||||
const Navbar = ({sideBarOpen, openSideBar } ) => {
|
||||
return (
|
||||
<div className='h-24 -mb-24 px-5 flex gap-2 w-full justify-between items-center text-white border-b-2 border-gray-50 inset-0 bg-blue-900/70 backdrop-blur-sm dark:bg-slate-900/80" top-0 z-10 sticky'>
|
||||
<div className='text-4xl'>NSBC</div>
|
||||
<div><button className='border border-white rounded-md py-1 px-2' onClick={ () => openSideBar(!sideBarOpen) }>
|
||||
|
||||
<FaBars /></button></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import React, { useState } from "react";
|
||||
import { FaSearch } from "react-icons/fa";
|
||||
import { Link } from "react-router-dom";
|
||||
import About from "../pages/About";
|
||||
import Contact from "../pages/Contact";
|
||||
import HelpfulLinks from "../pages/HelpfulLinks";
|
||||
import Home from "../pages/Home";
|
||||
import HowToBecomeAChristian from "../pages/HowToBecomeAChristian";
|
||||
import OnlineGiving from "../pages/OnlineGiving";
|
||||
import Services from "../pages/Services";
|
||||
import UpcomingEvents from "../pages/UpcomingEvents";
|
||||
|
||||
const Sidebar = () => {
|
||||
const [menu, setMenu] = useState([
|
||||
{
|
||||
name: "Home",
|
||||
path: "/",
|
||||
},
|
||||
{
|
||||
name: "Upcoming Events",
|
||||
path: "/events",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
path: "/services",
|
||||
},{
|
||||
name: "About",
|
||||
path: "/about",
|
||||
},
|
||||
{
|
||||
name: "Church Staff",
|
||||
path: "/church-staff",
|
||||
}, {
|
||||
name: "Contact",
|
||||
path: "/contact",
|
||||
}, {
|
||||
name: "How to Become a Christian",
|
||||
path: "/become-a-christian",
|
||||
}, {
|
||||
name: "Online Giving",
|
||||
path: "/tithing",
|
||||
}, {
|
||||
name: "Helpful Links",
|
||||
path: "/links",
|
||||
},
|
||||
// {
|
||||
// name: "Rocks Cry Out Youth Ministry",
|
||||
// path: "/rocks-cry-out-youth-ministry",
|
||||
// },
|
||||
]);
|
||||
return (
|
||||
<div className="">
|
||||
|
||||
<div
|
||||
id="sidebar"
|
||||
className="absolute px-3 py-5 z-40 bg-blue-900/95 w-full sm:w-fit min-h-screen h-[100vh] overflow-y-auto"
|
||||
>
|
||||
<div>
|
||||
<div className="flex w-full">
|
||||
<form id="search-form" role="search">
|
||||
<input
|
||||
className="border bg-blue-200/20 text-white border-slate-200 py-1 px-2 rounded-l-md border-r-0"
|
||||
id="q"
|
||||
aria-label="Search contacts"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
name="q"
|
||||
/>
|
||||
<div id="search-spinner" aria-hidden hidden={true} />
|
||||
<div className="sr-only" aria-live="polite"></div>
|
||||
</form>
|
||||
<form method="post">
|
||||
<button
|
||||
className="border border-slate-200 rounded-r-md bg-blue-200/20 text-white border-l-0 py-2 px-2"
|
||||
type="submit"
|
||||
>
|
||||
<FaSearch />
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<nav>
|
||||
<ul className="text-white mt-3">
|
||||
{menu.map((item) => (
|
||||
<li className="py-1 hover:border-b border-b-gray-200 " key={item.name}>
|
||||
<Link className="w-full" to={item.path}>{item.name}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React, { useState } from "react";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import Navbar from "./Components/Navbar";
|
||||
import Sidebar from "./Components/Sidebar";
|
||||
import Footer from "./Components/Footer";
|
||||
|
||||
const Root = () => {
|
||||
const [sideBarOpen, setSideBarOpen] = useState(false);
|
||||
return (
|
||||
<div className="xl:container mx-auto">
|
||||
<Navbar sideBarOpen={sideBarOpen} openSideBar={setSideBarOpen} />
|
||||
<div className="flex">
|
||||
<AnimatePresence>
|
||||
{sideBarOpen && (
|
||||
<div id="backdrop" className="w-full h-screen absolute top-0 left-0 bg-black/20" onClick={() => setSideBarOpen(false)}>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
style={{ originX: 0.5 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{}}
|
||||
duration="1.5s"
|
||||
>
|
||||
<Sidebar />
|
||||
</motion.div>
|
||||
</div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<div id="detail" className="py-3 mt-24 px-2 w-full">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Root;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 501 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.17 26.76"><defs><style>.cls-1{fill:#fff}</style></defs><title>TGI_primary_white_KO</title><path class="cls-1" d="M120.49 37.87h-1.06v8.92h1.06V37.87zM99.91 43.56c0-1.57.9-2.44 2-2.44s2 .87 2 2.44S103 46 101.92 46s-2-.87-2-2.44m-1.12 0a3.14 3.14 0 1 0 6.27 0 3.14 3.14 0 1 0-6.27 0m-1.1-3.23H96.62v6.45h1.06V40.33zm0-2.47H96.62v1.3h1.06v-1.3zM76.52 40.33h-1v6.45h1.06V43.92c0-1.64.63-2.61 2.34-2.61V40.18H78.81a2.35 2.35 0 0 0-2.26 1.52h0V40.33zm-16.85 0h-1v6.45h1.06V43.14a1.81 1.81 0 0 1 1.91-2A1.22 1.22 0 0 1 63 42.42v4.37H64V42.54c0-1.38-.53-2.36-2.23-2.36a2.25 2.25 0 0 0-2.1 1.17h0v-1zm-2.6-2.47H55.89v8.92h1.19V37.87zm7-2.56h1.06V31.06c0-1.38-.52-2.36-2.22-2.36a2.18 2.18 0 0 0-2 1.1h0V26.39h-8v1h3v7.91H57V27.39H59.8v7.91h1.06V31.66a1.81 1.81 0 0 1 1.91-2 1.22 1.22 0 0 1 1.31 1.3v4.37zm1.72 3.09v1.94h-1.1v.94h1.1v4.11c0 1.18.44 1.4 1.54 1.4h.81V45.85H67.67c-.66 0-.8-.09-.8-.57v-4h1.28V40.33H66.87V38.39H65.81zm1.53-6.93a1.85 1.85 0 0 1 3.7 0h-3.7zm0 .94h4.83c.07-1.56-.63-3.7-2.92-3.7a3.1 3.1 0 0 0-3 3.36c.06 2 1 3.4 3.09 3.4a2.6 2.6 0 0 0 2.76-2.2H71a1.56 1.56 0 0 1-1.68 1.26 1.9 1.9 0 0 1-2-2.12m2.38 10.54a1.84 1.84 0 0 1 1.85-1.82 1.86 1.86 0 0 1 1.87 1.82H69.71zm0 .94h4.83c.07-1.57-.63-3.7-2.92-3.7a3.11 3.11 0 0 0-3 3.36c.06 2 1 3.39 3.1 3.39a2.6 2.6 0 0 0 2.76-2.2H73.4A1.56 1.56 0 0 1 71.72 46a1.9 1.9 0 0 1-2-2.12m13.13-8.57H83.6V30.62H79.69v1h2.85a2.69 2.69 0 0 1-2.86 2.91c-2 0-3.06-1.7-3.06-3.56s.9-3.78 3.06-3.78a2.41 2.41 0 0 1 2.64 2h1.19c-.34-2.08-1.89-3-3.83-3-2.83 0-4.25 2.25-4.25 4.84a4.28 4.28 0 0 0 4.25 4.5 3.5 3.5 0 0 0 2.86-1.33zm1.06 11.47H85V42.54c0-1.38-.53-2.36-2.23-2.36a2.25 2.25 0 0 0-2.1 1.17h0v-1h-1v6.45h1.06V43.14a1.81 1.81 0 0 1 1.91-2 1.22 1.22 0 0 1 1.31 1.3v4.37zm1.2-19.09h1.06v-1.3H85.11v1.3zm0 7.62h1.06V28.85H85.11v6.46zm5.27 9.23a1.72 1.72 0 0 1-2 1.45 1 1 0 0 1-1.25-.94 1.24 1.24 0 0 1 1.3-1.17 5.46 5.46 0 0 0 1.92-.43v1.09zM89 40.18c-1.43 0-2.67.56-2.74 2.16h1.07c.05-1 .71-1.23 1.61-1.23.68 0 1.44.15 1.44 1.07s-1 .72-2.18.94-2.18.53-2.18 2c0 1.28 1 1.81 2.13 1.81a2.86 2.86 0 0 0 2.27-1 .85.85 0 0 0 .9 1 1.42 1.42 0 0 0 .76-.17V45.94a.89.89 0 0 1-.33.06c-.34 0-.34-.22-.34-.72V42c0-1.51-1.26-1.77-2.42-1.77m3.5-8.1c0 1.21-.55 2.44-2 2.44a2.11 2.11 0 0 1-2-2.39c0-1.26.49-2.5 1.94-2.5s2 1.17 2 2.44m0 3.22h1.06V26.39H92.48v3.32h0a2.47 2.47 0 0 0-2.09-1c-2 0-2.95 1.54-2.95 3.36s1 3.4 3 3.4a2.17 2.17 0 0 0 2.06-1h0v.87zm3.17 5H94.36V38.39H93.3v1.94H92.2v.94h1.1v4.11c0 1.18.44 1.4 1.53 1.4h.81V45.85H95.17c-.66 0-.8-.09-.8-.57v-4h1.28V40.33zm.24-8.87a1.86 1.86 0 0 1 3.71 0H95.89zm0 .94h4.84c.06-1.56-.63-3.7-2.92-3.7a3.11 3.11 0 0 0-3 3.36c.06 2 1 3.4 3.1 3.4a2.6 2.6 0 0 0 2.76-2.2H99.57a1.55 1.55 0 0 1-1.67 1.26 1.9 1.9 0 0 1-2-2.12m10.8-.32c0 1.57-.9 2.44-2 2.44s-2-.87-2-2.44.9-2.44 2-2.44 2 .87 2 2.44m1.12 0a3.14 3.14 0 1 0-6.27 0 3.14 3.14 0 1 0 6.27 0m1.45 8.1a2.24 2.24 0 0 0-2.1 1.17h0v-1h-1v6.45h1.06V43.14a1.81 1.81 0 0 1 1.91-2 1.22 1.22 0 0 1 1.31 1.3v4.37h1.07V42.54c0-1.38-.53-2.36-2.23-2.36m4-4.87h1.07V31.06c0-1.38-.53-2.36-2.23-2.36a2.24 2.24 0 0 0-2.1 1.18h0v-1h-1v6.46h1.06V31.66a1.81 1.81 0 0 1 1.91-2 1.22 1.22 0 0 1 1.31 1.3v4.37zm3.51 9.23a1.73 1.73 0 0 1-2 1.45 1 1 0 0 1-1.25-.94 1.24 1.24 0 0 1 1.3-1.17 5.46 5.46 0 0 0 1.93-.43v1.09zm-1.36-4.36c-1.43 0-2.67.56-2.73 2.16h1.06c.05-1 .71-1.23 1.62-1.23.67 0 1.43.15 1.43 1.07s-1 .72-2.18.94-2.18.53-2.18 2c0 1.28 1 1.81 2.13 1.81a2.88 2.88 0 0 0 2.28-1 .84.84 0 0 0 .89 1 1.41 1.41 0 0 0 .76-.17V45.94a.9.9 0 0 1-.32.06c-.34 0-.34-.22-.34-.72V42c0-1.51-1.26-1.77-2.42-1.77m4.2-9.46h1.06c-.09-1.57-1.22-2-2.64-2-1.12 0-2.41.53-2.41 1.83s1.06 1.59 2.1 1.82 2.11.38 2.11 1.2-.89 1-1.56 1c-.88 0-1.7-.3-1.74-1.25h-1.06c.06 1.6 1.28 2.19 2.73 2.19s2.75-.5 2.75-2c0-1.25-1-1.6-2.1-1.84s-2.11-.36-2.11-1.12.74-.82 1.37-.82a1.3 1.3 0 0 1 1.5 1.08M33.79 35.13c.29-.55-.85-.45-1.3.05a2.18 2.18 0 0 0 .46 3.12 6.79 6.79 0 0 1 .24-2.11 2.91 2.91 0 0 1 .61-1.06m7.87 3.24a2 2 0 0 0 .33-3.3c-.71-.44-1.1-.31-1.21 0a5.2 5.2 0 0 1 .89 3.28m.14 1.84a4.85 4.85 0 0 0-1.3 2.15 14.31 14.31 0 0 0-1.1 4.32.21.21 0 0 1-.16.23h-4a.22.22 0 0 1-.16-.23 19.93 19.93 0 0 0-1-4.32 4.88 4.88 0 0 0-1.29-2.15c-3.78-3.49-2-7.4 1.77-6.6A.37.37 0 0 0 35 33.2L35.21 32a.19.19 0 0 1 .23-.13H39.3a.19.19 0 0 1 .23.13l.11 1.22a.37.37 0 0 0 .4.42c3.7-.72 5.52 3.16 1.77 6.6m-3.07-8.7H36c-.69-1.71-.11-2.87.61-3.24A2.35 2.35 0 0 1 38 25.85c.14-.05.12.14 0 .38a2.28 2.28 0 0 0 .43 1.89 3.46 3.46 0 0 1 .29 3.39M49 36.43A11.82 11.82 0 1 0 37.18 48.25 11.82 11.82 0 0 0 49 36.43m.51 0A12.31 12.31 0 1 1 37.2 24.15 12.31 12.31 0 0 1 49.51 36.46m1.07 0A13.38 13.38 0 1 0 37.2 49.84 13.38 13.38 0 0 0 50.58 36.46" transform="translate(-23.82 -23.08)"/></svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
import { useRef, useEffect } from 'react'
|
||||
|
||||
function useDocumentTitle(title, prevailOnUnmount = false) {
|
||||
const defaultTitle = useRef(document.title);
|
||||
|
||||
useEffect(() => {
|
||||
document.title = title;
|
||||
}, [title]);
|
||||
|
||||
useEffect(() => () => {
|
||||
if (!prevailOnUnmount) {
|
||||
document.title = defaultTitle.current;
|
||||
}
|
||||
}, [])
|
||||
}
|
||||
|
||||
export default useDocumentTitle
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
/** Navigate to the top of a page so that the scroll position isn't persisted between pages. Use this instead of React Dom's build-in @see {@link useNavigate}. */
|
||||
export const useNavigateToTop = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const navigateAndReset = (to) => {
|
||||
navigate(to, { replace: true });
|
||||
window.scrollTo(0, 0);
|
||||
};
|
||||
|
||||
return navigateAndReset;
|
||||
};
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,600;0,700;1,400;1,800&display=swap");
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
* {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import Root from "./Root.jsx";
|
||||
import Contact from "./pages/Contact.jsx";
|
||||
import NotFound from "./pages/NotFound.jsx";
|
||||
import Home from "./pages/Home";
|
||||
import About from "./pages/About";
|
||||
import Services from "./pages/Services";
|
||||
import UpcomingEvents from "./pages/UpcomingEvents";
|
||||
import HowToBecomeAChristian from "./pages/HowToBecomeAChristian";
|
||||
import OnlineGiving from "./pages/OnlineGiving";
|
||||
import HelpfulLinks from "./pages/HelpfulLinks";
|
||||
import ChurchStaff from "./pages/ChurchStaff";
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <Root />,
|
||||
errorElement: <NotFound />,
|
||||
children: [
|
||||
{
|
||||
path: "/",
|
||||
element: <Home />,
|
||||
},
|
||||
{
|
||||
element: <UpcomingEvents />,
|
||||
path: "/events",
|
||||
},
|
||||
{
|
||||
element: <Services />,
|
||||
path: "/services",
|
||||
},
|
||||
{
|
||||
element: <About />,
|
||||
path: "/about",
|
||||
},
|
||||
{
|
||||
element: <Contact />,
|
||||
path: "/contact",
|
||||
},
|
||||
{
|
||||
element: <HowToBecomeAChristian />,
|
||||
path: "/become-a-christian",
|
||||
},
|
||||
{
|
||||
element: <OnlineGiving />,
|
||||
path: "/tithing",
|
||||
},
|
||||
{
|
||||
element: <HelpfulLinks />,
|
||||
path: "/links",
|
||||
},
|
||||
{
|
||||
element: <ChurchStaff />,
|
||||
path: "/church-staff",
|
||||
}
|
||||
// {
|
||||
// name: "Rocks Cry Out Youth Ministry",
|
||||
// path: "/rocks-cry-out-youth-ministry",
|
||||
// },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react';
|
||||
import useDocumentTitle from '../hooks/useDocumentTitle';
|
||||
|
||||
const About = () => {
|
||||
useDocumentTitle('NSBC | About');
|
||||
|
||||
return (
|
||||
<div className="bg-white px-6 py-3 mt-24">
|
||||
<h1 className="text-3xl font-bold mb-6 flex justify-center">About Us</h1>
|
||||
<div className="bg-gray-100">
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-3xl font-bold mb-6 px-4">Our Mission</h2>
|
||||
<p className="text-gray-700 p-4">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae tortor sed odio
|
||||
fringilla elementum. Nulla facilisi. Vestibulum et lectus id diam commodo volutpat
|
||||
vitae nec felis. Curabitur tristique cursus luctus. Etiam in justo sapien. Sed
|
||||
finibus, nisl et ultrices ultrices, neque odio venenatis dui, id rutrum metus quam
|
||||
vel justo.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-12 bg-gray-200">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-3xl font-bold mb-6 px-4">Our History</h2>
|
||||
<p className="text-gray-700 p-4">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae tortor sed odio
|
||||
fringilla elementum. Nulla facilisi. Vestibulum et lectus id diam commodo volutpat
|
||||
vitae nec felis. Curabitur tristique cursus luctus. Etiam in justo sapien. Sed
|
||||
finibus, nisl et ultrices ultrices, neque odio venenatis dui, id rutrum metus quam
|
||||
vel justo.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-3xl font-bold mb-6 px-4">Our Leadership</h2>
|
||||
<p className="text-gray-700 p-4">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae tortor sed odio
|
||||
fringilla elementum. Nulla facilisi. Vestibulum et lectus id diam commodo volutpat
|
||||
vitae nec felis. Curabitur tristique cursus luctus. Etiam in justo sapien. Sed
|
||||
finibus, nisl et ultrices ultrices, neque odio venenatis dui, id rutrum metus quam
|
||||
vel justo.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import React from "react";
|
||||
import SteveMiller from "../assets/SteveMiller.jpg";
|
||||
import useDocumentTitle from "../hooks/useDocumentTitle";
|
||||
const ChurchStaff = () => {
|
||||
useDocumentTitle('NSBC | Church Staff');
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<h1 className="text-4xl flex justify-center">Church Staff</h1>
|
||||
<div className="flex flex-col items-start ">
|
||||
<section className="grid grid-cols-2 gap-3 items-center p-4 bg-slate-100 w-full h-fit">
|
||||
<span>
|
||||
<h2 className="text-2xl">Pastor</h2>
|
||||
<p>Rev. Cecil Marr</p>
|
||||
</span>
|
||||
<div>
|
||||
<img src="https://placehold.co/600x400" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="grid grid-cols-2 gap-3 bg-neutral-50 items-center w-full h-fit p-4">
|
||||
<span>
|
||||
<img src={SteveMiller} />
|
||||
</span>
|
||||
<div className="flex w-full justify-end">
|
||||
<span className="flex flex-col">
|
||||
<h2 className="text-2xl">Worship Leader</h2>
|
||||
<p>Steve Miller</p>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<section className="grid grid-cols-2 gap-3 bg-slate-100 items-center w-full h-fit p-4">
|
||||
<div className="flex w-full justify-start">
|
||||
<span className="flex flex-col">
|
||||
<h2 className="text-2xl">Youth Director</h2>
|
||||
<p>Jennifer Carter - husband - Don </p>
|
||||
<p>
|
||||
<a href="mailto:jennifer@jubileezoo.com">
|
||||
Email: jennifer@jubileezoo.com
|
||||
</a>
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<img src="https://placehold.co/600x400" />
|
||||
</span>
|
||||
</section>
|
||||
<section className="grid grid-cols-2 gap-3 bg-neutral-50 items-center w-full h-fit p-4">
|
||||
<span>
|
||||
<img src="https://placehold.co/600x400" />
|
||||
</span>
|
||||
<div className="flex w-full justify-end">
|
||||
<span className="flex flex-col">
|
||||
<h2 className="text-2xl">Ministry Assistant - Office Secretary</h2>
|
||||
<p>Linda Conner - husband - David</p>
|
||||
<p>
|
||||
<a href="mailto:linda@northshrevebaptist.org">
|
||||
Email: linda@northshrevebaptist.org
|
||||
</a>
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
<div className="block w-full h-40"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChurchStaff;
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import React from "react";
|
||||
import { FaPaperPlane, FaPlane } from "react-icons/fa";
|
||||
import { Form } from "react-router-dom";
|
||||
import useDocumentTitle from "../hooks/useDocumentTitle";
|
||||
|
||||
const Contact = () => {
|
||||
useDocumentTitle('NSBC | Contact');
|
||||
|
||||
const contact = {
|
||||
first: "Your",
|
||||
last: "Name",
|
||||
avatar: "https://placekitten.com/g/200/200",
|
||||
twitter: "your_handle",
|
||||
notes: "Some notes",
|
||||
favorite: true,
|
||||
};
|
||||
return (
|
||||
<div className="w-full mt-24">
|
||||
<div id="contact" className="w-full">
|
||||
<div className="w-full">
|
||||
<h1 className="my-5 text-2xl w-full flex justify-center">
|
||||
<strong>Contact North Shreve Baptist Church</strong>
|
||||
</h1>
|
||||
|
||||
<div className="flex justify-center gap-2">
|
||||
<Form className="flex flex-col gap-3" action="/api/contact" method="post">
|
||||
<div className="w-full grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<p>First name:</p>
|
||||
<input
|
||||
className="w-full py-1 px-2 border border-slate-400 rounded-md"
|
||||
type="text"
|
||||
name="first"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Last name:</p>
|
||||
<input
|
||||
className="w-full py-1 px-2 border border-slate-400 rounded-md"
|
||||
type="text"
|
||||
name="last"
|
||||
placeholder="Last Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<p>Email:</p>
|
||||
<input
|
||||
className="w-full py-1 px-2 border border-slate-400 rounded-md"
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>Phone:</p>
|
||||
<input
|
||||
className="w-full py-1 px-2 border border-slate-400 rounded-md"
|
||||
type="text"
|
||||
name="phone"
|
||||
placeholder="Phone"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex flex-col gap-2">
|
||||
<p>Message:</p>
|
||||
<textarea
|
||||
className=" w-full py-1 px-2 border border-slate-400 rounded-md"
|
||||
type="text"
|
||||
name="message"
|
||||
placeholder="Message"
|
||||
rows="8"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex justify-end gap-2">
|
||||
<button
|
||||
className="py-1 px-2 bg-red-800 text-white rounded-md"
|
||||
type="reset"
|
||||
>Reset </button>
|
||||
<button
|
||||
className=" flex justify-center gap-1 items-center bg-green-600 rounded-md py-1 px-2 text-white"
|
||||
type="submit"
|
||||
>
|
||||
Send <FaPaperPlane />
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Contact;
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
import React from "react";
|
||||
import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter, FaVimeo, FaYoutube } from "react-icons/fa";
|
||||
import LABaptistLogo from "../assets/LABaptistLogo.png";
|
||||
import GideonsLogo from "../assets/gideonslogo.png";
|
||||
import GBLogo from "../assets/GBLogo.png";
|
||||
import AALogo from "../assets/AALogo.png";
|
||||
import useDocumentTitle from "../hooks/useDocumentTitle";
|
||||
const HelpfulLinks = () => {
|
||||
useDocumentTitle('NSBC | Helpful Links');
|
||||
|
||||
const links = [
|
||||
{
|
||||
title: "Northwest Louisiana Baptist Association",
|
||||
description:
|
||||
"Northwest Louisiana Baptist Association was formed in October 1969 to serve the Southern Baptist Churches of Caddo and Bossier Parishes in Louisiana. In 1969, three existing Associations merged. The Caddo Baptist Association that formed in 1892, the North Caddo Association that formed in 1948 and the Bossier Parish Association that formed 1922, all came together under one banner.",
|
||||
image:
|
||||
"https://www.nwlba.org/uploads/1/0/6/9/106951593/nlba-footer_orig.png",
|
||||
imageAlt: "Northwest Louisiana Baptist Association",
|
||||
facebook: "https://www.facebook.com/NWLBA/",
|
||||
url: "http://www.nwlba.org/",
|
||||
},
|
||||
{
|
||||
title: "Louisiana Baptist Convention",
|
||||
description:
|
||||
"The Louisiana Baptist Convention is a statewide association of over 1,600 Baptist churches united through a shared mission to provide help, hope, and encouragement to individuals in the midst of a busy world. These churches work together, while maintaining their autonomy, to achieve this common goal through various ministerial efforts, both separately and cooperatively.",
|
||||
image: LABaptistLogo,
|
||||
imageAlt: "Louisiana Baptist Convention",
|
||||
facebook: "https://www.facebook.com/louisianabaptists",
|
||||
instagram: "https://www.instagram.com/labaptists/",
|
||||
x: "https://twitter.com/LaBaptists",
|
||||
url: "https://louisianabaptists.org/",
|
||||
},
|
||||
{
|
||||
title: "Southern Baptist Convention",
|
||||
description:
|
||||
"The Southern Baptist Convention (SBC) is a coalition of over 50,000 local churches and missions that work together to spread the message of Jesus Christ. Despite the diversity of its member churches, the SBC is united by shared beliefs and values. While some churches are large, with over 200 members, most have fewer than 200 weekly worshipers. The SBC is inclusive and welcomes churches of all races, ethnicities, socio-economic backgrounds, languages, sizes, and locations.",
|
||||
image:
|
||||
"https://sbcnet.wpenginepowered.com/wp-content/uploads/2020/04/sbc__logo-blue.svg",
|
||||
imageAlt: "Southern Baptist Convention",
|
||||
facebook: "https://www.facebook.com/SBCExecComm/",
|
||||
x: "https://twitter.com/SBCExecComm/",
|
||||
instagram: "https://www.instagram.com/SBCExecComm/",
|
||||
url: "http://www.sbc.net/",
|
||||
},
|
||||
{
|
||||
title: "LifeWay Christian Resources",
|
||||
description:
|
||||
"Lifeway Christian Resources has been helping local churches spread the message of Jesus Christ for over 130 years. Founded by Dr. James M. Frost, the organization provides ministry resources such as Bibles, Bible studies, church supplies, camps, and events to churches all over the world. As a nonprofit, Lifeway's resources are used in 160 countries and six continents, and every purchase made supports their mission to spread the gospel globally. Lifeway is an entity of the Southern Baptist Convention, a coalition of churches that share common beliefs and a commitment to sharing the gospel.",
|
||||
image:
|
||||
"https://s7d9.scene7.com/is/content/LifeWayChristianResources/lifeway-dot-com-logo",
|
||||
imageAlt: "LifeWay Christian Resources",
|
||||
facebook: "https://www.facebook.com/lifeway/",
|
||||
instagram: "https://www.instagram.com/lifeway",
|
||||
x: "https://twitter.com/lifeway",
|
||||
linkedin: "https://www.linkedin.com/company/lifeway-christian-resources/",
|
||||
url: "http://www.lifeway.com",
|
||||
},
|
||||
{
|
||||
title: "Compel Outreach International",
|
||||
description:
|
||||
"Compel Outreach International is an indigenous missions outreach established by Bill and Wendy Britt. Compel seeks to reach as many people as possible in as many places as possible with the Gospel of Jesus Christ. Compel is on the ground, meeting the physical and spiritual needs of people all over the world. Compel Outreach rescues orphans, plants churches, educates children, trains local pastors and church leaders and conducts mass crusades.",
|
||||
image: "https://www.compeloi.org/assets/img/png/coi-logo.png",
|
||||
imageAlt: "Compel Outreach International",
|
||||
facebook: "https://www.facebook.com/compeloutreachinternational",
|
||||
url: "http://www.compeloi.org",
|
||||
},
|
||||
{
|
||||
title: "Malcom Ellis Ministries",
|
||||
description: "",
|
||||
image: "",
|
||||
imageAlt: "Malcom Ellis Ministries",
|
||||
facebook: "https://www.facebook.com/malcomellisministries",
|
||||
youtube: "https://www.youtube.com/channel/UCol8VrQdCXn_nBNVVAgbyCA",
|
||||
url: "http://www.malcomellis.com",
|
||||
},
|
||||
{
|
||||
title: "The Gideons International",
|
||||
description:
|
||||
"The Gideons International is a group of Christian professionals who aim to spread the message of Jesus by working together, sharing personal testamonies, and distributing Bibles and New Testaments. They are known for their work in hotels but also place Scriptures in strategic locations for anyone who may be interested or unaware of their need for them.",
|
||||
image: GideonsLogo,
|
||||
imageAlt: "The Gideons International",
|
||||
facebook: "https://www.facebook.com/thegideonsintl/",
|
||||
instagram: "https://www.instagram.com/thegideonsinternational/",
|
||||
vimeo: "https://vimeo.com/thegideons",
|
||||
x: "https://twitter.com/thegideons",
|
||||
url: "http://www.gideons.org",
|
||||
},
|
||||
{
|
||||
title: "Georgia Barnette Offering",
|
||||
description: "The Georgia Barnette Offering for Louisiana Missions is an annual offering taken up by Louisiana Baptists to support missions and ministries throughout the state. The funds collected are used to transform lives and churches in Louisiana. The offering is typically promoted and collected by churches, but individuals can also give online. The offering is named after Georgia Barnette, a missionary to New Orleans in the early 1900s.",
|
||||
image: GBLogo,
|
||||
imageAlt: "Georgia Barnette Offering",
|
||||
url: "http://www.georgiabarnette.org",
|
||||
},
|
||||
{
|
||||
title: "Annie Armstrong Offering",
|
||||
description: "The Annie Armstrong Offering is an annual offering taken up by Southern Baptist churches to support missions and ministries in North America. It was started in 1895 by the Woman's Missionary Union (WMU) to benefit the Home Mission Board (now North American Mission Board). In 1934, it was named in honor of Annie Armstrong, the first national executive leader of WMU. Over ﹩2 billion has been donated to support thousands of missionaries in church planting and compassion ministries, resulting in millions of lives transformed by the power of the gospel.",
|
||||
image: AALogo,
|
||||
imageAlt: "Annie Armstrong Offering",
|
||||
facebook: "https://www.facebook.com/aaeo.sbc",
|
||||
x: "https://twitter.com/NAMB_SBC",
|
||||
instagram: "https://www.instagram.com/namb_sbc/",
|
||||
url: "http://www.anniearmstrong.com",
|
||||
},
|
||||
|
||||
// Add more links as needed
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<section className="py-12">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-4xl flex justify-center w-full font-bold mb-6">
|
||||
Helpful Links
|
||||
</h2>
|
||||
<ul className="grid mx-5 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
{links.map((link, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="bg-white shadow overflow-hidden sm:rounded-lg"
|
||||
>
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
<details
|
||||
title="Click for details"
|
||||
className="text-lg leading-6 font-medium text-gray-900"
|
||||
>
|
||||
<summary>{link.title}</summary>
|
||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">
|
||||
{link.description}
|
||||
</p>
|
||||
</details>
|
||||
</div>
|
||||
<div className="px-4 py-4 sm:px-6">
|
||||
<a
|
||||
href={link.url}
|
||||
className="text-blue-600 hover:text-blue-700 flex justify-between items-center font-medium"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Go to Link
|
||||
<img
|
||||
className="w-1/2"
|
||||
src={link.image}
|
||||
alt={link.imageAlt}
|
||||
/>
|
||||
</a>
|
||||
<div className="flex items-center justify-evenly mt-4">
|
||||
{link.facebook && (
|
||||
<a
|
||||
href={link.facebook}
|
||||
target="_blank"
|
||||
title={link.title + " Facebook"}
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<FaFacebook />
|
||||
</a>
|
||||
)}
|
||||
{link.youtube && (
|
||||
<a
|
||||
href={link.youtube}
|
||||
target="_blank"
|
||||
title={link.title + "Youtube"}
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<FaYoutube />
|
||||
</a>
|
||||
)}
|
||||
{
|
||||
link.instagram && (
|
||||
<a href={link.instagram} target="_blank" title={link.title + "Instagram"} rel="noopener noreferrer">
|
||||
<FaInstagram />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
{
|
||||
link.vimeo && (
|
||||
<a href={link.vimeo} target="_blank" title={link.title + "Vimeo"} rel="noopener noreferrer">
|
||||
<FaVimeo />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
{
|
||||
link.x && (
|
||||
<a href={link.x} target="_blank" title={link.title + "Twitter"} rel="noopener noreferrer">
|
||||
<FaTwitter />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
{
|
||||
link.linkedin && (
|
||||
<a href={link.linkedin} target="_blank" title={link.title + "LinkedIn"} rel="noopener noreferrer">
|
||||
<FaLinkedin />
|
||||
</a>
|
||||
)
|
||||
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpfulLinks;
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import React from "react";
|
||||
import { FaEnvelope, FaPhone, FaPlay } from "react-icons/fa";
|
||||
import { Link, ScrollRestoration } from "react-router-dom";
|
||||
import ChurchBG from "../assets/NSBC2.png";
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div className=" -mx-2 -mt-3 relative">
|
||||
<ScrollRestoration />
|
||||
<div className="w-full">
|
||||
<img
|
||||
src={ChurchBG}
|
||||
className="w-full h-full object-cover object-center"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full flex bg-cover h-full absolute md:object-cover object-center object-contain -top-0 text-gray-50 justify-center items-center">
|
||||
<div className="p-[4px] rounded-xl w-full sm:w-fit md:p-5 inset-0 bg-black/70 dark:bg-slate-900/80">
|
||||
|
||||
<h1 className="w-full flex justify-center text-xl sm:text-2xl md:text-4xl">
|
||||
"Welcome to the House of Praise!"
|
||||
</h1>
|
||||
<p className="w-full text-sm sm:text-lg md:text-2xl flex justify-center my-3">
|
||||
North Shreve Baptist Church
|
||||
</p>
|
||||
<p className="w-full text-xs sm:text-sm md:text-2xl flex justify-center my-3">
|
||||
4930 Old Mooringsport Road Shreveport, LA 71107
|
||||
</p>
|
||||
|
||||
<div className="w-full text-xs sm:text-sm md:text-xl flex justify-between my-3">
|
||||
<a href="tel:318-425-2350" className="flex items-center"><FaPhone /> (318) 425-2350</a>
|
||||
<a href="mailto:office@northshrevebaptist.org" className="flex items-center"><FaEnvelope /> Email</a>
|
||||
</div>
|
||||
<p className="w-full text-xs sm:text-sm md:text-xl flex justify-center my-3">
|
||||
Rev. Cecil Marr, Pastor
|
||||
</p>
|
||||
<p className=" w-full text-xs sm:text-sm md:text-xl flex justify-center ">
|
||||
Steve Miller, Worship Leader
|
||||
</p>
|
||||
<div className="w-full flex justify-center my-3 pt-2">
|
||||
<button className="flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-2 md:text-lg md:px-10">
|
||||
Watch Past Services <FaPlay />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="p-2 max-w-lg mx-auto">
|
||||
<p className="pt-4 flex justify-between">
|
||||
<span>Sunday School / Bible study</span>
|
||||
<span>9:45 a.m.</span>
|
||||
</p>
|
||||
<p className="flex justify-between">
|
||||
<span>Sunday Morning Worship</span>
|
||||
<span>11:00 am.</span>
|
||||
</p>
|
||||
<p className="pb-4 flex justify-between">
|
||||
<span>
|
||||
Wednesday Evening Worship
|
||||
</span>
|
||||
<span>
|
||||
6:30 p.m.
|
||||
|
||||
</span>
|
||||
</p>
|
||||
<p className="pb-4 flex justify-center">
|
||||
<Link className="px-4 py-2 border border-transparent text-center text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-2 md:text-lg cursor-pointer md:px-10" to="/services">Click here to view the 2023 Worship Schedule for more details</Link>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
import React from "react";
|
||||
import { ScrollRestoration } from "react-router-dom";
|
||||
import Gap from "../assets/gap.png";
|
||||
import Scales from "../assets/Scales.png";
|
||||
import useDocumentTitle from "../hooks/useDocumentTitle";
|
||||
|
||||
const HowToBecomeAChristian = () => {
|
||||
useDocumentTitle('NSBC | How to Become a Christian');
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<ScrollRestoration />
|
||||
|
||||
<section className="mx-24 flex flex-col gap-6">
|
||||
<h1 className="text-3xl my-12 font-bold flex justify-center">
|
||||
How do I become a Christian?
|
||||
</h1>
|
||||
<div className="text-gray-700 my-3 grid grid-cols-2 gap-5">
|
||||
<section className="flex flex-col gap-5">
|
||||
<p>
|
||||
You're not here by accident. God loves you. He wants you to have a
|
||||
personal relationship with Him through Jesus, His Son. There is
|
||||
just one thing that separates you from God. That one thing is sin.
|
||||
</p>
|
||||
<p className="text-gray-700 my-3">
|
||||
The Bible describes sin in many ways. Most simply, sin is our
|
||||
failure to measure up to God's holiness and His righteous
|
||||
standards. We sin by things we do, choices we make, attitudes we
|
||||
show, and thoughts we entertain. We also sin when we fail to do
|
||||
right things. The Bible affirms our own experience - "there is
|
||||
none righteous, not even one." No matter how good we try to be,
|
||||
none of us does right things all the time.
|
||||
</p>
|
||||
<p className="text-gray-700 my-3">
|
||||
People tend to divide themselves into groups - good people and bad
|
||||
people. But God says that every person who has ever lived is a
|
||||
sinner, and that any sin separates us from God. No matter how we
|
||||
might classify ourselves, this includes you and me. We are all
|
||||
sinners.
|
||||
</p>
|
||||
<p className="text-red-700 my-3">
|
||||
"For all have sinned and come short of the glory of God." Romans
|
||||
3:23
|
||||
</p>
|
||||
</section>
|
||||
<img src={Gap} alt="" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="mx-24 flex my-7 flex-col gap-6 ">
|
||||
<div className="grid grid-cols-2 gap-5">
|
||||
<div>
|
||||
<img src={Scales} alt="" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-gray-700">
|
||||
Many people are confused about the way to God. Some think they
|
||||
will be punished or rewarded according to how good they are. Some
|
||||
think they should make things right in their lives before they try
|
||||
to come to God. Others find it hard to understand how Jesus could
|
||||
love them when other people don't seem to. But I have great news
|
||||
for you! God DOES love you! More than you can ever imagine! And
|
||||
there's nothing you can do to make Him stop! Yes, our sins demand
|
||||
punishment - the punishment of death and separation from God. But,
|
||||
because of His great love, God sent His only Son Jesus to die for
|
||||
our sins.
|
||||
</p>
|
||||
<p className="text-red-700 my-3">
|
||||
"God demonstrates His own love for us in this: While we were still
|
||||
sinners, Christ died for us." Romans 5:8
|
||||
</p>
|
||||
<p className="text-gray-700 my-3">
|
||||
For you to come to God you have to get rid of your sin problem.
|
||||
But, in our own strength, not one of us can do this! You can't
|
||||
make yourself right with God by being a better person. Only God
|
||||
can rescue us from our sins. He is willing to do this not because
|
||||
of anything you can offer Him, but JUST BECAUSE HE LOVES YOU!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-red-700 my-3">
|
||||
"He saved us, not because of righteous things we had done, but because
|
||||
of His mercy." Titus 3:5
|
||||
</p>
|
||||
<p className="text-gray-700 my-3">
|
||||
It's God's grace that allows you to come to Him - not your efforts to
|
||||
"clean up your life" or work your way to Heaven. You can't earn it.
|
||||
It's a free gift.
|
||||
</p>
|
||||
<p className="text-red-700 my-3">
|
||||
"For it is by grace you have been saved, through faith - and this not
|
||||
from yourselves, it is the gift of God - not by works, so that no one
|
||||
can boast." Ephesians 2:8-9
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HowToBecomeAChristian;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import React from 'react'
|
||||
import { useRouteError } from "react-router-dom";
|
||||
import useDocumentTitle from '../hooks/useDocumentTitle';
|
||||
const NotFound = () => {
|
||||
const error = useRouteError();
|
||||
useDocumentTitle('Not Found');
|
||||
|
||||
return (
|
||||
<div className='flex justify-center items-center h-screen'>
|
||||
<div className='w-[400px]'>
|
||||
<h1 className='text-red-700 w-full flex justify-center text-5xl'>404</h1>
|
||||
<p className='w-full flex justify-center'>
|
||||
{error.status} {error.message}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NotFound
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
import React from "react";
|
||||
import useDocumentTitle from "../hooks/useDocumentTitle";
|
||||
|
||||
const OnlineGiving = () => {
|
||||
useDocumentTitle('NSBC | Online Giving');
|
||||
return (
|
||||
<div className="bg-white max-w-4xl mx-auto">
|
||||
<h1 className="text-3xl text-center py-6">
|
||||
Online Giving and 'Text-to-Give'
|
||||
</h1>
|
||||
<p className="text-gray-700">
|
||||
You may now give to North Shreve Baptist Church electronically, via
|
||||
credit / debit card or through your checking account!
|
||||
</p>
|
||||
<p className="text-gray-700 text-center font-bold mt-6 mb-2">
|
||||
Please click on the link below to make a donation:
|
||||
</p>
|
||||
<p className="text-center py-4">
|
||||
<a
|
||||
href="https://northshreve.breezechms.com/give/online"
|
||||
target="_blank"
|
||||
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
||||
>
|
||||
Donate now
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-gray-700 py-4">
|
||||
You may also give via text message (text-to-give)! To begin, please text
|
||||
the dollar amount of your donation to (318) 702-5650. The first time you
|
||||
use this method, you will be prompted to enter your name, e-mail address
|
||||
and other relevant information about your donation. Subsequent donations
|
||||
will only require you to text 'give' to (318) 702-5650, and follow the
|
||||
prompts. You will receive a receipt for your gift by e-mail.
|
||||
</p>
|
||||
<p className="text-gray-700 py-4">
|
||||
Online and text-to-give methods are secure financial transactions
|
||||
enabled through our Breeze Church Management software. As with in-person
|
||||
donations, each donor will receive a statement of their financial giving
|
||||
at the end of the year, for tax reporting purposes. Thank you for
|
||||
supporting the ministries of North Shreve Baptist Church!
|
||||
</p>
|
||||
{/* <section className="py-12">
|
||||
<div className="container mx-auto">
|
||||
<h2 className="text-3xl font-bold mb-6">Online Giving</h2>
|
||||
<p className="text-gray-700">
|
||||
Thank you for considering giving to our church online. Your generosity helps support
|
||||
our mission and ministry. Please fill out the form below to make your online
|
||||
contribution.
|
||||
</p>
|
||||
|
||||
<form className="mt-6">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="firstName" className="block text-sm font-medium text-gray-700">
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="lastName" className="block text-sm font-medium text-gray-700">
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<label htmlFor="amount" className="block text-sm font-medium text-gray-700">
|
||||
Amount
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="amount"
|
||||
className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full py-3 px-4 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OnlineGiving;
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import React from "react";
|
||||
import useDocumentTitle from "../hooks/useDocumentTitle";
|
||||
|
||||
const Services = () => {
|
||||
useDocumentTitle('NSBC | Service Schedule');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="pt-4 flex justify-center text-4xl">
|
||||
2023 Worship Schedule
|
||||
</h1>
|
||||
<h2 className="pt-6 pb-1 flex justify-center text-2xl">Sunday Morning</h2>
|
||||
<div className="py-4 flex justify-center">
|
||||
<ul className="list-disc list-inside font-bold">
|
||||
<li>Sunday School at 9:45 a.m.</li>
|
||||
<li>Sunday Morning Worship at 11:00 a.m.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="py-4 max-w-lg mx-auto ">
|
||||
<p className="py-4">We have Sunday school classes for all age groups.</p>
|
||||
<p className="py-4">
|
||||
Members and guests are invited and encouraged to attend in-person;
|
||||
however, we also live-stream our Sunday morning service via our Facebook
|
||||
page.
|
||||
</p>
|
||||
<h2 className="pt-4 pb-1 flex justify-center text-2xl">Sunday Evening</h2>
|
||||
<p className="pt-2">
|
||||
We currently meet on the first Sunday evening of
|
||||
each month at 5:30 p.m. in our Family Life Center. Programs may consist
|
||||
of special speakers or exciting videos on current events. Make plans to
|
||||
join us! Any changes to our Sunday evening program will be posted on our
|
||||
website and our Facebook page.
|
||||
</p>
|
||||
<h2 className="py-4 flex justify-center text-2xl">Wednesday Evening</h2>
|
||||
<div className="flex justify-center">
|
||||
|
||||
<ul className="list-disc list-inside font-bold">
|
||||
<li>Wednesday Evening Worship at 6:30 p.m.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p className="py-4">
|
||||
|
||||
Our Wednesday evening program is well-attended and offers something for all
|
||||
ages!
|
||||
Youth and children have special programs and activities in the
|
||||
Family Life Center, while our adults meet in the Sanctuary for a time of
|
||||
worship, praise, testimonies, Bible study, and of course, prayer.
|
||||
We invite everyone, including our guests, to attend this special mid-week time with the family of God at North Shreve!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import React from "react";
|
||||
|
||||
const UpcomingEvents = () => {
|
||||
return (
|
||||
<div className="flex flex-col justify-center items-center">
|
||||
<div className="max-w-2xl mx-auto mb-32">
|
||||
|
||||
<h1 className="text-4xl text-center py-4">Upcoming Events</h1>
|
||||
<h3 className="text-left text-2xl py-2">Sunday October 22, 2023</h3>
|
||||
<ul>
|
||||
<li>Sunday School begins at 9:45 a.m.</li>
|
||||
<li>Morning Worship begins at 11:00 a.m.</li>
|
||||
</ul>
|
||||
<h3 className="text-left text-2xl py-2">Wednesday October 25, 2023</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Activities for children, youth and adults beginning at 6:30 p.m.
|
||||
</li>
|
||||
</ul>
|
||||
<h3 className="text-left text-2xl py-2">Sunday October 29, 2023</h3>
|
||||
<ul>
|
||||
<li>Sunday School begins at 9:45 a.m.</li>
|
||||
<li>Morning Worship begins at 11:00 a.m.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UpcomingEvents;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
Loading…
Reference in New Issue