I'm new to React. Basically I created a bug I couldn't resolve, so I reverted to an old commit. Now, instead of reverting like normal, its changed my entire app. for example, one of the components now looks like this with <<<<<<<<<<HEAD everywhere.
I can't make any changes, I can't run the app and it wont compile. Please help.
EDIT: please note, I used the desktop git control app, not terminal. I don't know if this matters.
import React from 'react';
import './Welcome.css'
import Filteritem from '../FilterItem/FilterItem';
import recipes from '../data/recipes.json'
const Nrec = () => {
    let newRecipe = recipes.filter(recipe => {
        return recipe.id === (recipes.length) 
    }) 
    console.log(newRecipe[0])
    return (
        <div className="welcome__new-description-new-rec container-fluid">
                <div className=" welcome__new-menu-box-outer">
                        <div className="welcome__new-menu-box-inner">
                            <img src={newRecipe[0].image} alt="mains" className="welcome__new-menu-box-img"/>
                            <div className="welcome__new-menu-name-wrap">
                                <h3 className="welcome__new-menu-box-img-text2 font">Newest Recipe:</h3>
                                <h3 className="welcome__new-menu-box-img-text font">{newRecipe[0].name}</h3>
                            </div>
                        </div>
                </div>
            </div>
      );
    }
const Welcome = () => {
    const filters = [
        {
            id: 1,
            name : "Mains",
            image: "https://images.pexels.com/photos/2116094/pexels-photo-2116094.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            filter: "main"
        },
        {
            id: 2,
            name : "Sides",
            image: "https://images.pexels.com/photos/262978/pexels-photo-262978.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            filter: "side"
        },
        {
            id: 3,
            name: "Desserts",
            image: "https://images.pexels.com/photos/45202/brownie-dessert-cake-sweet-45202.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            filter: "dessert"
        },
        {
            id: 4,
            name: "Starters",
            image: "https://images.pexels.com/photos/4173178/pexels-photo-4173178.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            filter: "starter"
        },
        {
            id: 5,
            name: "Cakes",
            image : "https://images.pexels.com/photos/1120970/pexels-photo-1120970.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
            filter: "cake"
        }]
    
    return ( 
        <div className="welcome">
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
            <div className="padder"></div>
            <div className="container-fluid text-left welcome__title-box">
                <h2 className="welcome__title font">Welcome.</h2>
                <p className="welcome__description font"> Select a menu below</p>
=======
            <div className="container-fluid text-left welcome__title-box pl-0">
                <h2 className="welcome__title font mt-2">Welcome.</h2>
                <p className="welcome__description"> Please select a menu below</p>
>>>>>>> parent of 745e6ca4... update
=======
            <div className="container-fluid text-left welcome__title-box pl-0">
                <h2 className="welcome__title font mt-2">Welcome.</h2>
                <p className="welcome__description"> Please select a menu below</p>
>>>>>>> parent of 745e6ca4... update
=======
            <div className="container-fluid text-left welcome__title-box pl-0">
                <h2 className="welcome__title font mt-2">Welcome.</h2>
                <p className="welcome__description"> Please select a menu below</p>
>>>>>>> parent of 745e6ca4... update
            </div>
            <div className="welcome__menu-box">
                {filters.map((filter) => <Filteritem key={filter.id} filter={filter} />)}
            </div>
            <div className="padder"></div>
            <div className="d-flex">
            <div className="welcome__new-rec">
                {Nrec()}
            </div>
            <div className="container-fluid welcome__title-box-bottom mt-5 pr-0">
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
                <h3 className="welcome__description-bottom-header font">All recipes</h3>
                <p className="welcome__description-bottom font">are sourced by Grandma from all over the net, editted and perfected by her expert touch.</p>
            </div>
=======
                <p className="welcome__description-bottom mb-0">All recipes are sourced by Grandma from all over the net, editted and perfected by her expert touch.</p>
>>>>>>> parent of 745e6ca4... update
=======
                <p className="welcome__description-bottom mb-0">All recipes are sourced by Grandma from all over the net, editted and perfected by her expert touch.</p>
>>>>>>> parent of 745e6ca4... update
=======
                <p className="welcome__description-bottom mb-0">All recipes are sourced by Grandma from all over the net, editted and perfected by her expert touch.</p>
>>>>>>> parent of 745e6ca4... update
            </div>
            
            
        </div>
     );
}
 
export default Welcome;
 
    