updated index file

app/images/index.tsx

@@ -1,5 +1,5 @@
 import GoTriangle from "./gotriangle-logo.png";
 
 export const GoTriangleLogo = ({ height }: { height: number }) => (
-  <img src={GoTriangle} style={{ height }} />
+  <img src={GoTriangle} style={{ height }} alt="GoTriangle Logo" />
 );

app/routes/__root._index.tsx

@@ -1,3 +1,89 @@
+import {
+  AtSign,
+  BusFront,
+  GithubIcon,
+  LinkedinIcon,
+  Map,
+  RecycleIcon,
+} from "lucide-react";
+
 export default function RootIndex() {
-  return <div>This is the index</div>;
+  return (
+    <div>
+      <div className="header w-full h-[700px] flex flex-col justify-end">
+        <div className="py-24 flex flex-col gap-6 text-white bg-gray-500/50">
+          <div className="w-5/6 mx-auto flex flex-col gap-6">
+            <h1 className="text-5xl font-bold">
+              Welcome to Simple Transit Site
+            </h1>
+            <h2 className="text-2xl font-medium">
+              A simple way to share transit agencies route schedule information
+            </h2>
+            <p>
+              This website is built on the idea that Transit agencies all use
+              the{" "}
+              <a className="link" href="https://gtfs.org/schedule/">
+                GTFS specification
+              </a>
+              . This website is auto generated on a schedule maps and tables
+              automatically to keep your website up to date.{" "}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div id="about" className="w-2/3 mx-auto flex flex-col gap-20 py-20">
+        <h2 className="text-4xl text-center font-medium">About</h2>
+        <div className="flex gap-6 items-center">
+          <RecycleIcon size={100} />
+          <div className="flex flex-col w-2/3">
+            <h3 className="text-xl font-medium">Updates automatically</h3>
+            <p>
+              Your schedules never stop changing and Simple Transit Site keeps
+              up with your pace by using your existing published schedule feed
+              to keep your website updated.
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-6 items-center">
+          <BusFront size={100} />
+          <div className="flex flex-col w-2/3">
+            <h3 className="text-xl font-medium">Uses the GTFS standard</h3>
+            <p>
+              The GTFS standard is used worldwide and this website can be
+              updated to work with any transit agency that has one.
+            </p>
+          </div>
+        </div>
+        <div className="flex gap-6 items-center">
+          <Map size={100} />
+          <div className="flex flex-col w-2/3">
+            <h3 className="text-xl font-medium">Maps and Schedules</h3>
+            <p>
+              Each route page has up to date maps and time table schedules for a
+              great experience for you riders.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div id="contact" className="w-2/3 mx-auto flex flex-col gap-10 py-20">
+        <h2 className="text-4xl text-center font-medium">Contact</h2>
+        <p>
+          Want to get your own Simple Transit Site? You can find this project
+          open on Github. If you need some help or if you have a special project
+          that you want to work on reach out to Walter.
+        </p>
+        <div className="flex gap-6 mx-auto">
+          <a href="https://www.linkedin.com/in/walter-k-jenkins/">
+            <LinkedinIcon size={30} className="hover:text-blue-500" />
+          </a>
+          <a href="https://github.com/AvidDabbler">
+            <GithubIcon size={30} className="hover:text-blue-500" />
+          </a>
+          <a href="mailto:[email protected]">
+            <AtSign size={30} className="hover:text-blue-500" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
 }

app/routes/__root.tsx

@@ -25,11 +25,11 @@ export default function RootTemplate() {
 
   return (
     <div>
-      <div className="w-full flex p-8 gap-8">
+      <div className="mx-auto flex py-8 gap-8 w-5/6">
         <Link to="/">
-          <GoTriangleLogo height={90} />
+          <GoTriangleLogo height={50} />
         </Link>
-        <div className="flex items-end ">
+        <div className="flex items-end gap-6">
           <DropdownMenu>
             <DropdownMenuTrigger>
               <span className="hover:text-blue-400">Routes</span>{" "}
@@ -44,9 +44,15 @@ export default function RootTemplate() {
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
+          <Link to={"/#about"}>
+            <span className="hover:text-blue-400">About</span>
+          </Link>
+          <Link to={"/#contact"}>
+            <span className="hover:text-blue-400">Contact</span>
+          </Link>
         </div>
       </div>
-      <div className="flex-col flex justify-center px-8">
+      <div className="flex-col flex justify-center">
         <Outlet />
       </div>
     </div>

app/tailwind.css

@@ -100,3 +100,11 @@ th {
 tr:nth-child(even) {
   background-color: #dddddd;
 }
+
+.link {
+  @apply text-gray-300 font-medium underline hover:text-blue-500;
+}
+
+.header {
+  background: url("/header.jpg") center/cover;
+}