newly designed Icon addition

basic documentation homepage designed
documentation theme configured

docs/src/components/HomepageFeatures/index.tsx

@@ -10,38 +10,35 @@ type FeatureItem = {
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
+    title: 'No boilerplate & high code reusability',
     Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        Fl-Query is designed to be less cluttering + reusable and lets you focus on only the logic you actually want to implement without handling hazard of cached data management
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
+    title: 'Declarative & Easy to use',
     Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        Define your logic once and distribute it thousand times. By using Fl-Query you never have to write the same logic twice. It has an easy to understand API that you can learn in only 2-4 hours
       </>
     ),
   },
   {
-    title: 'Powered by React',
+    title: 'Optimistic data with smart refetching',
     Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        The days of Loading Screen is over. Fetch and update your data transparently without disturbing the user with a Loading Indicator. Update your Data even before a data updates on the server and after finally getting the actual data, replace the predicted data with the real one
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({ title, Svg, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">

docs/src/css/custom.css

@@ -1,3 +1,7 @@
+@tailwind components;
+@tailwind utilities;
+
+
 /**
  * Any CSS included here will be global. The classic template
  * bundles Infima by default. Infima is a CSS framework designed to
@@ -6,25 +10,26 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #fa4c5e;
+  --ifm-color-primary-dark: #e93a4c;
+  --ifm-color-primary-darker: #d83747;
+  --ifm-color-primary-darkest: #c0303e;
+  --ifm-color-primary-light: #f85e6d;
+  --ifm-color-primary-lighter: #f76977;
+  --ifm-color-primary-lightest: #f17582;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #fa4c5e;
+  --ifm-color-primary-dark: #e93a4c;
+  --ifm-color-primary-darker: #d83747;
+  --ifm-color-primary-darkest: #c0303e;
+  --ifm-color-primary-light: #f85e6d;
+  --ifm-color-primary-lighter: #f76977;
+  --ifm-color-primary-lightest: #f17582;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+

docs/src/pages/index.tsx

@@ -1,37 +1,43 @@
 import React from 'react';
-import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
-
-import styles from './index.module.css';
+import { FiGithub } from "react-icons/fi"
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
-          </Link>
-        </div>
+    <header className='flex flex-col space-y-5 h-[65vh] md:p-20' style={{ backgroundImage: "url('img/logo.svg')", backgroundSize: "60% auto", backgroundRepeat: "no-repeat", backgroundPosition: "125%" }}>
+      <h1 className="text-4xl flex items-center">
+        <img src="img/logo.svg" className='mt-2' width="40" alt="" />
+        {siteConfig.title}
+      </h1>
+      <p className="text-2xl max-w-[40%]">{siteConfig.tagline}</p>
+      <div className='space-x-5'>
+        <Link
+          className="button button--primary button--lg"
+          to="/docs/intro">
+          Get Started
+        </Link>
+        <Link
+          className="button button--secondary button--lg"
+          href='https://github.com/KRTirtho/fl-query'
+        >
+          <FiGithub className='mr-1' />
+          Github
+        </Link>
       </div>
     </header>
   );
 }
 
 export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title={`${siteConfig.title} - Flutter async data management couldn't anymore easier`}
+      description="Flutter Asynchronous data caching, invalidation, refetching library. React-Query for Flutter. swr for Flutter">
       <HomepageHeader />
       <main>
         <HomepageFeatures />