feat: site

web/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "tabWidth": 4
+}

web/README.md

@@ -0,0 +1 @@
+Theme taken from https://github.com/matt765/Tailcast

web/astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from "astro/config";
+import react from "@astrojs/react";
+import tailwind from "@astrojs/tailwind";
+
+export default defineConfig({
+    integrations: [react(), tailwind()],
+    output: "static",
+});

web/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "feedr-web",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/tailwind": "^5.1.0",
+    "@fontsource/inter": "^5.0.18",
+    "@number-flow/react": "^0.5.9",
+    "@skyra/discord-components-react": "^3.6.1",
+    "astro": "^4.9.2",
+    "framer-motion": "^11.2.10",
+    "react-icons": "^5.5.0",
+    "tailwindcss": "^3.4.3"
+  },
+  "devDependencies": {
+    "@astrojs/react": "^3.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}

web/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+Disallow: /api
+Disallow: /invite

web/src/assets/icons/CheckArrowIcon.jsx

@@ -0,0 +1,13 @@
+export const CheckArrowIcon = () => (
+    <div className="rounded-full bg-transparent w-5 h-5 flex justify-center items-center mr-4">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 512 512"
+            width="20px"
+            height="20px"
+            className="fill-secondaryColor"
+        >
+            <path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
+        </svg>
+    </div>
+);

web/src/assets/icons/CloseIcon.jsx

@@ -0,0 +1,9 @@
+export const CloseIcon = () => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 320 512"
+        fill="currentColor"
+    >
+        <path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" />
+    </svg>
+);

web/src/assets/icons/QuoteIcon.jsx

@@ -0,0 +1,10 @@
+export const QuoteIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 448 512"
+    className="fill-quoteIconColor"
+    width="35px"    
+  >
+    <path d="M0 216C0 149.7 53.7 96 120 96h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V320 288 216zm256 0c0-66.3 53.7-120 120-120h8c17.7 0 32 14.3 32 32s-14.3 32-32 32h-8c-30.9 0-56 25.1-56 56v8h64c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H320c-35.3 0-64-28.7-64-64V320 288 216z" />
+  </svg>
+);

web/src/components/DiscordMessageEmbed.tsx

@@ -0,0 +1,41 @@
+// I was testing something to use at a later date :p
+
+import {
+    DiscordMessages,
+    DiscordMessage,
+    DiscordEmbed,
+    DiscordEmbedFields,
+    DiscordButton,
+    DiscordAttachments,
+    DiscordActionRow,
+} from "@skyra/discord-components-react";
+
+export const DiscordMessageEmbed = () => (
+    <section>
+        <DiscordMessages noBackground>
+            <DiscordMessage profile="favna">
+                <b>MrBeast</b> uploaded a new video!
+                <DiscordEmbed
+                    slot="embeds"
+                    color="#ff0000"
+                    embed-title="Would You Risk Drowning for $500,000?"
+                >
+                    <DiscordEmbedFields slot="fields">
+                        <img
+                            src="https://i.ytimg.com/vi/uyiG6uw-6pA/maxresdefault.jpg"
+                            width="720"
+                            alt="lit-logo"
+                        />
+                    </DiscordEmbedFields>
+                </DiscordEmbed>
+                <DiscordAttachments slot="components">
+                    <DiscordActionRow>
+                        <DiscordButton url="https://www.youtube.com/watch?v=uyiG6uw-6pA">
+                            👀 Watch
+                        </DiscordButton>
+                    </DiscordActionRow>
+                </DiscordAttachments>
+            </DiscordMessage>
+        </DiscordMessages>
+    </section>
+);

web/src/components/FAQ.tsx

@@ -0,0 +1,91 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+const FAQData = [
+    {
+        question: "How often does Feedr check for new posts?",
+        answer: "YouTube: 3 seconds, Twitch: 2 seconds",
+    },
+];
+
+export const FAQ = () => (
+    <section className="relative -mt-8 sm:mt-0 pt-12 sm:pt-16 pb-16 bg-blueGray-50 overflow-hidden">
+        <div className="absolute -top-10" id="FAQ" />
+        <motion.div
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+        >
+            <div className="relative z-10 container px-2 sm:px-8 lg:px-4 mx-auto w-11/12 sm:w-full">
+                <div className="md:max-w-4xl mx-auto">
+                    <p className="mb-7 block-subtitle text-center">
+                        Have any questions?
+                    </p>
+                    <h2 className="mb-16 block-big-title text-center">
+                        Frequently Asked Questions
+                    </h2>
+                    <div className="mb-11 flex flex-wrap -m-1">
+                        {FAQData.map((item, index) => (
+                            <div
+                                className="w-full p-1"
+                                key={`${item.question}-${index}`}
+                            >
+                                <FAQBox
+                                    title={item.question}
+                                    content={item.answer}
+                                    key={`${item.question}-${item.answer}`}
+                                    defaultOpen={index === 0}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </motion.div>
+    </section>
+);
+
+const FAQBox = ({ defaultOpen, title, content }) => {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    return (
+        <div
+            className="pt-2 sm:pt-6 pb-2 px-3 sm:px-8  rounded-3xl bg-bgDark3 main-border-gray-darker mb-4 relative hover:bg-bgDark3Hover cursor-pointer transition"
+            onClick={() => setIsOpen(!isOpen)}
+        >
+            <div className="flex flex-col p-2  justify-center items-start">
+                <h3 className=" content-title pt-3 sm:pt-0 pr-8 sm:pr-0">
+                    {title}
+                </h3>
+                <p
+                    className={`text-secondaryText pt-4 transition-height duration-300 overflow-hidden ${
+                        isOpen ? "max-h-96" : "max-h-0"
+                    }`}
+                >
+                    {content}
+                </p>
+            </div>
+            <div className="absolute top-6 right-4 sm:top-8 sm:right-8">
+                <svg
+                    width="28px"
+                    height="30px"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className={`transition-all duration-500  ${
+                        isOpen ? "rotate-[180deg]" : "rotate-[90deg]"
+                    }`}
+                >
+                    <path
+                        d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"
+                        stroke="#4F46E5"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    ></path>
+                </svg>
+            </div>
+        </div>
+    );
+};

web/src/components/Features1.jsx

@@ -0,0 +1,93 @@
+import { motion } from "framer-motion";
+
+import feature1 from "../assets/images/feature1.jpg";
+import feature2 from "../assets/images/feature2.jpg";
+import feature3 from "../assets/images/feature3.jpg";
+import feature4 from "../assets/images/feature4.jpg";
+import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
+
+export const Features1 = () => {
+    return (
+        <section
+            className="w-full bg-bgDark2 pt-24 -mt-8  mb-8 sm:-mt-8 sm:mb-24 xl:-mt-8 2xl:mt-0    md:pt-[12vw] lg:pt-16"
+            id="features"
+        >
+            <motion.div
+                initial={{ opacity: 0 }}
+                whileInView={{ opacity: 1 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+            >
+                <div className="flex flex-wrap items-center 2xl:w-[1450px] xl:w-[1300px] w-11/12 mx-auto md:pl-4 xl:pr-16 xl:pl-16">
+                    <div className="w-full lg:w-1/2 mb-12 lg:mb-0">
+                        <div className="mx-auto lg:mx-auto w-11/12 sm:w-4/5 md:w-3/4 lg:w-unset">
+                            <span className="block-subtitle">
+                                Embrace Innovation
+                            </span>
+                            <h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
+                                Unlike any tool you used before
+                            </h2>
+                            <p className="mb-10 text-secondaryText leading-loose">
+                                Discover a new level of data analysis with our
+                                innovative and user-friendly platform. Transform
+                                your business needs with actionable insights.
+                            </p>
+                            <ul className="mb-6 text-primaryText">
+                                <li className="mb-4 flex">
+                                    <CheckArrowIcon />
+                                    <span>Real-time data visualization</span>
+                                </li>
+                                <li className="mb-4 flex">
+                                    <CheckArrowIcon />
+                                    <span>Advanced predictive analytics</span>
+                                </li>
+                                <li className="mb-4 flex">
+                                    <CheckArrowIcon />
+                                    <span>Seamless integration with APIs</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div className="w-3/4 mx-auto lg:w-1/2 flex flex-wrap lg:-mx-4 sm:pr-8 lg:pt-10 justify-center lg:pl-4 xl:px-8">
+                        <div className="mb-8 lg:mb-0 w-full sm:w-1/2 px-2 lg:px-0">
+                            <div className="mb-4 py-3 pl-3 pr-2 rounded">
+                                <img
+                                    src={feature1.src}
+                                    alt="Feature image 1"
+                                    className="rounded-xl  main-border-gray mx-auto sm:mx-unset"
+                                    aria-label="Feature image 1"
+                                />
+                            </div>
+                            <div className="py-3 pl-3 pr-2 rounded ">
+                                <img
+                                    src={feature2.src}
+                                    alt="Feature image 2"
+                                    className="rounded-xl  main-border-gray mx-auto sm:mx-unset"
+                                    aria-label="Feature image 2"
+                                />
+                            </div>
+                        </div>
+                        <div className="w-1/2 lg:mt-20  pt-12 lg:pt-0 px-2 hidden sm:inline-block">
+                            <div className="mb-4 py-3 pl-3 pr-2 rounded-lg ">
+                                <img
+                                    src={feature3.src}
+                                    alt="Feature image 3"
+                                    className="rounded-xl  main-border-gray"
+                                    aria-label="Feature image 3"
+                                />
+                            </div>
+                            <div className="py-3 pl-3 pr-2 rounded-lg ">
+                                <img
+                                    src={feature4.src}
+                                    alt="Feature image 4"
+                                    className="rounded-xl  main-border-gray"
+                                    aria-label="Feature image 4"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </section>
+    );
+};

web/src/components/Features2.jsx

@@ -0,0 +1,68 @@
+import { motion } from "framer-motion";
+
+import feature5 from "../assets/images/feature5.jpg";
+import feature6 from "../assets/images/feature6.jpg";
+import { CheckArrowIcon } from "../assets/icons/CheckArrowIcon";
+
+export const Features2 = () => (
+    <section className="w-full bg-bgDark2 mt-12 sm:mt-24 mb-12 lg:my-20 lg:mb-24 pt-4">
+        <motion.div
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+        >
+            <div className="flex flex-wrap items-center 2xl:w-[1450px] xl:w-[1300px] w-11/12 mx-auto md:pl-4 xl:pr-16 xl:pl-16">
+                <div className="w-11/12 sm:w-3/4 mx-auto lg:w-1/2 flex flex-wrap lg:-mx-4 sm:pr-8 justify-center order-last lg:order-first">
+                    <div className="mb-8 lg:mb-0 w-full px-2 lg:pl-16 flex flex-col justify-center md:pl-8">
+                        <div className="mb-4 py-3 md:pl-3 md:pr-20 lg:pr-12 rounded">
+                            <img
+                                src={feature5.src}
+                                alt="Feature image 5"
+                                className="rounded-xl  main-border-gray"
+                            />
+                        </div>
+                        <div className="py-3 md:pl-20 lg:pl-12 md:pr-2 rounded ">
+                            <img
+                                src={feature6.src}
+                                alt="Feature image 6"
+                                className="rounded-xl  main-border-gray"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="w-full lg:w-1/2 mb-12 lg:mb-0 xl:pl-8">
+                    <div className="mx-auto lg:mx-auto w-11/12 sm:w-4/5 md:w-3/4 lg:w-unset">
+                        <span className="block-subtitle">
+                            Make Data-Driven Decisions
+                        </span>
+                        <h2 className="mt-6 mb-8 text-4xl lg:text-5xl block-big-title">
+                            Issue tracking you’ll enjoy using
+                        </h2>
+                        <p className="mb-12 text-secondaryText leading-loose">
+                            Monitor and track data issues with ease using our
+                            intuitive and efficient issue tracking system. Stay
+                            ahead of potential problems and improve your
+                            workflow.
+                        </p>
+                        <ul className="mb-6 text-primaryText">
+                            <li className="mb-4 flex">
+                                <CheckArrowIcon />
+                                <span>Collaborative environment</span>
+                            </li>
+                            <li className="mb-4 flex">
+                                <CheckArrowIcon />
+                                <span>Smart issue categorization</span>
+                            </li>
+                            <li className="mb-4 flex">
+                                <CheckArrowIcon />
+                                <span>Customizable notifications</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </motion.div>
+    </section>
+);