├── src
    ├── react-app-env.d.ts
    ├── index.tsx
    ├── components
    │   ├── Copyright.tsx
    │   ├── Footer.tsx
    │   ├── HeroImage.tsx
    │   ├── NavBar.tsx
    │   ├── Information.tsx
    │   ├── GenerateNavbarLinks.tsx
    │   ├── Quote.tsx
    │   ├── InformationImage.tsx
    │   ├── NavbarLogo.tsx
    │   ├── Contact.tsx
    │   ├── NavbarLinks.tsx
    │   ├── Hero.tsx
    │   └── GenerateInformationCards.tsx
    ├── index.css
    ├── App.tsx
    └── data.ts
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── lighthouse.png
    ├── manifest.json
    └── index.html
├── postcss.config.js
├── tailwind.config.js
├── .gitignore
├── .github
    ├── dependabot.yml
    └── workflows
    │   └── automerge.yml
├── tsconfig.json
├── LICENSE
├── README.md
└── package.json


/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milliorn/landing-page/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milliorn/landing-page/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milliorn/landing-page/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/lighthouse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/milliorn/landing-page/HEAD/public/lighthouse.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
3 |   theme: {
4 |     extend: {},
5 |   },
6 |   plugins: [],
7 | };
8 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import App from "./App";
 4 | import "./index.css";
 5 | 
 6 | const root = ReactDOM.createRoot(
 7 |   document.getElementById("root") as HTMLElement,
 8 | );
 9 | 
10 | root.render(
11 |   <React.StrictMode>
12 |     <App />
13 |   </React.StrictMode>,
14 | );
15 | 


--------------------------------------------------------------------------------
/src/components/Copyright.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param {{ owner: string }} props
 3 |  */
 4 | export function Copyright({
 5 |   props,
 6 | }: {
 7 |   props: { owner: string };
 8 | }): JSX.Element {
 9 |   return (
10 |     <p className="p-8 text-center text-gray-50 hover:animate-pulse hover:underline">
11 |       <span className="text-lg">&copy;</span> {new Date().getFullYear()}{" "}
12 |       {props.owner}
13 |     </p>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .private
25 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   font-family:
 7 |     "Roboto",
 8 |     -apple-system,
 9 |     BlinkMacSystemFont,
10 |     "Segoe UI",
11 |     "Oxygen",
12 |     "Ubuntu",
13 |     "Cantarell",
14 |     "Fira Sans",
15 |     "Droid Sans",
16 |     "Helvetica Neue",
17 |     sans-serif;
18 | }
19 | 
20 | .animate {
21 |   animation: ease-in-out fadeIn 100s;
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { Copyright } from "./Copyright";
 2 | 
 3 | /**
 4 |  * @param {{ owner: string; }} props
 5 |  */
 6 | export function Footer(props: { owner: string }): JSX.Element {
 7 |   const url = "https://github.com/milliorn" as string;
 8 |   return (
 9 |     <footer className="bg-gray-800">
10 |       <a href={url} target="_blank" rel="noreferrer">
11 |         <Copyright props={props} />
12 |       </a>
13 |     </footer>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/HeroImage.tsx:
--------------------------------------------------------------------------------
 1 | /* create hero image */
 2 | export function HeroImage(): JSX.Element {
 3 |   return (
 4 |     <svg
 5 |       className="w-3/5 mx-auto text-gray-800 fill-current"
 6 |       xmlns="http://www.w3.org/2000/svg"
 7 |       viewBox="0 0 20 20"
 8 |     >
 9 |       <path d="M17 6V5h-2V2H3v14h5v4h3.25H11a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6zm-5.75 14H3a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5.75zM11 8v8h6V8h-6zm3 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
10 |     </svg>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # Dependabot configuration file
 2 | # Docs: https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 3 | 
 4 | version: 2
 5 | updates:
 6 |   - package-ecosystem: "github-actions"
 7 |     directory: "/"
 8 |     schedule:
 9 |       interval: "monthly"
10 | 
11 |   - package-ecosystem: "npm"
12 |     directory: "/"
13 |     schedule:
14 |       interval: "monthly"
15 |     ignore:
16 |       - dependency-name: "*"
17 |         update-types:
18 |           - "version-update:semver-major"
19 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/NavBar.tsx:
--------------------------------------------------------------------------------
 1 | import { NavbarLinks } from "./NavbarLinks";
 2 | import { NavbarLogo } from "./NavbarLogo";
 3 | 
 4 | /**
 5 |  * @param {{ logo: string; linkFirst: string; linkMiddle: string; linkLast: string; }} props
 6 |  */
 7 | export function NavBar(props: {
 8 |   logo: string;
 9 |   linkFirst: string;
10 |   linkMiddle: string;
11 |   linkLast: string;
12 | }): JSX.Element {
13 |   return (
14 |     <nav className="w-full p-2 mt-0 bg-gray-800">
15 |       <div className="flex flex-wrap items-center mx-auto ">
16 |         <NavbarLogo props={props} />
17 |         <NavbarLinks props={props} />
18 |       </div>
19 |     </nav>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/Information.tsx:
--------------------------------------------------------------------------------
 1 | import { GenerateInformationCards } from "./GenerateInformationCards";
 2 | 
 3 | /**
 4 |  * @param {{ infoHeading: string; img: (string | undefined)[]; paragraph: (string | undefined)[]; }} props
 5 |  */
 6 | export function Information(props: {
 7 |   infoHeading: string;
 8 |   img: (string | undefined)[];
 9 |   paragraph: (string | undefined)[];
10 | }): JSX.Element {
11 |   return (
12 |     <div className="pb-4 text-gray-900 sm:pb-8 bg-gray-50">
13 |       <h1 className="p-12 text-4xl font-extrabold text-center">
14 |         {props.infoHeading}
15 |       </h1>
16 |       <GenerateInformationCards props={props} />
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/GenerateNavbarLinks.tsx:
--------------------------------------------------------------------------------
 1 | import uuid from "react-uuid";
 2 | /**
 3 |  * @param {{ href: string; linkText: string }} props
 4 |  */
 5 | export function GenerateNavbarLinks({
 6 |   navbarLinksData,
 7 | }: {
 8 |   navbarLinksData: { href: string; linkText: string }[];
 9 | }): JSX.Element[] {
10 |   return navbarLinksData.map((link) => (
11 |     <li className="mr-3 sm:mb-2" key={uuid()}>
12 |       <a
13 |         className="inline-block px-4 py-2 text-gray-200 no-underline hover:animate-pulse hover:text-gray-200"
14 |         href={link.href}
15 |         target="_blank"
16 |         rel="noreferrer"
17 |       >
18 |         {link.linkText}
19 |       </a>
20 |     </li>
21 |   ));
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/Quote.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param {{ quote: string; author: string; }} props
 3 |  */
 4 | import { motion } from "framer-motion";
 5 | 
 6 | export function Quote(props: { quote: string; author: string }): JSX.Element {
 7 |   return (
 8 |     <div className="bg-gray-200 p-24">
 9 |       <motion.div
10 |         initial={{ opacity: 0, x: -100 }}
11 |         animate={{ opacity: 1, x: 0 }}
12 |         transition={{ duration: 5 }}
13 |         className="m-auto text-xl italic font-light text-center text-gray-800 sm:text-4xl"
14 |       >
15 |         {props.quote}
16 |       </motion.div>
17 |       <p className="mt-4 text-center font-bold capitalize sm:text-2xl">
18 |         - {props.author}
19 |       </p>
20 |     </div>
21 |   );
22 | }
23 | 


--------------------------------------------------------------------------------
/src/components/InformationImage.tsx:
--------------------------------------------------------------------------------
 1 | import { LazyLoadImage } from "react-lazy-load-image-component";
 2 | 
 3 | /**
 4 |  * @param {{ imgSrc: string | undefined; alt: string; pText: string | undefined; width: number height: number; }}
 5 |  */
 6 | export function InformationImage({
 7 |   card,
 8 | }: {
 9 |   card: {
10 |     imgSrc: string | undefined;
11 |     alt: string;
12 |     pText: string | undefined;
13 |     width: number;
14 |     height: number;
15 |   };
16 | }): JSX.Element {
17 |   return (
18 |     <div className="border-4 border-blue-900 rounded-xl ">
19 |       <LazyLoadImage
20 |         alt={card.alt}
21 |         height={card.height}
22 |         src={card.imgSrc}
23 |         width={card.width}
24 |       />
25 |     </div>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/NavbarLogo.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param {{ logo: string; linkFirst: string; linkMiddle: string; linkLast: string; }} props
 3 |  */
 4 | export function NavbarLogo({
 5 |   props,
 6 | }: {
 7 |   props: {
 8 |     logo: string;
 9 |     linkFirst: string;
10 |     linkMiddle: string;
11 |     linkLast: string;
12 |   };
13 | }): JSX.Element {
14 |   return (
15 |     <div className="flex justify-center w-full text-gray-50 sm:w-1/2 sm:justify-start">
16 |       <a
17 |         className="no-underline text-gray-50 hover:text-gray-50 hover:no-underline"
18 |         href="/"
19 |         target="_blank"
20 |         rel="noreferrer"
21 |       >
22 |         <span className="pl-4 text-2xl capitalize hover:animate-pulse">
23 |           {props.logo}
24 |         </span>
25 |       </a>
26 |     </div>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/Contact.tsx:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @param {{ h2: string; p: string; button: string; }} props
 3 |  */
 4 | export function Contact(props: {
 5 |   h2: string;
 6 |   p: string;
 7 |   button: string;
 8 | }): JSX.Element {
 9 |   return (
10 |     <div className="top-0 left-0 w-full h-full p-12 text-sm text-center sm:text-base text-gray-50 bg-gray-50">
11 |       <div className="relative p-4 mx-auto my-0 bg-gray-900 sm:w-11/12 h-3/6 top-1/4">
12 |         <h2 className="m-4 font-bold capitalize">{props.h2}</h2>
13 |         <p>{props.p}</p>
14 |         <button
15 |           type="button"
16 |           className="px-8 py-4 mx-auto my-4 capitalize bg-gray-50 border border-gray-900 shadow hover:animate-pulse hover:bg-blue-900 text-black hover:text-gray-50 rounded-xl hover:shadow-lg hover:border-transparent"
17 |         >
18 |           {props.button}
19 |         </button>
20 |       </div>
21 |     </div>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/src/components/NavbarLinks.tsx:
--------------------------------------------------------------------------------
 1 | import { GenerateNavbarLinks } from "./GenerateNavbarLinks";
 2 | 
 3 | /**
 4 |  * @param {{ logo: string; linkFirst: string; linkMiddle: string; linkLast: string; }} props
 5 |  */
 6 | export function NavbarLinks({
 7 |   props,
 8 | }: {
 9 |   props: {
10 |     logo: string;
11 |     linkFirst: string;
12 |     linkMiddle: string;
13 |     linkLast: string;
14 |   };
15 | }): JSX.Element {
16 |   const navbarLinksData = [
17 |     { href: "/", linkText: props.linkFirst },
18 |     { href: "/", linkText: props.linkMiddle },
19 |     { href: "/", linkText: props.linkLast },
20 |   ];
21 | 
22 |   return (
23 |     <div className="flex content-center w-full pt-4 capitalize sm:w-1/2 sm:justify-end">
24 |       <ul className="flex items-center justify-center flex-1 list-reset sm:flex-none">
25 |         {GenerateNavbarLinks({ navbarLinksData })}
26 |       </ul>
27 |     </div>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "checkJs": true,
 7 |     "noImplicitReturns": true,
 8 |     "noImplicitThis": true,
 9 |     "noImplicitAny": true,
10 |     "strictNullChecks": true,
11 |     "sourceMap": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "allowUnreachableCode": false,
14 |     "esModuleInterop": true,
15 |     "forceConsistentCasingInFileNames": true,
16 |     "isolatedModules": true,
17 |     "jsx": "react-jsx",
18 |     "module": "esnext",
19 |     "moduleResolution": "node",
20 |     "noEmit": true,
21 |     "noFallthroughCasesInSwitch": true,
22 |     "resolveJsonModule": true,
23 |     "skipLibCheck": true,
24 |     "strict": true,
25 |     "noUnusedLocals": true,
26 |     "noUnusedParameters": true
27 |   },
28 |   "include": ["src"],
29 |   "exclude": ["node_modules"]
30 | }
31 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { Contact } from "./components/Contact";
 2 | import { Footer } from "./components/Footer";
 3 | import { Hero } from "./components/Hero";
 4 | import { Information } from "./components/Information";
 5 | import { NavBar } from "./components/NavBar";
 6 | import { Quote } from "./components/Quote";
 7 | import { heading, img, links, paragraphText, text } from "./data";
 8 | 
 9 | /* main app */
10 | export default function App(): JSX.Element {
11 |   return (
12 |     <div className="m-0 mx-auto antialiased bg-gray-900 2xl:container">
13 |       <NavBar
14 |         linkFirst={links[0]}
15 |         linkLast={links[2]}
16 |         linkMiddle={links[1]}
17 |         logo={text[3]}
18 |       />
19 |       <Hero bText={text[0]} hText={heading[0]} pText={paragraphText[3]} />
20 |       <Information
21 |         img={img}
22 |         infoHeading={heading[1]}
23 |         paragraph={paragraphText}
24 |       />
25 |       <Quote author={text[2]} quote={text[1]} />
26 |       <Contact button={text[0]} h2={heading[2]} p={paragraphText[4]} />
27 |       <Footer owner={text[4]} />
28 |     </div>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Scott Milliorn
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/Hero.tsx:
--------------------------------------------------------------------------------
 1 | import { HeroImage } from "./HeroImage";
 2 | 
 3 | /**
 4 |  * @param {{ hText: string; pText: string; bText: string; }} props
 5 |  */
 6 | export function Hero(props: {
 7 |   hText: string;
 8 |   pText: string;
 9 |   bText: string;
10 | }): JSX.Element {
11 |   return (
12 |     <div className="flex flex-col items-center mx-auto mb-12 sm:flex-row sm:mb-24">
13 |       {/*<!--Left Col-->*/}
14 |       <div className="flex flex-col items-start justify-center w-full px-6 pt-12 pb-24 lg:w-1/2 text-gray-50">
15 |         <h1 className="mx-auto my-4 text-4xl font-bold capitalize md:text-5xl">
16 |           {props.hText}
17 |         </h1>
18 |         <p className="my-4 leading-normal text-center text-gray-200 sm:mx-auto">
19 |           {props.pText}
20 |         </p>
21 |         <button
22 |           type="button"
23 |           className="px-8 py-4 mx-auto my-4 capitalize bg-gray-50 border border-gray-900 shadow hover:animate-pulse hover:bg-blue-900 text-black hover:text-gray-50 rounded-xl hover:shadow-lg hover:border-transparent"
24 |         >
25 |           {props.bText}
26 |         </button>
27 |       </div>
28 |       {/*<!--Right Col-->*/}
29 |       <div className="w-full text-center lg:w-1/2 lg:py-6">
30 |         {/*<!--Add your product image here-->*/}
31 |         <HeroImage />
32 |       </div>
33 |     </div>
34 |   );
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/GenerateInformationCards.tsx:
--------------------------------------------------------------------------------
 1 | import uuid from "react-uuid";
 2 | import { InformationImage } from "./InformationImage";
 3 | 
 4 | /**
 5 |  * @param {{ infoHeading: string; img: (string | undefined)[]; paragraph: (string | undefined)[]; }}
 6 |  */
 7 | export function GenerateInformationCards({
 8 |   props,
 9 | }: {
10 |   props: {
11 |     infoHeading: string;
12 |     img: (string | undefined)[];
13 |     paragraph: (string | undefined)[];
14 |   };
15 | }): JSX.Element {
16 |   const informationCardsData = [
17 |     {
18 |       imgSrc: props.img[0],
19 |       alt: "image1",
20 |       pText: props.paragraph[0],
21 |       width: 1470,
22 |       height: 980,
23 |     },
24 |     {
25 |       imgSrc: props.img[1],
26 |       alt: "image2",
27 |       pText: props.paragraph[1],
28 |       width: 935,
29 |       height: 624,
30 |     },
31 |     {
32 |       imgSrc: props.img[2],
33 |       alt: "image3",
34 |       pText: props.paragraph[2],
35 |       width: 935,
36 |       height: 624,
37 |     },
38 |   ];
39 | 
40 |   return (
41 |     <div className="gap-16 mx-4 space-y-2 md:space-y-0 md:grid md:grid-cols-3">
42 |       {informationCardsData.map((card) => (
43 |         <div className="w-full hover:shadow-2xl" key={uuid()}>
44 |           <InformationImage card={card} />
45 |           <p className="p-2">{card.pText}</p>
46 |         </div>
47 |       ))}
48 |     </div>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/.github/workflows/automerge.yml:
--------------------------------------------------------------------------------
 1 | name: Dependabot reviewer
 2 | 
 3 | on: pull_request_target
 4 | 
 5 | permissions:
 6 |   pull-requests: write
 7 |   contents: write
 8 | 
 9 | jobs:
10 |   review-dependabot-pr:
11 |     runs-on: ubuntu-latest
12 |     if: ${{ github.event.pull_request.user.login == 'dependabot[bot]' }}
13 |     steps:
14 |       - name: Dependabot metadata
15 |         id: dependabot-metadata
16 |         uses: dependabot/fetch-metadata@v2.4.0
17 | 
18 |       - name: Approve and auto-merge minor and patch updates
19 |         if: ${{ steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor' }}
20 |         run: |
21 |           gh pr review "$PR_URL" --approve -b "✅ Auto-approved: This pull request includes a **patch** or **minor** update."
22 |           gh pr merge "$PR_URL" --squash --auto
23 |         env:
24 |           PR_URL: ${{ github.event.pull_request.html_url }}
25 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
26 | 
27 |       - name: Deny major updates
28 |         if: ${{ steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' }}
29 |         run: |
30 |           gh pr review "$PR_URL" --request-changes -b "🚫 Denied: This PR includes a **major update**, which is not allowed."
31 |           gh pr close "$PR_URL"
32 |         env:
33 |           PR_URL: ${{ github.event.pull_request.html_url }}
34 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
35 | 


--------------------------------------------------------------------------------
/src/data.ts:
--------------------------------------------------------------------------------
 1 | const paragraphText = [
 2 |   "Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit eos ea nostrum, quas molestias autem veniam natus deserunt et obcaecati commodi eveniet illum aliquid quo, voluptate est ipsum idperferendis?",
 3 |   "Lorem ipsum dolor sit amet consectetur adipisicing. Culpa, soluta molestiae nihil nam, at ea dolore debitis maxime aliquam adipisci, illum amet pariatur corrupti ipsam delectus repellat quod repudiandae minus?",
 4 |   "Lorem ipsum dolor sit amet consectetur. Tempora, nihil quo. Aliquam excepturi quaerat exercitationem reprehenderit, maxime saepe! Nostrum repudiandae, amet culpa iusto recusandae aliquid. Dolor iure saepe nobis fugit.",
 5 |   "Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 6 |   "Sign up for more lorem ipsum",
 7 | ];
 8 | 
 9 | const links = ["link 1", "link 2", "link 3"] as const;
10 | 
11 | const heading = [
12 |   "react tailwind",
13 |   "information heading",
14 |   "join us! lorem ipsum",
15 | ] as const;
16 | 
17 | const text = [
18 |   "sign up",
19 |   "Nihil et nobis aperiam natus quod quos quisquam quasi earum possimus amet obcaecati excepturi, ratione reprehenderit! Rem, in!",
20 |   "anonymous",
21 |   "header logo",
22 |   "Scott Milliorn",
23 | ] as const;
24 | 
25 | const img = [
26 |   "https://images.unsplash.com/photo-1633356122102-3fe601e05bd2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
27 |   "https://images.unsplash.com/photo-1581276879432-15e50529f34b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
28 |   "https://images.unsplash.com/photo-1569748130764-3fed0c102c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
29 | ];
30 | 
31 | export { paragraphText, links, heading, text, img };
32 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Landing Page</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Landing Page
 2 | 
 3 | [![CodeQL](https://github.com/milliorn/Landing-Page/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/milliorn/Landing-Page/actions/workflows/github-code-scanning/codeql)
 4 | [![pages-build-deployment](https://github.com/milliorn/Landing-Page/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/milliorn/Landing-Page/actions/workflows/pages/pages-build-deployment)
 5 | 
 6 | This repository contains a template landing page site built using React and Tailwind CSS. It provides a starting point for creating beautiful and responsive landing pages.
 7 | 
 8 | ## Getting Started
 9 | 
10 | To get started with the project, follow these steps:
11 | 
12 | 1. Clone the repository
13 | 2. Install the dependencies: `npm install`
14 | 3. Start the development server: `npm start`
15 | 
16 | The above command will run the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser. The page will automatically reload when you make changes.
17 | 
18 | ## Building for Production
19 | 
20 | To build the app for production, use the following command `npm run build`
21 | 
22 | This command will create a production-ready build of the app in the `build` folder. The build is optimized for performance and the filenames include hashes for cache busting.
23 | 
24 | ## Deployment
25 | 
26 | To deploy the app, you can use the following command `npm run deploy`
27 | 
28 | This command will deploy the app to the GitHub Pages. You can customize the deployment configuration in the `package.json` file.
29 | 
30 | ## Learn More
31 | 
32 | To learn more about React, check out the [React documentation](https://reactjs.org/).
33 | 
34 | To learn more about Tailwind CSS, check out the [Tailwind CSS documentation](https://tailwindcss.com/).
35 | 
36 | ## License
37 | 
38 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
39 | 
40 | ## Preview
41 | 
42 | ![Landing Page](public/lighthouse.png)
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "landing-page",
 3 |   "version": "0.1.0",
 4 |   "description": "Template landing page site using React with Tailwind",
 5 |   "keywords": [
 6 |     "css",
 7 |     "html",
 8 |     "javascript",
 9 |     "js",
10 |     "landing page",
11 |     "react",
12 |     "tailwind"
13 |   ],
14 |   "homepage": "http://milliorn.github.io/landing-page",
15 |   "bugs": {
16 |     "email": "scottmilliorn@gmail.com",
17 |     "url": "https://github.com/milliorn/landing-page/issues"
18 |   },
19 |   "license": "MIT",
20 |   "author": {
21 |     "email": "scottmilliorn@gmail.com",
22 |     "name": "Scott Milliorn",
23 |     "url": "https://github.com/milliorn"
24 |   },
25 |   "repository": {
26 |     "repository": {
27 |       "type": "git",
28 |       "url": "https://github.com/milliorn/landing-page.git"
29 |     }
30 |   },
31 |   "private": true,
32 |   "dependencies": {
33 |     "framer-motion": "^12.23.24",
34 |     "react": "18.3.1",
35 |     "react-dom": "18.3.1",
36 |     "react-lazy-load-image-component": "^1.6.3",
37 |     "react-scripts": "5.0.1",
38 |     "react-uuid": "^2.0.0"
39 |   },
40 |   "scripts": {
41 |     "build": "react-scripts build",
42 |     "deploy": "gh-pages -d build",
43 |     "eject": "react-scripts eject",
44 |     "predeploy": "npm run build",
45 |     "start": "react-scripts start"
46 |   },
47 |   "eslintConfig": {
48 |     "extends": [
49 |       "react-app"
50 |     ]
51 |   },
52 |   "browserslist": {
53 |     "production": [
54 |       ">0.2%",
55 |       "not dead",
56 |       "not op_mini all"
57 |     ],
58 |     "development": [
59 |       "last 1 chrome version",
60 |       "last 1 firefox version",
61 |       "last 1 safari version"
62 |     ]
63 |   },
64 |   "devDependencies": {
65 |     "@types/node": "^20.19.24",
66 |     "@types/react": "^18.2.34",
67 |     "@types/react-dom": "^18.2.17",
68 |     "@types/react-lazy-load-image-component": "^1.6.4",
69 |     "autoprefixer": "10.4.22",
70 |     "gh-pages": "6.3.0",
71 |     "postcss": "8.5.6",
72 |     "tailwindcss": "3.4.18",
73 |     "typescript": "^4.9.5"
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------