JavaScript Program to find Number of Pairs in an Array

For the array:

const arr = [10, 20, 20, 10, 10, 30, 50, 10, 20];

we need to find how many pairs of matching numbers exist.

Expected Output

3

Explanation:

  • 10 appears 4 times → 2 pairs
  • 20 appears 3 times → 1 pair
  • 30 appears 1 time → 0 pairs
  • 50 appears 1 time → 0 pairs

Total pairs = 2 + 1 = 3

JavaScript Solution

const arr = [10, 20, 20, 10, 10, 30, 50, 10, 20];
function findPairs(numbers) {
  const frequency = {};
  for (const num of numbers) {
    frequency[num] = (frequency[num] || 0) + 1;
  }
  console.log("Frequency:", frequency);
  let pairs = 0;
  for (const key in frequency) {
    pairs += Math.floor(frequency[key] / 2);
  }
  return pairs;
}
console.log("Total Pairs:", findPairs(arr));

How to Delete current git branch in Visual Studio Code

If you’re sure the existing branch is no longer required, you can delete it.

To delete current Current branch from Visual Studio Code, First we need to checkout / Switch from that branch to other / main branch.

Example:
git checkout main

For Example, the name of the branch that we need to delete is “test”, we need to use the following command to delete this branch.

git branch -d test

It will delete the branch test

If Git refuses because the branch has unmerged changes, then use the following command.

git branch -D main

⚠️ Warning: The -D option permanently deletes the branch, including commits that are not reachable from another branch. Use it carefully.

CSS accent-color Property

What is accent-color ?

The accent-color CSS property applies the custom accent-color for user-interface controls like  <input type=”checkbox”>, <input type=”radio”>, <input type=”range”> and <progress> .

For Example, default color of checkbox for the following code is as follows

.task-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
}

After applying accent-color as red, it will show as follows

.task-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  cursor: pointer;
  accent-color: red;
}

NOTE: By default, browser choose the accent-color. if we need any specific color, we need to give it manually like above.

Retrieval Augmented Generation (RAG) – AI Engineering

What is Retrieval Augmented Generation (RAG) ?

Retrieval Augmented Generation (RAG) is an AI technique that improve Large Language Model (LLM) responses by fetching facts from external knowledge bases.

What happens without RAG ?

Sometimes AI give Wrong Answers confidently and those answers look convincing as well. This happens because of AI Hallucination.

How RAG Solves this Problem ?

Instead of relying only on its trained data, the AI searches a custom database, retrieves relevant information, and uses it to generate accurate, upto-date, and verifiable answers. Simply AI doesn’t answer immediately. It first searches for relevant information.

How RAG Works ?

RAG acts as an Open Book Exam.

Without RAG: Answer directly comes from memory.

With RAG: Search Documents, Read relevant Documents and then gives answer. Which is much more reliable.

RAG accomplishes this through following stages :

STEP 1 : Collect Documents

Authorized external data like company documents, PDF’s, or Databases will become the knowledge source

STEP 2 : Chunking

LLMs cannot efficiently process huge documents.

Therefore, Large documents are broken down into small chunks. Instead of storing an entire PDF / Document, We store smaller pieces.

will continue …

Build a Business Landing Page with React, Tailwind CSS and Framer Motion

A landing page is often the first thing visitors see when they discover your business.

A good landing page should:

  • Look professional
  • Work perfectly on mobile devices
  • Load quickly
  • Clearly explain your services
  • Build trust
  • Encourage users to take action

In this tutorial, we’ll build a modern landing page using:

  • React
  • Tailwind CSS
  • Framer Motion
  • Responsive Design
  • SEO-friendly HTML

The page will include:

✅ Hero Section

✅ Features / Services Section

✅ About Section

✅ Testimonials Section

✅ Call To Action Section

✅ Smooth Scrolling

✅ Framer Motion Animations

✅ Mobile Responsive Design

Project Structure

src/
 ├── components/
 │    ├── Hero.jsx
 │    ├── Features.jsx
 │    ├── About.jsx
 │    ├── Testimonials.jsx
 │    └── CTA.jsx
 │
 ├── App.jsx
 └── index.css

Step 1: Create React Project

npx create-react-app landing-page
cd landing-page

Install dependencies:

npm install framer-motion
npm install -D tailwindcss
package.json
{
  "name": "landing-page",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.1",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.1",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^12.40.0",
    "react": "^19.2.3",
    "react-dom": "^19.2.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.4.19",
    "autoprefixer": "^10.5.0"
  }
}

Step 2: Configure Tailwind

tailwind.config.js

module.exports = {
    content: [
        "./src/**/*.{js,jsx}"
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
html {
  scroll-behavior: smooth;
}

Step 3: Hero Section

components/Hero.jsx

import { motion } from 'framer-motion';
export default function Hero() {
    return (
        <section id="hero" className='min-h-screen flex items-center justify-center bg-slate-900 text-white'>
            <div className='text-center px-6'>
                <motion.h1 
                initial={{ opacity: 0, y: -40 }}
                animate={{ opacity: 1, y: 0}}
                transition={{ duration: 0.8 }}
                className="text-5xl font-bold">
                    Grow Your Business Faster
                </motion.h1>
                <motion.p
                initial={{ opacity: 0 }}
                animate={{ opacity: 1}}
                transition={{ delay: 0.3 }}
                className='mt-6 text-xl'>
                    Modern digital solutions for growing companies.
                </motion.p>
                <a href='#cta' className='inline-block mt-8 bg-blue-600 px-8 py-3 rounded-lg'>
                    Get Started
                </a>
            </div>
        </section>
    )
}

Step 4: Features Section

components/Features.jsx

import { motion } from 'framer-motion';
const features = [
    "Web Development",
    "Mobile Apps",
    "SEO Optimization",
    "Cloud Solutions"
];
export default function Features () {
    return (
        <section id="features" className='py-20 bg-gray-100'>
            <div className='max-w-6xl mx-auto px-6'>
                <h2 className='text-4xl font-bold text-center'>
                    Services
                </h2>
                <div className='grid md:grid-cols-2 gap-8 mt-12'>
                    {
                        features.map((item) => (
                            <motion.div 
                            whileHover={{ scale: 1.05 }}
                            key={item}
                            className='bg-white p-6 rounded-xl shadow'>
                                <h3 className='text-xl font-semibold'>{item}</h3>
                            </motion.div>
                        ))
                    }
                </div>
            </div>
        </section>
    )
}

Step 5: About Section

components/About.jsx

export default function About() {
    return (
        <section id='about' className="py-20">
            <div className="max-w-4xl mx-auto px-6 text-center">
                <h2 className="text-4xl font-bold">
                    About Us
                </h2>
                <p className="mt-6 text-lg">
                    We help business build modern
                    digital products that increase
                    growth and customer engagement.
                </p>
            </div>
        </section>
    )
}

Step 6: Testimonials Section

components/Testimonials.jsx

export default function Testimonials() {
    const testimonials = [
        {
            name: "John",
            text: "Amazing service and support."
        },
        {
            name: "Sarah",
            text: "Helped our company grow rapidly."
        }
    ];
    return (
        <section id='testimonials' className="bg-gray-100 py-20">
            <div className="max-w-6xl mx-auto px-6">
                <h2 className="text-4xl font-bold text-center">
                    Testimonials
                </h2>
                <div className="grid md:grid-cols-2 gap-8 mt-12">
                    {testimonials.map((item) => (
                        <div 
                        key={item.name} 
                        className="bg-white p-6 rounded-xl shadow">
                            <p>{item.text}</p>
                            <h4 className="mt-4 font-bold">{item.name}</h4>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    )
}

Step 7: CTA Section

components/CTA.jsx

export default function CTA() {
  return (
    <section id="cta" className="py-20 bg-blue-600 text-white">
      <div className="text-center px-6">
        <h2 className="text-4xl font-bold">Ready To Grow?</h2>
        <p className="mt-4">Let's discuss your next project.</p>
        <button className="mt-8 bg-white text-blue-600 px-8 py-3 rounded-lg">
          Contact Us
        </button>
      </div>
    </section>
  );
}

Step 8: Main App Component

App.jsx

import Hero from './components/Hero';
import Features from './components/Features';
import About from './components/About';
import Testimonials from './components/Testimonials';
import CTA from './components/CTA';
function App() {
  
  return (
    <>
      <Hero />
      <Features />
      <About />
      <Testimonials />
      <CTA />
    </>
  );
}
export default App;

Step 9: SEO Optimization

public/index.html

<title>
Modern Business Landing Page
</title>
<meta
  name="description"
  content="Professional business landing page built using React and Tailwind CSS."
/>
<meta
  name="keywords"
  content="React, Tailwind CSS, Landing Page"
/>

Use semantic tags:

<header>
<section>
<main>
<footer>

instead of unnecessary divs.

Step 10: Deploy to Vercel

Install:

npm install -g vercel

Build project:

npm run build

Deploy:

vercel

Follow prompts.

You will receive:

https://your-project.vercel.app

Performance Tips

Lazy Load Components

const Hero = React.lazy(() =>
  import("./Hero")
);

Optimize Images

Use:

WebP
AVIF

formats whenever possible.

Reduce Bundle Size

Remove unused libraries.

Use Tailwind Utility Classes

Avoid large custom CSS files.

What Makes a Landing Page Convert Better?

A high-converting landing page should:

✅ Clear headline

✅ Strong value proposition

✅ Social proof

✅ Testimonials

✅ Mobile-friendly layout

✅ Fast loading speed

✅ Clear call-to-action

Final Result

After completing this tutorial, you’ll have:

  • Fully Responsive Landing Page
  • Mobile-First Design
  • Smooth Scrolling
  • Framer Motion Animations
  • SEO-Friendly Structure
  • Production Deployment on Vercel
  • Clean React Component Architecture

This foundation can be used for:

  • Agency Websites
  • Startup Landing Pages
  • SaaS Products
  • Consulting Businesses
  • Portfolio Websites
  • Marketing Campaigns


💡 Found this tutorial helpful? Please Subscribe, If this content is helpful to You. Happy Coding! 🚀