Amit258012

// init services:
export const db = getFirestore(app);

//  collection ref:
const colRef = collection(db, "data");

// get collection data
useEffect(() => {
	const getData = async () => {
		const data = await getDocs(colRef);

Amit258012

If we navigate to new page then the scroll pos must be at start

    useEffect(() => {
		window.scrollTo(0, 0);
	}, [location]);

Amit258012

@mixin sm {
	@media only screen and (min-width: 640px) {
		@content;
	}
}

@mixin md {
	@media only screen and (min-width: 768px) {
		@content;
	}

Amit258012

Simple test

Amit258012

import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/blur.css";

const Img = ({ src, className }) => {
	return (
		<LazyLoadImage
			className={className || ""}
			alt=""
			effect="blur"
			src={src}

Amit258012

import { useEffect, useState } from "react";
import { fetchDataFromApi } from "../utils/api";
const useFetch = (url) => {
	const [data, setData] = useState(null);
	const [loading, setLoading] = useState(null);
	const [error, setError] = useState(null);

	useEffect(() => {
		setLoading("loading...");
		setData(null);

Amit258012

{
	data.meta.pagination.total > maxResultCount && (
		<div className="flex gap-3 items-center justify-center my-16 md:my-0">
			<button
				className={`rounded py-2 px-4 bg-black text-white disabled:bg-gray-200 disabled:text-gray-500`}
				disabled={pageIndex === 1}
				onClick={() => setPageIndex(pageIndex - 1)}>
				Previous
			</button>

Amit258012

import React from "react";
import { FaFacebookF, FaTwitter, FaYoutube, FaInstagram } from "react-icons/fa";
import Wrapper from "./Wrapper";

const Footer = () => {
	return (
		<footer className="bg-black text-white pt-14 pb-3">
			<Wrapper className="flex justify-between flex-col md:flex-row gap-[50px] md:gap-0">
				{/* LEFT START */}
				<div className="flex gap-[50px] md:gap-[75px] lg:gap-[100px] flex-col md:flex-row">

Amit258012

@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	font-family: "Lexend", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

Amit258012

:root {
	font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1;
	font-weight: 500;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;