Upload 93 files

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "react/no-unescaped-entities": ["error", { "forbid": [">", "}"] }]
+  }
+}

.gitattributes

@@ -1,35 +1,2 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+# Auto detect text files and perform LF normalization
+* text=auto

.github/workflows/deploy.yml

@@ -0,0 +1,48 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [feature/live-preview]
+  pull_request:
+    branches: [feature/live-preview]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - name: Set Actions Allow Unsecure Commands
+        run: |
+          echo "ACTIONS_ALLOW_UNSECURE_COMMANDS=true" >> $GITHUB_ENV
+
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Installing my packages
+        run: yarn install
+
+      - name: Build my App
+        run: yarn build
+        env:
+          NEXT_PUBLIC_BASE_PATH: /chakra-nextjs-pro
+      - run: yarn export
+        env:
+          NEXT_PUBLIC_BASE_PATH: /chakra-nextjs-pro
+      - run: touch ./out/.nojekyll
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@3.5.9
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: out

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/node_modules
+package-lock.json
+yarn.lock
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.pem
+.pnpm-debug.log*
+
+# nextjs
+/.next/
+/out/
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.idea

.npmrc

@@ -0,0 +1,3 @@
+legacy-peer-deps=true
+auto-install-peers=true
+strict-peer-dependencies=false

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "prettier.singleQuote": true,
+  "prettier.semi": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## [1.0.0] 2023-06-20
+
+### Official Release
+
+Added TypeScript & NextJS

LICENSE

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

README.md

@@ -1,12 +1,104 @@
+# [Horizon ChatGPT AI Template](https://horizon-ui.com/chatgpt-ai-template) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=Check%20Horizon%20ChatGPT%20AI%20Template,%20the%20trendiest%20open%20source%20ChatGPT%20AI%20admin%20template%20for%20%23nextjs%20and%20%23react!%0A%0Ahttps%3A//horizon-ui.com/chatgpt-ai-template/%20%20)
+
+![version](https://img.shields.io/badge/version-1.0.0-brightgreen.svg)
+[![GitHub issues open](https://img.shields.io/github/issues/horizon-ui/chatgpt-ai-template.svg?maxAge=2592000)](https://github.com/horizon-ui/chatgpt-ai-template/issues?q=is%3Aopen+is%3Aissue)
+
+<p>&nbsp;</p>
+
+[<img alt="Horizon UI - Tailwind CSS React Admin dashboard template" src="https://i.ibb.co/Qmym1qt/horizon-ai-template-presentation-image-open-source.png" />](https://horizon-ui.com/ai-template)
+
+<p>&nbsp;</p>
+
+Get started and build your dream AI web app with Horizon AI Template, the trendiest & innovative Open-Source Free ChatGPT AI Admin Template for NextJS & React!
+
 ---
-title: Hlsitechbot
-emoji: 💬
-colorFrom: yellow
-colorTo: purple
-sdk: gradio
-app_file: app.py
-pinned: false
-license: apache-2.0
+
+### Introduction
+
+Horizon ChatGPT AI Template is the world's best open source OpenAI ChatGPT AI Template made with React, NextJS and Chakra UI! Start creating outstanding Chat AI SaaS Apps faster.
+
+It comes with over 30+ dark/light frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.
+
+### Documentation
+
+Each element is well presented in a very complex documentation. You can read more about the <a href="https://horizon-ui.com/docs-ai-template/?ref=readme-horizon-ai-template-free" target="_blank">documentation here.</a>
+
+### Quick Start
+
+Install Horizon ChatGPT AI Template by running either of the following:
+
+- Install NodeJS LTS from [NodeJs Official Page](https://nodejs.org/en/?ref=horizon-documentation) (NOTE: Product only works with LTS version)
+
+Clone the repository with the following command:
+
+```bash
+git clone https://github.com/horizon-ui/chatgpt-ai-template.git
+```
+
+Run in the terminal this command:
+
+```bash
+npm install
+```
+
+Then run this command to start your local server
+
+```bash
+npm run dev
+```
+
+### Your API Key is not working?
+
+- Make sure you have an [OpenAI account](https://platform.openai.com/account) and a valid API key to use ChatGPT. We don't sell API keys.
+- Make sure you have your billing info added in [OpenAI Billing page](https://platform.openai.com/account/billing/overview). Without billing info, your API key will not work.
+- The app will connect to the OpenAI API server to check if your API Key is working properly. 
+
+### ATTENTION: The model: `GPT-4` does not work yet. 
+If you are trying to use GPT-4, model it will not work if you don't have access from OpenAI.
+Note that even if you have ChatGPT Plus, you still need to request access to the GPT-4 API in order to use it with your API Key.
+This is OpenAI's restriction and we can't do anything about it. You can join the waitlist [here](https://openai.com/waitlist/gpt-4-api) .
+
+
+### Example Page
+
+If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example page. You will be able to quickly set up the basic structure for your web project.
+
+View <a href="https://horizon-ui.com/chatgpt-ai-template/?ref=readme-horizon-ai-template-free" target="_blank">example pages here.</a>
+
+### Versions
+
+| Free Version                                                                                                                                                                                   | PRO Version                                                                                                                                                                            |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [![Horizon ChatGPT AI Template](https://i.ibb.co/Qmym1qt/horizon-ai-template-presentation-image-open-source.png)](https://github.com/horizon-ui/chatgpt-ai-template) | [![Horizon AI Template PRO](https://i.ibb.co/ChL2fvf/horizon-ai-template-presentation-image.png)](https://www.horizon-ui.com/ai-template?ref=readme-horizon-ai-template-free) |
+
+### Figma Version
+
+Horizon AI Template is available in Figma format as well! Check Figma
+files in your .zip files! 🎨
+
+### Reporting Issues
+
+We use GitHub Issues as the official bug tracker for the Horizon UI. Here are
+some advices for our users that want to report an issue:
+
+1. Make sure that you are using the latest version of the Horizon AI Template.
+   Check the CHANGELOG from your dashboard on our
+   [CHANGE LOG File](https://github.com/horizon-ui/chatgpt-ai-template/blob/main/CHANGELOG.md?ref=readme-horizon-ai-template-free).
+2. Providing us reproducible steps for the issue will shorten the time it takes
+   for it to be fixed.
+3. Some issues may be browser specific, so specifying in what browser you
+   encountered the issue might help.
+
 ---
 
-An example chatbot using [Gradio](https://gradio.app), [`huggingface_hub`](https://huggingface.co/docs/huggingface_hub/v0.22.2/en/index), and the [Hugging Face Inference API](https://huggingface.co/docs/api-inference/index).
+### Community
+
+Connect with the community! Feel free to ask questions, report issues, and meet new people that already use Horizon AI Template!
+
+💬 [Join the #HorizonUI Discord Community!](https://discord.gg/f6tEKFBd4m)
+
+### Copyright and license
+
+⭐️ [Copyright 2023 Horizon UI ](https://www.horizon-ui.com/?ref=readme-horizon-ai-template-free)
+
+📄 [Horizon UI License](https://horizon-ui.notion.site/End-User-License-Agreement-8fb09441ea8c4c08b60c37996195a6d5)

next.config.js

@@ -0,0 +1,19 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  reactStrictMode: false,
+  swcMinify: true,
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
+  images: {
+    domains: [
+      'images.unsplash.com',
+      'i.ibb.co',
+      'scontent.fotp8-1.fna.fbcdn.net',
+    ],
+    // Make ENV
+    unoptimized: true,
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "horizon-ai-template-pro",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^1.1.5",
+    "@chakra-ui/react": "1.8.9",
+    "@chakra-ui/system": "^1.12.1",
+    "@chakra-ui/theme-tools": "^1.3.6",
+    "@codemirror/legacy-modes": "^6.3.2",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@heroicons/react": "^2.0.17",
+    "@material-tailwind/react": "^1.4.2",
+    "@tanstack/react-table": "^8.5.15",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "@uiw/codemirror-theme-tokyo-night": "^4.19.11",
+    "@uiw/react-codemirror": "^4.19.11",
+    "babel-cli": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-register": "^6.26.0",
+    "endent": "^2.1.0",
+    "eventsource-parser": "^1.0.0",
+    "framer-motion": "^4.1.17",
+    "next": "13.2.4",
+    "react": "18.2.0",
+    "react-build-sitemap": "^0.2.2",
+    "react-custom-scrollbars-2": "^4.2.1",
+    "react-dom": "18.2.0",
+    "react-icons": "^4.9.0",
+    "react-is": "^18.0.0",
+    "react-markdown": "^8.0.6",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "5.0.0",
+    "remark-gfm": "^3.0.1",
+    "typescript": "4.9.5",
+    "web-vitals": "^1.1.2"
+  },
+  "devDependencies": {
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.31",
+    "@types/react-dom": "18.0.11",
+    "autoprefixer": "^10.4.14",
+    "eslint": "8.37.0",
+    "eslint-config-next": "13.2.4",
+    "eventsource": "^2.0.2",
+    "postcss": "^8.4.21",
+    "prettier-plugin-tailwindcss": "^0.2.6",
+    "tailwindcss": "^3.3.1"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,76 @@
+'use client';
+import type { AppProps } from 'next/app';
+import { ChakraProvider, Box, Portal, useDisclosure } from '@chakra-ui/react';
+import theme from '@/theme/theme';
+import routes from '@/routes';
+import Sidebar from '@/components/sidebar/Sidebar';
+import Footer from '@/components/footer/FooterAdmin';
+import Navbar from '@/components/navbar/NavbarAdmin';
+import { getActiveRoute, getActiveNavbar } from '@/utils/navigation';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import '@/styles/App.css';
+import '@/styles/Contact.css';
+import '@/styles/Plugins.css';
+import '@/styles/MiniCalendar.css';
+
+function App({ Component, pageProps }: AppProps<{}>) {
+  const pathname = usePathname();
+  const [apiKey, setApiKey] = useState('');
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  useEffect(() => {
+    const initialKey = localStorage.getItem('apiKey');
+    if (initialKey?.includes('sk-') && apiKey !== initialKey) {
+      setApiKey(initialKey);
+    }
+  }, [apiKey]);
+
+  return (
+    <ChakraProvider theme={theme}>
+      <Box>
+        <Sidebar setApiKey={setApiKey} routes={routes} />
+        <Box
+          pt={{ base: '60px', md: '100px' }}
+          float="right"
+          minHeight="100vh"
+          height="100%"
+          overflow="auto"
+          position="relative"
+          maxHeight="100%"
+          w={{ base: '100%', xl: 'calc( 100% - 290px )' }}
+          maxWidth={{ base: '100%', xl: 'calc( 100% - 290px )' }}
+          transition="all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)"
+          transitionDuration=".2s, .2s, .35s"
+          transitionProperty="top, bottom, width"
+          transitionTimingFunction="linear, linear, ease"
+        >
+          <Portal>
+            <Box>
+              <Navbar
+                setApiKey={setApiKey}
+                onOpen={onOpen}
+                logoText={'Horizon UI Dashboard PRO'}
+                brandText={getActiveRoute(routes, pathname)}
+                secondary={getActiveNavbar(routes, pathname)}
+              />
+            </Box>
+          </Portal>
+          <Box
+            mx="auto"
+            p={{ base: '20px', md: '30px' }}
+            pe="20px"
+            minH="100vh"
+            pt="50px"
+          >
+            <Component apiKeyApp={apiKey} {...pageProps} />
+          </Box>
+          <Box>
+            <Footer />
+          </Box>
+        </Box>
+      </Box>
+    </ChakraProvider>
+  );
+}
+
+export default App;

pages/_document.tsx

@@ -0,0 +1,16 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+import Script from 'next/script';
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head>
+        <title>Horizon AI Template Free</title>
+      </Head>
+      <body suppressHydrationWarning={true}>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

pages/api/chatAPI.ts

@@ -0,0 +1,32 @@
+import { ChatBody } from '@/types/types';
+import { OpenAIStream } from '@/utils/chatStream';
+
+export const config = {
+  runtime: 'edge',
+};
+
+const handler = async (req: Request): Promise<Response> => {
+  try {
+    const { inputCode, model, apiKey } = (await req.json()) as ChatBody;
+    let apiKeyFinal;
+
+    if (apiKey) {
+      apiKeyFinal = apiKey;
+    } else {
+      apiKeyFinal = process.env.NEXT_PUBLIC_OPENAI_API_KEY;
+    }
+
+    if (!apiKey) {
+      return new Response('API key not found', { status: 500 });
+    }
+
+    const stream = await OpenAIStream(inputCode, model, apiKeyFinal);
+
+    return new Response(stream);
+  } catch (error) {
+    console.error(error);
+    return new Response('Error', { status: 500 });
+  }
+};
+
+export default handler;

pages/index.tsx

@@ -0,0 +1,432 @@
+'use client';
+/*eslint-disable*/
+
+import Link from '@/components/link/Link';
+import MessageBoxChat from '@/components/MessageBox';
+import { ChatBody, OpenAIModel } from '@/types/types';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Button,
+  Flex,
+  Icon,
+  Image,
+  Img,
+  Input,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { MdAutoAwesome, MdBolt, MdEdit, MdPerson } from 'react-icons/md';
+import Bg from '../public/img/chat/bg-image.png';
+
+export default function Chat(props: { apiKeyApp: string }) {
+  // *** If you use .env.local variable for your API key, method which we recommend, use the apiKey variable commented below
+  const { apiKeyApp } = props;
+  // Input States
+  const [inputOnSubmit, setInputOnSubmit] = useState<string>('');
+  const [inputCode, setInputCode] = useState<string>('');
+  // Response message
+  const [outputCode, setOutputCode] = useState<string>('');
+  // ChatGPT model
+  const [model, setModel] = useState<OpenAIModel>('gpt-3.5-turbo');
+  // Loading state
+  const [loading, setLoading] = useState<boolean>(false);
+
+  // API Key
+  // const [apiKey, setApiKey] = useState<string>(apiKeyApp);
+  const borderColor = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const inputColor = useColorModeValue('navy.700', 'white');
+  const iconColor = useColorModeValue('brand.500', 'white');
+  const bgIcon = useColorModeValue(
+    'linear-gradient(180deg, #FBFBFF 0%, #CACAFF 100%)',
+    'whiteAlpha.200',
+  );
+  const brandColor = useColorModeValue('brand.500', 'white');
+  const buttonBg = useColorModeValue('white', 'whiteAlpha.100');
+  const gray = useColorModeValue('gray.500', 'white');
+  const buttonShadow = useColorModeValue(
+    '14px 27px 45px rgba(112, 144, 176, 0.2)',
+    'none',
+  );
+  const textColor = useColorModeValue('navy.700', 'white');
+  const placeholderColor = useColorModeValue(
+    { color: 'gray.500' },
+    { color: 'whiteAlpha.600' },
+  );
+  const handleTranslate = async () => {
+    const apiKey = apiKeyApp;
+    setInputOnSubmit(inputCode);
+
+    // Chat post conditions(maximum number of characters, valid message etc.)
+    const maxCodeLength = model === 'gpt-3.5-turbo' ? 700 : 700;
+
+    if (!apiKeyApp?.includes('sk-') && !apiKey?.includes('sk-')) {
+      alert('Please enter an API key.');
+      return;
+    }
+
+    if (!inputCode) {
+      alert('Please enter your message.');
+      return;
+    }
+
+    if (inputCode.length > maxCodeLength) {
+      alert(
+        `Please enter code less than ${maxCodeLength} characters. You are currently at ${inputCode.length} characters.`,
+      );
+      return;
+    }
+    setOutputCode(' ');
+    setLoading(true);
+    const controller = new AbortController();
+    const body: ChatBody = {
+      inputCode,
+      model,
+      apiKey,
+    };
+
+    // -------------- Fetch --------------
+    const response = await fetch('/api/chatAPI', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      signal: controller.signal,
+      body: JSON.stringify(body),
+    });
+
+    if (!response.ok) {
+      setLoading(false);
+      if (response) {
+        alert(
+          'Something went wrong went fetching from the API. Make sure to use a valid API key.',
+        );
+      }
+      return;
+    }
+
+    const data = response.body;
+
+    if (!data) {
+      setLoading(false);
+      alert('Something went wrong');
+      return;
+    }
+
+    const reader = data.getReader();
+    const decoder = new TextDecoder();
+    let done = false;
+
+    while (!done) {
+      setLoading(true);
+      const { value, done: doneReading } = await reader.read();
+      done = doneReading;
+      const chunkValue = decoder.decode(value);
+      setOutputCode((prevCode) => prevCode + chunkValue);
+    }
+
+    setLoading(false);
+  };
+  // -------------- Copy Response --------------
+  // const copyToClipboard = (text: string) => {
+  //   const el = document.createElement('textarea');
+  //   el.value = text;
+  //   document.body.appendChild(el);
+  //   el.select();
+  //   document.execCommand('copy');
+  //   document.body.removeChild(el);
+  // };
+
+  // *** Initializing apiKey with .env.local value
+  // useEffect(() => {
+  // ENV file verison
+  // const apiKeyENV = process.env.NEXT_PUBLIC_OPENAI_API_KEY
+  // if (apiKey === undefined || null) {
+  //   setApiKey(apiKeyENV)
+  // }
+  // }, [])
+
+  const handleChange = (Event: any) => {
+    setInputCode(Event.target.value);
+  };
+
+  return (
+    <Flex
+      w="100%"
+      pt={{ base: '70px', md: '0px' }}
+      direction="column"
+      position="relative"
+    >
+      <Img
+        src={Bg.src}
+        position={'absolute'}
+        w="350px"
+        left="50%"
+        top="50%"
+        transform={'translate(-50%, -50%)'}
+      />
+      <Flex
+        direction="column"
+        mx="auto"
+        w={{ base: '100%', md: '100%', xl: '100%' }}
+        minH={{ base: '75vh', '2xl': '85vh' }}
+        maxW="1000px"
+      >
+        {/* Model Change */}
+        <Flex direction={'column'} w="100%" mb={outputCode ? '20px' : 'auto'}>
+          <Flex
+            mx="auto"
+            zIndex="2"
+            w="max-content"
+            mb="20px"
+            borderRadius="60px"
+          >
+            <Flex
+              cursor={'pointer'}
+              transition="0.3s"
+              justify={'center'}
+              align="center"
+              bg={model === 'gpt-3.5-turbo' ? buttonBg : 'transparent'}
+              w="174px"
+              h="70px"
+              boxShadow={model === 'gpt-3.5-turbo' ? buttonShadow : 'none'}
+              borderRadius="14px"
+              color={textColor}
+              fontSize="18px"
+              fontWeight={'700'}
+              onClick={() => setModel('gpt-3.5-turbo')}
+            >
+              <Flex
+                borderRadius="full"
+                justify="center"
+                align="center"
+                bg={bgIcon}
+                me="10px"
+                h="39px"
+                w="39px"
+              >
+                <Icon
+                  as={MdAutoAwesome}
+                  width="20px"
+                  height="20px"
+                  color={iconColor}
+                />
+              </Flex>
+              GPT-3.5
+            </Flex>
+            <Flex
+              cursor={'pointer'}
+              transition="0.3s"
+              justify={'center'}
+              align="center"
+              bg={model === 'gpt-4' ? buttonBg : 'transparent'}
+              w="164px"
+              h="70px"
+              boxShadow={model === 'gpt-4' ? buttonShadow : 'none'}
+              borderRadius="14px"
+              color={textColor}
+              fontSize="18px"
+              fontWeight={'700'}
+              onClick={() => setModel('gpt-4')}
+            >
+              <Flex
+                borderRadius="full"
+                justify="center"
+                align="center"
+                bg={bgIcon}
+                me="10px"
+                h="39px"
+                w="39px"
+              >
+                <Icon
+                  as={MdBolt}
+                  width="20px"
+                  height="20px"
+                  color={iconColor}
+                />
+              </Flex>
+              GPT-4
+            </Flex>
+          </Flex>
+
+          <Accordion color={gray} allowToggle w="100%" my="0px" mx="auto">
+            <AccordionItem border="none">
+              <AccordionButton
+                borderBottom="0px solid"
+                maxW="max-content"
+                mx="auto"
+                _hover={{ border: '0px solid', bg: 'none' }}
+                _focus={{ border: '0px solid', bg: 'none' }}
+              >
+                <Box flex="1" textAlign="left">
+                  <Text color={gray} fontWeight="500" fontSize="sm">
+                    No plugins added
+                  </Text>
+                </Box>
+                <AccordionIcon color={gray} />
+              </AccordionButton>
+              <AccordionPanel mx="auto" w="max-content" p="0px 0px 10px 0px">
+                <Text
+                  color={gray}
+                  fontWeight="500"
+                  fontSize="sm"
+                  textAlign={'center'}
+                >
+                  This is a cool text example.
+                </Text>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+        </Flex>
+        {/* Main Box */}
+        <Flex
+          direction="column"
+          w="100%"
+          mx="auto"
+          display={outputCode ? 'flex' : 'none'}
+          mb={'auto'}
+        >
+          <Flex w="100%" align={'center'} mb="10px">
+            <Flex
+              borderRadius="full"
+              justify="center"
+              align="center"
+              bg={'transparent'}
+              border="1px solid"
+              borderColor={borderColor}
+              me="20px"
+              h="40px"
+              minH="40px"
+              minW="40px"
+            >
+              <Icon
+                as={MdPerson}
+                width="20px"
+                height="20px"
+                color={brandColor}
+              />
+            </Flex>
+            <Flex
+              p="22px"
+              border="1px solid"
+              borderColor={borderColor}
+              borderRadius="14px"
+              w="100%"
+              zIndex={'2'}
+            >
+              <Text
+                color={textColor}
+                fontWeight="600"
+                fontSize={{ base: 'sm', md: 'md' }}
+                lineHeight={{ base: '24px', md: '26px' }}
+              >
+                {inputOnSubmit}
+              </Text>
+              <Icon
+                cursor="pointer"
+                as={MdEdit}
+                ms="auto"
+                width="20px"
+                height="20px"
+                color={gray}
+              />
+            </Flex>
+          </Flex>
+          <Flex w="100%">
+            <Flex
+              borderRadius="full"
+              justify="center"
+              align="center"
+              bg={'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%)'}
+              me="20px"
+              h="40px"
+              minH="40px"
+              minW="40px"
+            >
+              <Icon
+                as={MdAutoAwesome}
+                width="20px"
+                height="20px"
+                color="white"
+              />
+            </Flex>
+            <MessageBoxChat output={outputCode} />
+          </Flex>
+        </Flex>
+        {/* Chat Input */}
+        <Flex
+          ms={{ base: '0px', xl: '60px' }}
+          mt="20px"
+          justifySelf={'flex-end'}
+        >
+          <Input
+            minH="54px"
+            h="100%"
+            border="1px solid"
+            borderColor={borderColor}
+            borderRadius="45px"
+            p="15px 20px"
+            me="10px"
+            fontSize="sm"
+            fontWeight="500"
+            _focus={{ borderColor: 'none' }}
+            color={inputColor}
+            _placeholder={placeholderColor}
+            placeholder="Type your message here..."
+            onChange={handleChange}
+          />
+          <Button
+            variant="primary"
+            py="20px"
+            px="16px"
+            fontSize="sm"
+            borderRadius="45px"
+            ms="auto"
+            w={{ base: '160px', md: '210px' }}
+            h="54px"
+            _hover={{
+              boxShadow:
+                '0px 21px 27px -10px rgba(96, 60, 255, 0.48) !important',
+              bg:
+                'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%) !important',
+              _disabled: {
+                bg: 'linear-gradient(15.46deg, #4A25E1 26.3%, #7B5AFF 86.4%)',
+              },
+            }}
+            onClick={handleTranslate}
+            isLoading={loading ? true : false}
+          >
+            Submit
+          </Button>
+        </Flex>
+
+        <Flex
+          justify="center"
+          mt="20px"
+          direction={{ base: 'column', md: 'row' }}
+          alignItems="center"
+        >
+          <Text fontSize="xs" textAlign="center" color={gray}>
+            Free Research Preview. ChatGPT may produce inaccurate information
+            about people, places, or facts.
+          </Text>
+          <Link href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes">
+            <Text
+              fontSize="xs"
+              color={textColor}
+              fontWeight="500"
+              textDecoration="underline"
+            >
+              ChatGPT May 12 Version
+            </Text>
+          </Link>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}

prettier.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  trailingComma: 'all',
+  singleQuote: true,
+};

public/fonts/dm-sans/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2014-2017 Indian Type Foundry (info@indiantypefoundry.com). Copyright 2019 Google LLC.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+User-Agent: *
+Disallow:
+Sitemap: https://horizon-ui.com

src/components/CodeBlock.tsx

@@ -0,0 +1,52 @@
+import { StreamLanguage } from '@codemirror/language';
+import { go } from '@codemirror/legacy-modes/mode/go';
+import { tokyoNight } from '@uiw/codemirror-theme-tokyo-night';
+import CodeMirror from '@uiw/react-codemirror';
+import { FC, useEffect, useState } from 'react';
+
+interface Props {
+  code: string;
+  height: string;
+  editable?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export const CodeBlock: FC<Props> = ({
+  height,
+  code,
+  editable = false,
+  onChange = () => {},
+}) => {
+  const [copyText, setCopyText] = useState<string>('Copy');
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setCopyText('Copy');
+    }, 2000);
+
+    return () => clearTimeout(timeout);
+  }, [copyText]);
+
+  return (
+    <div className={`relative h-${height}px overflow-scroll`}>
+      <button
+        className="absolute right-0 top-0 z-10 rounded bg-[#1A1B26] p-1 text-xs text-white hover:bg-[#2D2E3A] active:bg-[#2D2E3A]"
+        onClick={() => {
+          navigator.clipboard.writeText(code);
+          setCopyText('Copied!');
+        }}
+      >
+        {copyText}
+      </button> 
+      <CodeMirror
+        editable={editable}
+        value={code}
+        minHeight={`${height}px`}
+        className="rounded-md overflow-scroll"
+        extensions={[StreamLanguage.define(go)]}
+        theme={tokyoNight}
+        onChange={(value) => onChange(value)}
+      />
+    </div>
+  );
+};

src/components/MarkdownBlock.tsx

@@ -0,0 +1,42 @@
+import ReactMarkdown from 'react-markdown';
+import { FC, useEffect, useState } from 'react';
+
+interface Props {
+  code: string;
+  editable?: boolean;
+  onChange?: (value: string) => void;
+}
+
+export const MarkdownBlock: FC<Props> = ({
+  code,
+  editable = false,
+  onChange = () => {},
+}) => {
+  const [copyText, setCopyText] = useState<string>('Copy');
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setCopyText('Copy');
+    }, 2000);
+
+    return () => clearTimeout(timeout);
+  }, [copyText]);
+
+  return (
+    <div className="relative">
+      <button
+        className="absolute right-0 top-0 z-10 rounded bg-[#1A1B26] p-1 text-xs text-white hover:bg-[#2D2E3A] active:bg-[#2D2E3A]"
+        onClick={() => {
+          navigator.clipboard.writeText(code);
+          setCopyText('Copied!');
+        }}
+      >
+        {copyText}
+      </button>
+
+      <div className="p-4 h-500px bg-[#1A1B26] text-white overflow-scroll rounded-md">
+        <ReactMarkdown className="font-normal">{code}</ReactMarkdown>
+      </div>
+    </div>
+  );
+};

src/components/MessageBox.tsx

@@ -0,0 +1,24 @@
+import ReactMarkdown from 'react-markdown'
+import { useColorModeValue } from '@chakra-ui/react'
+import Card from '@/components/card/Card'
+
+export default function MessageBox(props: { output: string }) {
+  const { output } = props
+  const textColor = useColorModeValue('navy.700', 'white')
+  return (
+    <Card
+      display={output ? 'flex' : 'none'}
+      px="22px !important"
+      pl="22px !important"
+      color={textColor}
+      minH="450px"
+      fontSize={{ base: 'sm', md: 'md' }}
+      lineHeight={{ base: '24px', md: '26px' }}
+      fontWeight="500"
+    >
+      <ReactMarkdown className="font-medium">
+        {output ? output : ''}
+      </ReactMarkdown>
+    </Card>
+  )
+}

src/components/apiModal/index.tsx

@@ -0,0 +1,253 @@
+'use client';
+import Card from '@/components/card/Card';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+  Box,
+  Button,
+  Flex,
+  Icon,
+  Input,
+  Link,
+  ListItem,
+  UnorderedList,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  useColorModeValue,
+  useDisclosure,
+  useToast,
+} from '@chakra-ui/react';
+import { useState } from 'react';
+import { MdLock } from 'react-icons/md';
+
+function APIModal(props: { setApiKey: any; sidebar?: boolean }) {
+  const { setApiKey, sidebar } = props;
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [inputCode, setInputCode] = useState<string>('');
+
+  const textColor = useColorModeValue('navy.700', 'white');
+  const grayColor = useColorModeValue('gray.500', 'gray.500');
+  const inputBorder = useColorModeValue('gray.200', 'whiteAlpha.200');
+  const inputColor = useColorModeValue('navy.700', 'white');
+  const link = useColorModeValue('brand.500', 'white');
+  const navbarIcon = useColorModeValue('gray.500', 'white');
+  const toast = useToast();
+
+  const handleChange = (Event: any) => {
+    setInputCode(Event.target.value);
+  };
+
+  const handleApiKeyChange = (value: string) => {
+    setApiKey(value);
+
+    localStorage.setItem('apiKey', value);
+  };
+  return (
+    <>
+      {sidebar ? (
+        <Button
+          onClick={onOpen}
+          display="flex"
+          variant="api"
+          fontSize={'sm'}
+          fontWeight="600"
+          borderRadius={'45px'}
+          mt="8px"
+          minH="40px"
+        >
+          Set API Key
+        </Button>
+      ) : (
+        <Button
+          onClick={onOpen}
+          minW="max-content !important"
+          p="0px"
+          me="10px"
+          _hover={{ bg: 'none' }}
+          _focus={{ bg: 'none' }}
+          _selected={{ bg: 'none' }}
+          bg="none !important"
+        >
+          <Icon w="18px" h="18px" as={MdLock} color={navbarIcon} />
+        </Button>
+      )}
+
+      <Modal blockScrollOnMount={false} isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent bg="none" boxShadow="none">
+          <Card textAlign={'center'}>
+            <ModalHeader
+              fontSize="22px"
+              fontWeight={'700'}
+              mx="auto"
+              textAlign={'center'}
+              color={textColor}
+            >
+              Enter your OpenAI API Key
+            </ModalHeader>
+            <ModalCloseButton _focus={{ boxShadow: 'none' }} />
+            <ModalBody p="0px">
+              <Text
+                color={grayColor}
+                fontWeight="500"
+                fontSize="md"
+                lineHeight="28px"
+                mb="22px"
+              >
+                You need an OpenAI API Key to use Horizon AI Template's
+                features. Your API Key is stored locally on your browser and
+                never sent anywhere else.
+              </Text>
+              <Flex mb="20px">
+                <Input
+                  h="100%"
+                  border="1px solid"
+                  borderColor={inputBorder}
+                  borderRadius="45px"
+                  p="15px 20px"
+                  me="10px"
+                  fontSize="sm"
+                  fontWeight="500"
+                  _focus={{ borderColor: 'none' }}
+                  _placeholder={{ color: 'gray.500' }}
+                  color={inputColor}
+                  placeholder="sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+                  onChange={handleChange}
+                  value={inputCode}
+                />
+                <Button
+                  variant="chakraLinear"
+                  py="20px"
+                  px="16px"
+                  fontSize="sm"
+                  borderRadius="45px"
+                  ms="auto"
+                  mb={{ base: '20px', md: '0px' }}
+                  w={{ base: '300px', md: '180px' }}
+                  h="54px"
+                  onClick={() => {
+                    inputCode?.includes('sk-')
+                      ? handleApiKeyChange(inputCode)
+                      : null;
+                    if (inputCode)
+                      toast({
+                        title: inputCode?.includes('sk-')
+                          ? `Success! You have successfully added your API key!`
+                          : !inputCode?.includes('sk-')
+                          ? `Invalid API key. Please make sure your API key is still working properly.`
+                          : 'Please add your API key!',
+                        position: 'top',
+                        status: inputCode?.includes('sk-')
+                          ? 'success'
+                          : !inputCode?.includes('sk-')
+                          ? `error`
+                          : !inputCode
+                          ? 'warning'
+                          : 'error',
+                        isClosable: true,
+                      });
+                  }}
+                >
+                  Save API Key
+                </Button>
+              </Flex>
+              <Link
+                color={link}
+                fontSize="sm"
+                href="https://platform.openai.com/account/api-keys"
+                textDecoration="underline !important"
+                fontWeight="600"
+              >
+                Get your API key from Open AI Dashboard
+              </Link>
+              <Accordion allowToggle w="100%" my="16px">
+                <AccordionItem border="none">
+                  <AccordionButton
+                    borderBottom="0px solid"
+                    maxW="max-content"
+                    mx="auto"
+                    _hover={{ border: '0px solid', bg: 'none' }}
+                    _focus={{ border: '0px solid', bg: 'none' }}
+                  >
+                    <Box flex="1" textAlign="left">
+                      <Text
+                        color={textColor}
+                        fontWeight="700"
+                        fontSize={{ sm: 'md', lg: 'md' }}
+                      >
+                        Your API Key is not working?
+                      </Text>
+                    </Box>
+                    <AccordionIcon color={textColor} />
+                  </AccordionButton>
+                  <AccordionPanel p="18px 0px 10px 0px">
+                    <UnorderedList p="5px">
+                      <ListItem
+                        mb="26px"
+                        color={grayColor}
+                        fontSize=",d"
+                        fontWeight="500"
+                      >
+                        Make sure you have an{' '}
+                        <Link
+                          textDecoration="underline"
+                          fontSize=",d"
+                          href="https://platform.openai.com/account/"
+                          fontWeight="500"
+                          color={grayColor}
+                        >
+                          OpenAI account
+                        </Link>{' '}
+                        and a valid API key to use ChatGPT. We don't sell API
+                        keys.
+                      </ListItem>
+                      <ListItem
+                        color={grayColor}
+                        fontSize="md"
+                        lineHeight="28px"
+                        fontWeight="500"
+                      >
+                        Make sure you have your billing info added in{' '}
+                        <Link
+                          textDecoration="underline"
+                          fontSize="md"
+                          lineHeight="28px"
+                          href="https://platform.openai.com/account/billing/overview"
+                          fontWeight="500"
+                          color={grayColor}
+                        >
+                          OpenAI Billing
+                        </Link>{' '}
+                        page. Without billing info, your API key will not work.
+                      </ListItem>
+                    </UnorderedList>
+                  </AccordionPanel>
+                </AccordionItem>
+              </Accordion>
+              <Text
+                color={grayColor}
+                fontWeight="500"
+                fontSize="sm"
+                mb="42px"
+                mx="30px"
+              >
+                *The app will connect to OpenAI API server to check if your API
+                Key is working properly.
+              </Text>
+            </ModalBody>
+          </Card>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
+
+export default APIModal;

src/components/card/Card.tsx

@@ -0,0 +1,11 @@
+'use client';
+import { useStyleConfig, chakra, forwardRef } from '@chakra-ui/react';
+import { CustomCardProps } from '@/theme/theme';
+const CustomCard = forwardRef<CustomCardProps, 'div'>((props, ref) => {
+  const { size, variant, ...rest } = props;
+  const styles = useStyleConfig('Card', { size, variant });
+
+  return <chakra.div ref={ref} __css={styles} {...rest} />;
+});
+
+export default CustomCard;

src/components/fields/InputField.tsx

@@ -0,0 +1,64 @@
+'use client';
+// Chakra imports
+import {
+  Flex,
+  FormLabel,
+  Input,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+
+export default function Default(props: {
+  id?: string;
+  label?: string;
+  extra?: JSX.Element;
+  placeholder?: string;
+  type?: string;
+  [x: string]: any;
+}) {
+  const { id, label, extra, placeholder, type, mb, ...rest } = props;
+  // Chakra Color Mode
+  const textColorPrimary = useColorModeValue('navy.700', 'white');
+  const searchColor = useColorModeValue('gray.700', 'white');
+  const inputBg = useColorModeValue('transparent', 'navy.800');
+  const placeholderColor = useColorModeValue(
+    { color: 'gray.500' },
+    { color: 'whiteAlpha.600' },
+  );
+
+  return (
+    <Flex direction="column" mb={mb ? mb : '30px'}>
+      <FormLabel
+        display="flex"
+        ms="10px"
+        htmlFor={id}
+        fontSize="sm"
+        color={textColorPrimary}
+        fontWeight="bold"
+        _hover={{ cursor: 'pointer' }}
+      >
+        {label}
+        <Text fontSize="sm" fontWeight="400" ms="2px">
+          {extra}
+        </Text>
+      </FormLabel>
+      <Input
+        {...rest}
+        type={type}
+        id={id}
+        fontWeight="500"
+        bg={inputBg}
+        variant="main"
+        fontSize="sm"
+        placeholder={placeholder}
+        _placeholder={placeholderColor}
+        border="1px solid"
+        color={searchColor}
+        borderColor={useColorModeValue('gray.200', 'whiteAlpha.100')}
+        borderRadius="12px"
+        h="44px"
+        maxH="44px"
+      />
+    </Flex>
+  );
+}

src/components/footer/FooterAdmin.tsx

@@ -0,0 +1,102 @@
+'use client';
+/*eslint-disable*/
+
+import {
+  Flex,
+  List,
+  ListItem,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import Link from '@/components/link/Link';
+
+export default function Footer() {
+  const textColor = useColorModeValue('gray.500', 'white');
+  return (
+    <Flex
+      zIndex="3"
+      flexDirection={{
+        base: 'column',
+        xl: 'row',
+      }}
+      alignItems="center"
+      justifyContent="space-between"
+      px={{ base: '30px', md: '50px' }}
+      pb="30px"
+    >
+      <Text
+        color={textColor}
+        fontSize={{ base: 'xs', md: 'sm' }}
+        textAlign={{
+          base: 'center',
+          xl: 'start',
+        }}
+        fontWeight="500"
+        mb={{ base: '10px', xl: '0px' }}
+      >
+        {' '}
+        &copy; {new Date().getFullYear()}
+        <Text as="span" fontWeight="500" ms="4px">
+          Horizon UI AI Template. All Rights Reserved.
+        </Text>
+      </Text>
+      <List display="flex">
+        <ListItem
+          me={{
+            base: '10px',
+            md: '44px',
+          }}
+        >
+          <Link
+            fontWeight="500"
+            fontSize={{ base: 'xs', md: 'sm' }}
+            color={textColor}
+            href="https://horizon-ui.com/pro"
+          >
+            Homepage
+          </Link>
+        </ListItem>
+        <ListItem
+          me={{
+            base: '10px',
+            md: '44px',
+          }}
+        >
+          <Link
+            fontWeight="500"
+            fontSize={{ base: 'xs', md: 'sm' }}
+            color={textColor}
+            href="https://horizon-ui.notion.site/End-User-License-Agreement-8fb09441ea8c4c08b60c37996195a6d5"
+          >
+            License
+          </Link>
+        </ListItem>
+        <ListItem
+          me={{
+            base: '10px',
+            md: '44px',
+          }}
+        >
+          <Link
+            fontWeight="500"
+            fontSize={{ base: 'xs', md: 'sm' }}
+            color={textColor}
+            href="https://horizon-ui.notion.site/Terms-Conditions-6e79229d25ed48f48a481962bc6de3ee"
+          >
+            Terms of Use
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link
+            fontWeight="500"
+            fontSize={{ base: 'xs', md: 'sm' }}
+            color={textColor}
+            href="https://horizon-ui.notion.site/Privacy-Policy-8addde50aa8e408ca5c5f5811c38f971"
+          >
+            Privacy Policy
+          </Link>
+        </ListItem>
+      </List>
+    </Flex>
+  );
+}

src/components/icons/IconBox.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { Flex } from '@chakra-ui/react';
+
+export default function IconBox(props: { icon: JSX.Element | string; [x: string]: any }) {
+	const { icon, ...rest } = props;
+
+	return (
+        <Flex
+            alignItems={'center'}
+            justifyContent={'center'}
+            borderRadius={'50%'}
+            {...rest}
+        >
+            {icon}
+        </Flex>
+    );
+}

src/components/icons/Icons.tsx

@@ -0,0 +1,200 @@
+'use client';
+import { createIcon } from '@chakra-ui/icons';
+
+export const HorizonLogo = createIcon({
+  displayName: 'horizonLogo',
+  viewBox: '0 0 146 20',
+  path: (
+    <g fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M16.42.748V19h-4.446v-7.514H5.058V19H.612V.748h4.446v7.15h6.916V.748h4.446Zm11.842 18.434c-1.716 0-3.294-.399-4.732-1.196a9.092 9.092 0 0 1-3.406-3.328c-.832-1.439-1.248-3.05-1.248-4.836 0-1.785.416-3.389 1.248-4.81a9.092 9.092 0 0 1 3.406-3.328C24.968.887 26.546.488 28.262.488c1.716 0 3.284.399 4.706 1.196a8.665 8.665 0 0 1 3.38 3.328c.832 1.421 1.248 3.025 1.248 4.81 0 1.785-.416 3.397-1.248 4.836a8.901 8.901 0 0 1-3.38 3.328c-1.422.797-2.99 1.196-4.706 1.196Zm0-4.056c1.456 0 2.617-.485 3.484-1.456.884-.97 1.326-2.253 1.326-3.848 0-1.612-.442-2.895-1.326-3.848-.867-.97-2.028-1.456-3.484-1.456-1.474 0-2.652.477-3.536 1.43-.867.953-1.3 2.245-1.3 3.874 0 1.612.433 2.903 1.3 3.874.884.953 2.062 1.43 3.536 1.43ZM49.377 19l-3.796-6.89h-1.066V19h-4.446V.748h7.462c1.439 0 2.66.251 3.666.754 1.023.503 1.785 1.196 2.288 2.08.503.867.754 1.837.754 2.912 0 1.213-.347 2.297-1.04 3.25-.676.953-1.681 1.63-3.016 2.028L54.395 19h-5.018ZM44.515 8.964h2.756c.815 0 1.421-.2 1.82-.598.416-.399.624-.962.624-1.69 0-.693-.208-1.24-.624-1.638-.399-.399-1.005-.598-1.82-.598h-2.756v4.524ZM61.476.748V19H57.03V.748h4.446ZM69.43 15.36h7.852V19H64.386v-3.38l7.8-11.232h-7.8V.748h12.896v3.38L69.43 15.36Zm19.388 3.822c-1.716 0-3.293-.399-4.732-1.196a9.093 9.093 0 0 1-3.406-3.328c-.832-1.439-1.248-3.05-1.248-4.836 0-1.785.416-3.389 1.248-4.81a9.093 9.093 0 0 1 3.406-3.328C85.525.887 87.102.488 88.818.488c1.716 0 3.285.399 4.706 1.196a8.664 8.664 0 0 1 3.38 3.328c.832 1.421 1.248 3.025 1.248 4.81 0 1.785-.416 3.397-1.248 4.836a8.9 8.9 0 0 1-3.38 3.328c-1.421.797-2.99 1.196-4.706 1.196Zm0-4.056c1.456 0 2.618-.485 3.484-1.456.884-.97 1.326-2.253 1.326-3.848 0-1.612-.442-2.895-1.326-3.848-.866-.97-2.028-1.456-3.484-1.456-1.473 0-2.652.477-3.536 1.43-.866.953-1.3 2.245-1.3 3.874 0 1.612.434 2.903 1.3 3.874.884.953 2.063 1.43 3.536 1.43ZM116.954 19h-4.446l-7.436-11.258V19h-4.446V.748h4.446l7.436 11.31V.748h4.446V19Zm19.834-4.03h-7.904L127.428 19h-2.496L131.484.982h2.73L140.74 19h-2.496l-1.456-4.03Zm-.676-1.924-3.276-9.152-3.276 9.152h6.552Zm9.85-12.168V19h-2.366V.878h2.366Z"
+        fill="currentColor"
+      />
+    </g>
+  ),
+});
+
+export const RoundedChart = createIcon({
+  displayName: 'RoundedChart',
+  viewBox: '0 0 24 24',
+  path: (
+    <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.846 20c-.515 0-.951-.18-1.31-.539A1.79 1.79 0 0 1 4 18.148v-4.53c0-.515.18-.953.539-1.312.36-.36.796-.54 1.311-.54.515 0 .954.18 1.318.54.364.359.545.797.545 1.312v4.53c0 .516-.182.954-.547 1.313a1.81 1.81 0 0 1-1.32.539ZM12 20c-.515 0-.952-.18-1.311-.539a1.785 1.785 0 0 1-.539-1.31V5.85c0-.515.18-.952.54-1.311A1.78 1.78 0 0 1 12 4c.515 0 .952.18 1.311.539.36.36.539.796.539 1.31V18.15c0 .515-.18.952-.54 1.311A1.78 1.78 0 0 1 12 20Zm6.15 0c-.515 0-.954-.18-1.318-.539a1.78 1.78 0 0 1-.546-1.317V10.71c0-.519.183-.958.548-1.317.365-.36.805-.539 1.32-.539s.951.18 1.31.54c.357.358.536.797.536 1.316v7.434c0 .519-.18.958-.539 1.317-.36.36-.796.539-1.311.539Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+});
+
+export const Logo = createIcon({
+  displayName: 'Logo',
+  viewBox: '0 0 217 39',
+  path: (
+    <svg width="217" height="39" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect
+        width="38.969"
+        height="38.969"
+        rx="8.609"
+        fill="url(#Essay Builder Logo__a)"
+      />
+      <g filter="url(#Essay Builder Logo__b)">
+        <path
+          d="M28.74 14.57a.646.646 0 0 1-.915 0L25 11.738a.646.646 0 0 1-.006-.907l.63-.649a1.882 1.882 0 0 1 1.386-.567c.547 0 1.037.199 1.47.595l.933.907c.434.416.627.898.58 1.446a2.168 2.168 0 0 1-.636 1.388l-.617.619Zm-2.079 1.164a.646.646 0 0 1 .004.916L12.92 30.425a.646.646 0 0 1-.457.19H9.646A.646.646 0 0 1 9 29.97v-2.828c0-.17.068-.335.189-.456l13.72-13.752a.646.646 0 0 1 .911-.004l2.841 2.805Z"
+          fill="url(#Essay Builder Logo__c)"
+          shape-rendering="crispEdges"
+        />
+      </g>
+      <g filter="url(#Essay Builder Logo__d)">
+        <path
+          d="M13.613 10.074a.323.323 0 0 0-.583-.001l-1.012 2.109a.324.324 0 0 1-.162.156l-2.174.948a.323.323 0 0 0 .001.593l2.17.937a.32.32 0 0 1 .162.156l1.015 2.112a.323.323 0 0 0 .583-.001l1.004-2.11a.323.323 0 0 1 .164-.157l2.178-.937a.323.323 0 0 0 0-.593l-2.181-.947a.323.323 0 0 1-.164-.158l-1-2.107Zm4.832-1.456a.323.323 0 0 0-.584 0l-.329.695a.323.323 0 0 1-.167.16l-.687.29a.323.323 0 0 0-.004.593l.695.304a.323.323 0 0 1 .162.157l.33.692a.323.323 0 0 0 .583 0l.33-.692a.323.323 0 0 1 .162-.157l.69-.304a.323.323 0 0 0-.005-.593l-.682-.29a.323.323 0 0 1-.165-.16l-.33-.695Z"
+          fill="url(#Essay Builder Logo__e)"
+          shape-rendering="crispEdges"
+        />
+      </g>
+      <path
+        d="M48.455 27.167v-15.91h10.7v2.882h-7.39v3.61h6.963v2.883h-6.962v3.652h7.389v2.883h-10.7Zm16.485.256c-1.282 0-2.4-.299-3.353-.897-.94-.612-1.58-1.43-1.923-2.456l2.35-1.11c.299.626.704 1.117 1.217 1.473a2.928 2.928 0 0 0 1.708.534c.456 0 .805-.093 1.047-.278.242-.185.363-.441.363-.768a.692.692 0 0 0-.128-.428 1.14 1.14 0 0 0-.385-.341c-.17-.1-.384-.185-.64-.257l-1.986-.555c-.954-.27-1.688-.705-2.2-1.303-.513-.612-.769-1.33-.769-2.156 0-.727.185-1.36.555-1.901.37-.541.89-.961 1.56-1.26.669-.314 1.437-.47 2.306-.47 1.139 0 2.135.27 2.99.811a4.268 4.268 0 0 1 1.836 2.243l-2.37 1.11a2.193 2.193 0 0 0-.94-1.153 2.64 2.64 0 0 0-1.516-.448c-.413 0-.74.085-.983.256a.833.833 0 0 0-.341.705.75.75 0 0 0 .128.427 1.1 1.1 0 0 0 .406.341c.199.1.441.193.726.278l1.858.555c.968.285 1.708.72 2.22 1.303.513.57.77 1.274.77 2.114 0 .726-.192 1.36-.577 1.901-.37.541-.89.968-1.559 1.281-.67.3-1.46.449-2.37.449Zm10.563 0c-1.281 0-2.399-.299-3.353-.897-.94-.612-1.58-1.43-1.922-2.456l2.35-1.11c.298.626.704 1.117 1.217 1.473a2.928 2.928 0 0 0 1.708.534c.456 0 .805-.093 1.047-.278.242-.185.363-.441.363-.768a.691.691 0 0 0-.128-.428 1.14 1.14 0 0 0-.385-.341c-.17-.1-.384-.185-.64-.257l-1.987-.555c-.953-.27-1.687-.705-2.2-1.303-.512-.612-.768-1.33-.768-2.156 0-.727.185-1.36.555-1.901.37-.541.89-.961 1.56-1.26.668-.314 1.437-.47 2.306-.47 1.139 0 2.135.27 2.99.811a4.268 4.268 0 0 1 1.836 2.243l-2.37 1.11a2.193 2.193 0 0 0-.94-1.153 2.64 2.64 0 0 0-1.516-.448c-.413 0-.74.085-.983.256a.833.833 0 0 0-.341.705.75.75 0 0 0 .128.427 1.1 1.1 0 0 0 .406.341c.199.1.44.193.726.278l1.858.555c.968.285 1.708.72 2.22 1.303.513.57.77 1.274.77 2.114 0 .726-.193 1.36-.577 1.901-.37.541-.89.968-1.56 1.281-.668.3-1.458.449-2.37.449Zm9.603 0c-.84 0-1.566-.135-2.178-.406-.612-.27-1.082-.655-1.41-1.153-.327-.513-.49-1.118-.49-1.815 0-.655.149-1.232.448-1.73.299-.513.754-.94 1.366-1.282.627-.341 1.403-.583 2.328-.726l3.567-.576v2.349l-2.99.534c-.456.085-.805.235-1.047.448-.242.2-.363.492-.363.876 0 .356.136.634.406.833.27.2.605.299 1.004.299.527 0 .99-.114 1.388-.342a2.37 2.37 0 0 0 .918-.918 2.58 2.58 0 0 0 .342-1.303v-3.033c0-.44-.178-.811-.534-1.11-.342-.3-.811-.449-1.41-.449-.569 0-1.074.157-1.516.47-.427.314-.74.726-.94 1.239l-2.562-1.217a4.163 4.163 0 0 1 1.09-1.688 5.184 5.184 0 0 1 1.793-1.089 6.578 6.578 0 0 1 2.285-.384c.983 0 1.851.178 2.606.534.754.356 1.338.854 1.75 1.495.428.626.642 1.36.642 2.2v7.688h-2.99v-1.88l.726-.128a5.91 5.91 0 0 1-1.132 1.282 4.18 4.18 0 0 1-1.388.726 5.382 5.382 0 0 1-1.709.256Zm10.23 4.485c-.342 0-.676-.029-1.004-.086a2.867 2.867 0 0 1-.833-.277v-2.627a6.017 6.017 0 0 0 1.453.213c.626 0 1.075-.149 1.345-.448.27-.299.491-.64.662-1.025l.79-1.815-.042 2.67-5.126-13.007h3.438l3.396 9.247h-1.281l3.395-9.247h3.439l-4.998 12.75c-.313.811-.697 1.488-1.153 2.029a4.517 4.517 0 0 1-1.559 1.217c-.57.27-1.21.406-1.922.406Zm11.395-9.183v-2.777h9.61v2.777h-9.61Zm12.553 4.442v-15.91h6.727c1.096 0 2.036.184 2.819.555.783.37 1.381.904 1.794 1.601.413.684.619 1.517.619 2.499a3.85 3.85 0 0 1-.576 2.007c-.385.627-1.018 1.154-1.901 1.58v-1.622c.84.327 1.488.719 1.943 1.174.456.456.769.954.94 1.495.171.527.256 1.082.256 1.666 0 1.566-.519 2.784-1.559 3.652-1.039.868-2.484 1.303-4.335 1.303h-6.727Zm3.31-2.883h3.801c.67 0 1.204-.193 1.602-.577.399-.384.598-.883.598-1.495 0-.626-.199-1.132-.598-1.516-.398-.385-.932-.577-1.602-.577h-3.801v4.165Zm0-7.048h3.652c.513 0 .918-.142 1.217-.427.313-.3.47-.69.47-1.175 0-.484-.157-.868-.47-1.153-.299-.299-.704-.448-1.217-.448h-3.652v3.203Zm14.959 10.187c-.94 0-1.745-.2-2.414-.598a3.971 3.971 0 0 1-1.495-1.709c-.341-.726-.512-1.573-.512-2.54v-7.07h3.203v6.813c0 .441.086.833.257 1.174a2 2 0 0 0 .768.77 2.22 2.22 0 0 0 1.111.277c.427 0 .797-.093 1.11-.278a1.85 1.85 0 0 0 .748-.769c.185-.341.278-.733.278-1.174v-6.813h3.203v11.66h-2.99V24.86l.171.513c-.271.697-.712 1.217-1.324 1.559-.598.327-1.303.491-2.114.491Zm8.171-.256v-11.66h3.204v11.66h-3.204Zm0-12.707v-3.204h3.204v3.204h-3.204Zm5.121 12.707V11h3.203v16.167h-3.203Zm10.609.256c-1.139 0-2.157-.27-3.054-.812a5.976 5.976 0 0 1-2.136-2.2c-.512-.925-.769-1.95-.769-3.075 0-1.139.264-2.164.791-3.075a5.967 5.967 0 0 1 2.135-2.2c.897-.54 1.901-.811 3.011-.811.855 0 1.609.164 2.264.491a3.746 3.746 0 0 1 1.58 1.346l-.491.64V11h3.204v16.167h-2.99V25.03l.299.662c-.399.57-.94 1.004-1.623 1.303a5.719 5.719 0 0 1-2.221.427Zm.384-2.883c.584 0 1.096-.135 1.538-.406.441-.27.783-.648 1.025-1.132.256-.484.384-1.04.384-1.666 0-.626-.128-1.181-.384-1.665a2.727 2.727 0 0 0-1.025-1.132c-.442-.27-.954-.406-1.538-.406-.584 0-1.11.142-1.58.427-.456.27-.812.648-1.068 1.132-.256.47-.384 1.018-.384 1.644 0 .627.128 1.182.384 1.666s.612.862 1.068 1.132c.47.27.996.406 1.58.406Zm13.686 2.883c-1.238 0-2.313-.27-3.224-.812a5.76 5.76 0 0 1-2.115-2.22c-.498-.926-.747-1.951-.747-3.076 0-1.167.256-2.207.769-3.118a5.9 5.9 0 0 1 2.114-2.157c.883-.527 1.879-.79 2.99-.79.925 0 1.744.15 2.456.448.712.285 1.31.69 1.794 1.218a5.318 5.318 0 0 1 1.132 1.836 6.345 6.345 0 0 1 .341 2.926c-.014.214-.05.399-.107.555h-8.734v-2.349h6.919l-1.516 1.11c.142-.611.135-1.152-.021-1.622a2.113 2.113 0 0 0-.833-1.132c-.385-.285-.862-.427-1.431-.427-.555 0-1.032.135-1.431.405s-.698.67-.897 1.196c-.199.527-.278 1.168-.235 1.922-.057.655.021 1.232.235 1.73.213.499.541.89.982 1.175.442.27.976.406 1.602.406.57 0 1.054-.114 1.452-.342.413-.228.733-.541.961-.94l2.563 1.218a3.83 3.83 0 0 1-1.089 1.495 5.318 5.318 0 0 1-1.73 1.003 6.786 6.786 0 0 1-2.2.342Zm7.012-.256v-11.66h2.99v2.797l-.214-.406c.257-.982.677-1.644 1.26-1.986.598-.356 1.303-.534 2.115-.534h.683v2.776h-1.004c-.783 0-1.416.242-1.9.727-.484.47-.726 1.139-.726 2.007v6.279h-3.204Zm8.536 0v-3.204h3.204v3.204h-3.204Zm5.771 0 5.382-15.91h4.399l5.382 15.91h-3.609l-1.068-3.247h-5.83l-1.068 3.247h-3.588Zm5.574-6.13h3.993l-2.434-7.517h.897l-2.456 7.517Zm10.815 6.13v-15.91h3.31v15.91h-3.31Z"
+        fill="#120F43"
+      />
+      <defs>
+        <linearGradient
+          id="Essay Builder Logo__a"
+          x1="23.267"
+          y1="32.321"
+          x2="31.554"
+          y2="2.363"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#4A25E1" />
+          <stop offset="1" stop-color="#9C84FF" />
+        </linearGradient>
+        <linearGradient
+          id="Essay Builder Logo__c"
+          x1="23.171"
+          y1="19.5"
+          x2="20.095"
+          y2="34.225"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#fff" stop-opacity=".96" />
+          <stop offset="1" stop-color="#fff" stop-opacity=".23" />
+        </linearGradient>
+        <linearGradient
+          id="Essay Builder Logo__e"
+          x1="16.631"
+          y1="13.13"
+          x2="15.4"
+          y2="6.258"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#fff" stop-opacity=".96" />
+          <stop offset="1" stop-color="#fff" stop-opacity=".23" />
+        </linearGradient>
+        <filter
+          id="Essay Builder Logo__b"
+          x="4.071"
+          y="5.309"
+          width="30.292"
+          height="31.142"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="-1.02" dy="1.926" />
+          <feGaussianBlur stdDeviation="1.955" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0.0506089 0 0 0 0 0.0159861 0 0 0 0 0.191833 0 0 0 0.25 0" />
+          <feBlend
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1_6125"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx=".963" dy="-.907" />
+          <feGaussianBlur stdDeviation="1.7" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0" />
+          <feBlend
+            in2="effect1_dropShadow_1_6125"
+            result="effect2_dropShadow_1_6125"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect2_dropShadow_1_6125"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="2.38" />
+          <feGaussianBlur stdDeviation="1.501" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+          <feBlend in2="shape" result="effect3_innerShadow_1_6125" />
+        </filter>
+        <filter
+          id="Essay Builder Logo__d"
+          x="4.559"
+          y="4.127"
+          width="19.622"
+          height="18.976"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx="-1.02" dy="1.926" />
+          <feGaussianBlur stdDeviation="1.955" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 0.0506089 0 0 0 0 0.0159861 0 0 0 0 0.191833 0 0 0 0.25 0" />
+          <feBlend
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_1_6125"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dx=".963" dy="-.907" />
+          <feGaussianBlur stdDeviation="1.7" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0" />
+          <feBlend
+            in2="effect1_dropShadow_1_6125"
+            result="effect2_dropShadow_1_6125"
+          />
+          <feBlend
+            in="SourceGraphic"
+            in2="effect2_dropShadow_1_6125"
+            result="shape"
+          />
+          <feColorMatrix
+            in="SourceAlpha"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="2.38" />
+          <feGaussianBlur stdDeviation="1.501" />
+          <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" />
+          <feBlend in2="shape" result="effect3_innerShadow_1_6125" />
+        </filter>
+      </defs>
+    </svg>
+  ),
+});