diff --git a/assets/icons/HeartIcon.tsx b/assets/icons/HeartIcon.tsx deleted file mode 100644 index f86a968ac..000000000 --- a/assets/icons/HeartIcon.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; - -function HeartIcon() { - return ( - - - - ); -} - -export default HeartIcon; diff --git a/assets/icons/StarIcon.tsx b/assets/icons/StarIcon.tsx deleted file mode 100644 index f52942f7d..000000000 --- a/assets/icons/StarIcon.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; - -function StarIcon() { - return ( - - - - - ); -} - -export default StarIcon; diff --git a/assets/icons/svg/starIcon.svg b/assets/icons/svg/starIcon.svg deleted file mode 100644 index 952d81cd8..000000000 --- a/assets/icons/svg/starIcon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/components/logo/logo.tsx b/components/logo/logo.tsx index b11e58119..1f8f3b3f9 100644 --- a/components/logo/logo.tsx +++ b/components/logo/logo.tsx @@ -1,44 +1,15 @@ import React from 'react' -const MySvgIcon: React.FC> = (props) => { - return ( - - - - - ) -} - const Logo = ({ className }: { className?: string }) => { return ( -
- -

- - Links - - - Hub - -

-
+

+ + Links + + + Hub + +

) } diff --git a/database/index.ts b/database/index.ts index 2bab765e8..5850de654 100644 --- a/database/index.ts +++ b/database/index.ts @@ -125,7 +125,6 @@ export { default as dsaArticles } from './data_structures/dsa-articles.json' export { default as dsaTutorials } from './data_structures/dsa-tutorials.json' export { default as dsaCourses } from './data_structures/dsa-courses.json' // Block Chain - export { default as smartContracts } from './BlockChain/smart-contracts.json' export { default as truffle } from './BlockChain/truffle.json' export { default as hardhat } from './BlockChain/hardhat.json' diff --git a/layouts/GeneralLayout.tsx b/layouts/GeneralLayout.tsx index 06c182c3d..bc8ef5bf3 100644 --- a/layouts/GeneralLayout.tsx +++ b/layouts/GeneralLayout.tsx @@ -32,6 +32,7 @@ const GeneralLayout = ({ children }: { children: ReactNode }) => { data-custom="restrict-click-outside" className={clsx( 'flex flex-col justify-between min-h-full px-4 pb-2 md:ml-[290px] lg:w-[calc(100%-290px)]', + pathname != '/' && ' transition-color ease-in-out duration-200', 'bg-theme-primary-light dark:bg-inherit' )} diff --git a/pages/index.tsx b/pages/index.tsx index 6b99d1ef2..c142c5133 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,358 +1,128 @@ -import React, { useState } from 'react' -import Head from 'next/head' -import Logo from 'components/logo/logo' -import { RxCaretDown, RxCaretRight } from 'react-icons/rx' -import { IoMdGitBranch, IoIosStar } from 'react-icons/io' -import { - FaDiscord, - FaGithub, - FaXTwitter, - FaArrowRightLong, -} from 'react-icons/fa6' -import StarIcon from '../assets/icons/svg/starIcon.svg' -import HeartIcon from '../assets/icons/svg/heart.svg' -import Link from 'next/link' -import Button from 'components/Button' -import { sidebarData } from '../database/data' - -interface SocialLinkProps { - href: string - icon: React.ReactNode - title: React.ReactNode - description: React.ReactNode -} - -interface RatingForkProps { - type: 'star' | 'fork' - count: number - link: string - bgColor: string - iconBgColor: string - btnBgColor: string - btnTextColor: string - btnText: string -} - -const SocialLink: React.FC = ({ - href, - icon, - title, - description, -}) => ( -
- -
-
{icon}
- {title} -
-

{description}

- -
-) - -const RatingForkComponent: React.FC = ({ - type, - count, - link, - bgColor, - iconBgColor, - btnBgColor, - btnTextColor, - btnText, -}) => { - const containerStyle = { backgroundColor: bgColor } - const iconStyle = { backgroundColor: iconBgColor } - - return ( -
- {type === 'star' ? ( - - ) : ( - - )} -
- {count} - - {type === 'star' ? 'stars' : 'forks'} - -
- - - -
- ) -} - -export default function Home() { - const [welcome, setWelcome] = useState(true) - const [community, setCommunity] = useState(true) - const [resources, setResources] = useState(true) - - const handleWelcome = () => { - setWelcome((prev) => !prev) - } - const handleCommunity = () => { - setCommunity((prev) => !prev) - } - const handleResources = () => { - setResources((prev) => !prev) - } - - return ( - <> - - LinksHub - - - - - - - - - {/* Open Graph */} - - - - - - - - {/* Twitter */} - - - - - - - - - - - - -
-
-
-
- Welcome! -
-
- {welcome ? : } -
-
- {welcome && ( - <> - - Welcome aboard, we're excited to have you at LinksHub! - -
-
-
-
- -
-

- LinksHub aims to provide developers with access to a wide - range of free resources and tools that they can use in - their work. These resources include links to free - software, libraries, frameworks, and other tools that can - be used to build and deploy applications and websites. -

-
-
- - - -
-
-
- - )} -
-
-
-
Community
-
- {community ? ( - - ) : ( - - )} -
-
- {community && ( - <> -
- Get involved in our community. Everyone is welcome! -
-
- } - title="Twitter" - description="For announcements, tips, and general information." - /> - } - title="Discord" - description="To get involved in the community, ask questions, and share tips." - /> - } - title="Github" - description="To report bugs, request features, and contribute to the project." - /> -
- - )} -
-
-
-
Resources
-
- {resources ? ( - - ) : ( - - )} -
-
-
- {resources && ( - <> - - We've curated a wealth of resources just for you. Go - ahead and explore at your own pace. - -
    - {resources && - sidebarData.map((el, i) => ( - -
    -
    {el.category.toUpperCase()}
    -
    - -
    -
    - - ))} -
- - )} -
-
-
-
-
-
- -
-

- More awesome resources are coming soon! -

-
-
-
- Discover valuable resources without extensive research. We have - diligently curated a wealth of materials to make your journey - smoother. Show us some love and support our efforts in - simplifying your path to success. -
-
-
-
-
- - ) -} +import React, { useEffect, useState } from 'react' +import Head from 'next/head' +import Logo from 'components/logo/logo' +import TypewriterComponent from 'typewriter-effect' +import { sidebarData } from '../database/data' +import Link from 'next/link' + +export default function Home() { + const [currentIndex, setCurrentIndex] = useState(0); + + + //storing sub categories names for using in typewriter effect + const subCategoriesNames: string[] = [] + sidebarData.forEach((c) => { + c.subcategory.forEach((a) => { + subCategoriesNames.push(a.name.toUpperCase()) + }) + }) + const subCategoriesUrl: string[] = [] + sidebarData.forEach((c) => { + c.subcategory.forEach((a) => { + subCategoriesUrl.push(c.category+a.url) + }) + }) + useEffect(() => { + const typewriterInterval = setInterval(() => { + setCurrentIndex((prevIndex) => (prevIndex + 1) % subCategoriesNames.length); + }, 4000); // Adjust the interval as needed + + return () => clearInterval(typewriterInterval); + }, []); + return ( + <> + + LinksHub + + + + + + + + + {/* Open Graph */} + + + + + + + + {/* Twitter */} + + + + + + + + + + + + +
+
+
+ + 👾 +
+
+

+ {' '} + LinksHub aims to provide developers with access to a wide range of + free resources and tools that they can use in their work. These + resources include links to free software, libraries, frameworks, + and other tools that can be used to build and deploy applications + and websites. +

+
+

Navigate through menu for

+ + + +
+
+
+ + ) +} diff --git a/tailwind.config.js b/tailwind.config.js index 1db3da0e8..e78114455 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -36,7 +36,6 @@ module.exports = { screens: { xs: '200px', folding: '320px', - tall: { raw: '(min-height: 800px)' }, }, display: ['group-hover'], @@ -95,35 +94,27 @@ module.exports = { 'scale-appearance': 'scale-appearance 0.3s ease-in forwards', 'scale-hide': 'scale-hide 0.3s ease-out forwards', }, + opacity: { + 8: '0.08', + }, + width: { + 1038: '1038px', + }, + maxWidth: { + 1038: '1038px', + }, + fontSize: { + '1.5xl': '22px', + }, boxShadow: { - header: '0px 4px 16px 0px rgba(225, 218, 244, 0.25)', - sidebar: '4px 0px 16px 0px rgba(225, 218, 244, 0.25)', - 'input-hover': '0px 0px 0px 1.6px rgba(113, 78, 255, 0.10)', - 'input-focus': '0px 0px 0px 1.6px #714EFF', - 'input-hover-dark': '0px 0px 0px 1.6px rgba(255, 255, 255, 0.20)', - 'input-focus-dark': '0px 0px 0px 1.6px rgba(238, 243, 251, 0.75)', - opacity: { - 8: '0.08', - }, - width: { - 1038: '1038px', - }, - maxWidth: { - 1038: '1038px', - }, - fontSize: { - '1.5xl': '22px', - }, - boxShadow: { - tile: '0px 0px 12px 0px #E1DAF440', - }, + tile: '0px 0px 12px 0px #E1DAF440', }, }, - plugins: [require('daisyui')], - darkMode: ['class', '[data-theme="dark"]'], - variants: { - opacity: ['responsive', 'hover', 'focus', 'group-hover'], - textColor: ['responsive', 'hover', 'focus', 'group-hover'], - }, + }, + plugins: [require('daisyui')], + darkMode: ['class', '[data-theme="dark"]'], + variants: { + opacity: ['responsive', 'hover', 'focus', 'group-hover'], + textColor: ['responsive', 'hover', 'focus', 'group-hover'], }, }