update site contents

web/package.json

@@ -1,26 +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"
-  }
+    "name": "feedr-web",
+    "type": "module",
+    "scripts": {
+        "dev": "astro dev --host",
+        "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/src/components/FAQ.tsx

@@ -6,6 +6,30 @@ const FAQData = [
         question: "How often does Feedr check for new posts?",
         answer: "YouTube: 3 seconds, Twitch: 2 seconds",
     },
+    {
+        question: "Is Feedr free to use?",
+        answer: "Yes, Feedr is free to use, and will be free forever with YouTube and Twitch support as they have free API platforms. However, other social media platforms that we wish to support in the future may are not so kind and may require a subscription; however this is not planned at the moment due to legal reasons.",
+    },
+    {
+        question: "Which platforms does Feedr support?",
+        answer: "Currently, Feedr supports YouTube and Twitch. We plan to add more platforms in the future based on user feedback.",
+    },
+    {
+        question: "What platforms are planned for future support?",
+        answer: "We can't guarantee any specific platforms at the moment, and are pending developer agreements and costs. Bluesky is one platform we are looking into, but nothing is confirmed yet",
+    },
+    {
+        question: "Can I self-host Feedr?",
+        answer: "Yes! Feedr is open-source and can be self-hosted. You can find the source code on our GitHub repository. Please note that self-hosting will require your own server and API keys.",
+    },
+    {
+        question: "Where is Feedr hosted?",
+        answer: "Feedr is hosted on cloud infrastructure to ensure reliability and scalability. However, we are hosted in the EU and comply with GDPR regulations.",
+    },
+    {
+        question: "How can I provide feedback or report issues?",
+        answer: "You can provide feedback or report issues by visiting our GitHub repository and opening an issue. Feedr's Discord support is handled through our sister project, socialstats.app. Email support is not available at this time.",
+    },
 ];
 
 export const FAQ = () => (
@@ -59,9 +83,8 @@ const FAQBox = ({ defaultOpen, title, content }) => {
                     {title}
                 </h3>
                 <p
-                    className={`text-secondaryText pt-4 transition-height duration-300 overflow-hidden ${
-                        isOpen ? "max-h-96" : "max-h-0"
-                    }`}
+                    className={`text-secondaryText pt-4 transition-height duration-300 overflow-hidden ${isOpen ? "max-h-96" : "max-h-0"
+                        }`}
                 >
                     {content}
                 </p>
@@ -73,9 +96,8 @@ const FAQBox = ({ defaultOpen, title, content }) => {
                     viewBox="0 0 20 20"
                     fill="none"
                     xmlns="http://www.w3.org/2000/svg"
-                    className={`transition-all duration-500  ${
-                        isOpen ? "rotate-[180deg]" : "rotate-[90deg]"
-                    }`}
+                    className={`transition-all duration-500  ${isOpen ? "rotate-[180deg]" : "rotate-[90deg]"
+                        }`}
                 >
                     <path
                         d="M4.16732 12.5L10.0007 6.66667L15.834 12.5"

web/src/components/FeaturesDiagonal.tsx

@@ -6,7 +6,7 @@ import featTwitch from "../assets/images/feat_twitch.png";
 export const FeaturesDiagonal = () => {
     return (
         <section
-            className="lg:mb-16 w-full flex flex-col justify-center items-center bg-[#6530b2]"
+            className="lg:mb-16 w-full flex flex-col justify-center items-center bg-[#7a3ad8]"
             id="twitch"
         >
             <div className="shape-divider-bottom-1665696614">
@@ -19,7 +19,7 @@ export const FeaturesDiagonal = () => {
                 >
                     <path
                         d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
-                        className="bg-[#6530b2]  fill-[#6530b2]"
+                        className="bg-[#7a3ad8]  fill-[#7a3ad8]"
                     ></path>
                 </svg>
             </div>
@@ -29,7 +29,7 @@ export const FeaturesDiagonal = () => {
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: 0.2 }}
             >
-                <div className=" 2xl:w-[1150px] xl:w-[1050px]  md:w-4/5 flex justify-center bg-[#6530b2] pt-12 lg:pt-24 pb-8 lg:pb-20 mx-auto flex-col">
+                <div className=" 2xl:w-[1150px] xl:w-[1050px]  md:w-4/5 flex justify-center bg-[#6530b2] pt-12 lg:pt-24 pb-8 lg:pb-20 mx-auto flex-col rounded-3xl overflow-hidden">
                     <div className="w-3/4 lg:w-1/2 flex flex-col lg:mx-unset mx-auto">
                         <span className="block-subtitle">Twitch</span>
                         <h2 className="mt-10 mb-8 text-4xl lg:text-5xl block-big-title">
@@ -68,7 +68,7 @@ export const FeaturesDiagonal = () => {
                 >
                     <path
                         d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
-                        className="bg-[#6530b2] fill-[#6530b2]"
+                        className="bg-[#7a3ad8] fill-[#7a3ad8]"
                     ></path>
                 </svg>
             </div>

web/src/components/FeaturesYouTube.tsx

@@ -6,7 +6,7 @@ import featYoutube from "../assets/images/feat_youtube.png";
 export const FeaturesYouTube = () => {
     return (
         <section
-            className="lg:mb-16 w-full flex flex-col justify-center items-center bg-[#650013]"
+            className="lg:mb-16 w-full flex flex-col justify-center items-center bg-[#8b001a]"
             id="youtube"
         >
             <div className="shape-divider-bottom-1665696614">
@@ -19,7 +19,7 @@ export const FeaturesYouTube = () => {
                 >
                     <path
                         d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
-                        className="bg-[#650013]  fill-[#650013]"
+                        className="bg-[#8b001a]  fill-[#8b001a]"
                     ></path>
                 </svg>
             </div>
@@ -29,7 +29,7 @@ export const FeaturesYouTube = () => {
                 viewport={{ once: true }}
                 transition={{ duration: 0.5, delay: 0.2 }}
             >
-                <div className=" 2xl:w-[1150px] xl:w-[1050px]  md:w-4/5 flex justify-center bg-[#650013] pt-12 lg:pt-24 pb-8 lg:pb-20 mx-auto flex-col">
+                <div className="2xl:w-[1150px] xl:w-[1050px] md:w-4/5 flex justify-center bg-[#650013] pt-12 lg:pt-24 pb-8 lg:pb-20 mx-auto flex-col rounded-3xl overflow-hidden">
                     <div className="w-3/4 lg:w-1/2 flex flex-col lg:mx-unset mx-auto">
                         <span className="block-subtitle">YouTube</span>
                         <h2 className="mt-10 mb-8 text-4xl lg:text-5xl block-big-title">
@@ -69,7 +69,7 @@ export const FeaturesYouTube = () => {
                 >
                     <path
                         d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
-                        className="bg-[#650013] fill-[#650013]"
+                        className="bg-[#8b001a] fill-[#8b001a]"
                     ></path>
                 </svg>
             </div>

web/src/components/Navbar.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { SiGithub } from "react-icons/si";
+import { SiDiscord, SiGithub } from "react-icons/si";
 
 // @ts-ignore This is an image import
 import FeedrLogo from "../assets/images/feedr.png";
@@ -30,15 +30,15 @@ export const Navbar = () => {
                     exit={{ opacity: 0 }}
                 >
                     <a href="/" aria-label="Home">
-                        <div className="flex justify-start items-center grow basis-0">
-                            <div className="text-white mr-2 text-6xl">
+                        <div className="flex justify-start items-center">
+                            <div className="text-white text-6xl">
                                 <img
                                     src={FeedrLogo.src}
                                     alt="Feedr Logo"
-                                    className="w-10 h-10 rounded-full"
+                                    className="w-10 h-10 aspect-square rounded-full"
                                 />
                             </div>
-                            <div className="text-white font-['Inter'] font-bold text-xl">
+                            <div className="text-white font-bold text-xl">
                                 Feedr
                             </div>
                         </div>
@@ -69,17 +69,37 @@ export const Navbar = () => {
                     transition={{ duration: 0.3 }}
                     exit={{ opacity: 0 }}
                 >
-                    <div className="grow basis-0 justify-end hidden lg:flex">
+                    <div className="grow basis-0 justify-end hidden lg:flex gap-4">
                         <a
                             className="text-white main-border-gray rounded-xl
-           bg-bgDark2 hover:bg-bgDark3  border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm flex items-center"
+           bg-bgDark2 hover:bg-bgDark3 border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm inline-flex items-center whitespace-nowrap"
                             href="https://github.com/galvinpython/feedr"
                             target="_blank"
                             aria-label="source code"
                         >
                             <SiGithub className="mr-2" />
                             <span className="pt-px">Source code</span>
                         </a>
+                        <a
+                            className="text-white main-border-gray rounded-xl
+           bg-bgDark2 hover:bg-bgDark3 border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm inline-flex items-center whitespace-nowrap"
+                            href="https://github.com/galvinpython/feedr"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <SiDiscord className="mr-2" />
+                            Add to Discord
+                        </a>
+                        <a
+                            className="text-white main-border-gray rounded-xl
+           bg-bgDark2 hover:bg-bgDark3 border-gray-700 pl-6 pr-8 pt-2 pb-2 text-sm inline-flex items-center whitespace-nowrap"
+                            href="https://github.com/galvinpython/feedr"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <SiDiscord className="mr-2" />
+                            Support Server
+                        </a>
                     </div>
                 </motion.div>
                 <div
@@ -125,6 +145,24 @@ export const Navbar = () => {
                                 <SiGithub className="mr-2" />
                                 Source code
                             </a>
+                            <a
+                                className="outlined-button pl-6 pr-8 pt-2 pb-2  flex items-center"
+                                href="https://github.com/galvinpython/feedr"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <SiDiscord className="mr-2" />
+                                Add to Discord
+                            </a>
+                            <a
+                                className="outlined-button pl-6 pr-8 pt-2 pb-2  flex items-center"
+                                href="https://github.com/galvinpython/feedr"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <SiDiscord className="mr-2" />
+                                Support Server
+                            </a>
                         </div>
                     </motion.div>
                 )}

web/src/components/TrustedBy.tsx

@@ -14,7 +14,7 @@ export const TrustedBy = () => {
                 transition={{ duration: 0.5, delay: 0.2 }}
                 onViewportEnter={() => {
                     setTimeout(() => {
-                        setOdometerValue(213);
+                        setOdometerValue(387);
                     }, 500);
                 }}
             >

web/src/pages/invite/[...slug].astro

@@ -7,7 +7,7 @@ const { slug } = Astro.params;
 
 const redirects = {
     bot: "https://discord.com/",
-    server: "https://discord.gg/",
+    server: "https://discord.gg/3yCp4Ks8v5",
 };
 
 const destination = redirects[slug];