From 6f813c4ad4caa877ae679bb619715930c6e3dbb4 Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 5 Oct 2024 17:22:48 -0700
Subject: add about/faq page with more information

---
 src/components/Footer/Footer.tsx |  8 +---
 src/pages/about/index.tsx        | 97 ++++++++++++++++++++++++++++++++++++++++
 src/pages/stats/[slug].tsx       |  1 -
 3 files changed, 99 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/about/index.tsx

(limited to 'src')
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 8686e4c..7c4f062 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -4,16 +4,12 @@ const Footer = () => {
 	return (
 		<footer>
 			<div className="text-center mt-4">
-				<p className="font-bold">Information</p>
+			<a className="font-bold hover:underline text-blue-600 animate-pulse"href="/about">About</a>
 				<p className="text-m">
-					Information is collected once per hour. Data collection will stop upon
-					graduation
-					<br />
 					This page is in no way affiliated with Phase Connect or with any of
 					the channels listed here.
 					<br />
-					Data Collection Started: 2022-04-01 (Earlier data may not be fully
-					accurate)
+					
 				</p>
 				<p className="p-4">
 					<a
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
new file mode 100644
index 0000000..4974fd6
--- /dev/null
+++ b/src/pages/about/index.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import "../../app/globals.css";
+import TitleBar from '@/components/TitleBar/TitleBar';
+import Footer from '@/components/Footer/Footer';
+import Head from 'next/head';
+
+
+const About: React.FC = () => {
+  return (
+    <>
+    <Head>
+      <title>PhaseTracker - About</title>
+      <meta name="description" content="Information and Frequently Asked Questions about PhaseTracker" />
+    </Head>
+    <TitleBar title="About" backgroundColor="black" showHomeButton />
+    <div className="max-w-4xl mx-auto p-6">
+      <h1 className="text-4xl font-bold text-center mb-8">Information and Frequently Asked Questions</h1>
+      <div className="space-y-6">
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">What is this?</h2>
+          <p className="text-gray-700">
+            This is PhaseTracker. It tracks the YouTube subscriber count for members of the VTuber group Phase Connect. It is also the primary demo
+            of my boilerplate project, <a className="text-blue-600 hover:underline" href="https://github.com/pinapelz/NijiTrack>">NijiTrack</a> which allows
+            you to setup a subscriber tracker for any subset of YouTube channels (or VTuber organization).
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">Affiliation</h2>
+          <p className="text-gray-700">
+            This project is <strong>not</strong> affiliated with Phase Connect or any of its members. It is also not affiliated with any other VTuber related subscriber tracker
+            (although partially inspired by them).
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">What's Collected?</h2>
+          <p className="text-gray-700">
+            Some statitics such as video count or channel view count are provided for your convenience. These are generated hourly and are not saved historically <br/><br/>
+            Only subscriber count, channel name, profile picture is saved historically.
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">How often?</h2>
+          <p className="text-gray-700">
+            The data in the tables will update every hour. Historical data is recorded once a day at 12:00 AM PST. This number will then become the next point in the graph.
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">Graduation</h2>
+          <p className="text-gray-700">
+            If someone graduates (no longer active in Phase Connect), their data will be kept in the database but will no longer be updated. The main table will also no longer show a row for them.
+            You'll still be able to view their data on the main graph on the homepage.
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">Why are there so few datapoints before April 1st 2022?</h2>
+          <p className="text-gray-700">
+            This project only started collecting data on April 1st, 2022. Any data before that was manually recovered by me through Wayback Machine and various other sources.
+            <br/><br/>I've done this mostly for appearence sake, so that the graphs can start from the roughly the beginning of the channel's creation.
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">This new channel's data point doesn't start at 0</h2>
+          <p className="text-gray-700">
+            Data is collected hourly. Only "verifiable" datapoints are recorded, its hard to catch a channel at exactly 0 subsribers. When a new channel debuts, it'll also
+            take some time for the system to notice that they are a part of Phase Connect.
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">Tech Stack?</h2>
+          <p className="text-gray-700">
+            Next, Python, and PostgreSQL. The big graph on the homepage is pre-rendered with Plotly, other graphs are made using CanvasJS
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">Can I get the data somehow?</h2>
+          <p className="text-gray-700">
+            I'll have a way for people to either grab a periodic database dump or CSV of the data soon. Please wait a bit longer.
+          </p>
+        </div>
+        <div className="border-b pb-4">
+          <h2 className="text-2xl font-semibold mb-2">A Personal Request</h2>
+          <p className="text-gray-700">
+            I ask that you refrain from using this data to harass or negatively compare the members of Phase Connect or any members in the VTubing community.
+            There is no race, please just enjoy the content.
+            That said, you are free to use this data for any purpose.
+            <br/><br/>
+            Phase Connectのメンバーや他のVTuberを嫌がらせたり、否定的に比較したりするために、このデータを使用することはお控えください。これは競争ではありませんので、動画や配信をお楽しみください。このデータはあらゆる目的でご自由にご利用いただけます。
+          </p>
+        </div>
+      </div>
+    </div>
+    <Footer/>
+    </>
+  );
+};
+
+export default About;
\ No newline at end of file
diff --git a/src/pages/stats/[slug].tsx b/src/pages/stats/[slug].tsx
index f70fd69..82d2757 100644
--- a/src/pages/stats/[slug].tsx
+++ b/src/pages/stats/[slug].tsx
@@ -7,7 +7,6 @@ import Footer from "@/components/Footer/Footer";
 import ChannelCard from "@/components/ChannelCard/ChannelCard"
 import Head from "next/head";
 import TitleBar from "../../components/TitleBar/TitleBar";
-import Countdown from "@/components/Countdown";
 
 interface ChannelDataProp {
 	channel_id: string;
-- 
cgit v1.2.3

