applied the same design

src/components/CardApartments/CardApartments.js

 
 CardApartments.propTypes = {
     result: PropTypes.object,
-    index : PropTypes.string
+    index : PropTypes.number
 }
 export default CardApartments;

src/components/CardHouses/CardHouses.js

     return(
         <>
         {
-          console.log("houses or condo")
+             console.log("houses or condo")
+        }
+        {
+       
+          console.log(result)
         }
             <div className="card">
                 <div className="card-body">
                       </div>
                     </div>
                     <div className="col-md-8">              
-                    {result.name !== undefined ? <h2><a>{result.name}
+                    {result.name !== undefined ? <h2><a href={result.url} >{result.name}
 
                     </a>
                     
                           <div className="row">
                             <div className="col">
                              {
-                                result.features.map((feature, i) => <p key={i} className="badge badge-primary">{feature}</p>)
+                                 result.features.slice(0, 8).map((feature, i) => <p key={i} className="badge badge-primary  ml-1">{feature}</p>)
                              }
                               
                             </div>

src/components/CardTownHouses/CardTownHouses.js

                       </div>
                     </div>
                     <div className="col-md-8">              
-                    {result.name !== undefined ? <h2><a>{result.name}
-
+                    {result.name !== undefined ? <h2><a href={result.url}> {result.name}
                     </a>
                     
                     </h2>: ''}
                           <div className="row">
                             <div className="col">
                              {
-                                result.features.map((feature, i) => <p key={i} className="badge badge-primary">{feature}</p>)
+                                 result.features.slice(0, 8).map((feature, i) => <p key={i} className="badge badge-primary  ml-1">{feature}</p>)
                              }
                               
                             </div>
                           </div>
                           <div className="row">
                             { result.contact !== undefined && result.contact.phone != undefined  ? <span className="mr-3 lead"><i className="fas fa-phone">{result.contact.phone}</i></span> : ''}
-                            { result.contact !== undefined && result.contact.agentFullName ? <span className="mr-3 lead"><i className="fas fa-user"></i>{result.contact.agentFullName}</span>: '' }
+                            { result.contact !== undefined && result.contact.url ? <span className="mr-3 lead"><i className="fas fa-user"></i>{result.contact.agentFullName}</span>: '' }
                           </div>
                           
                         </div>
 
 CardTownHouses.propTypes = {
     result: PropTypes.object,
-    index : PropTypes.string
+    index : PropTypes.number
 }
 
 export default CardTownHouses;

src/components/ScrappeResult/ScrappeResult.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import CardApartments from '../CardApartments/CardApartments'
+//import CardApartments from '../CardApartments/CardApartments'
 import CardHouses from '../CardHouses/CardHouses';
-import CardTownHouses from '../CardTownHouses/CardTownHouses';
+//import CardTownHouses from '../CardTownHouses/CardTownHouses';
 const ScrappeResult = ({result, type, index}) => {
     return (
-        <>    
-        <div className='col-lg-12'>       
-            {    (type !== undefined && type !== null) ?        
-                    (type.value === "apartments") ? <CardApartments index = {index} result={result} />
-                                        : (type.value === "houses") ? <CardHouses index ={index} result={result} /> 
-                                        : <CardTownHouses index={index} result={result} />
-                    :''
-            }
+        <>
+        {   console.log(type)}
+        
+            <div className='col-lg-12'>       
+                {/* {    (type !== undefined && type !== null) ?        
+                        (type.value === "apartments") ? <CardApartments index = {index} result={result} />
+                                            : (type.value === "houses") ? <CardHouses index ={index} result={result} /> 
+                                            : <CardTownHouses index={index} result={result} />
+                        :'' */
+                        <CardHouses index ={index} result={result} />         
+                }
+                
             </div>
         </>
     );
 ScrappeResult.propTypes = {
     result: PropTypes.object,
     type: PropTypes.object,
-    index :PropTypes.string
+    index :PropTypes.number
   };
 export default ScrappeResult;

src/pages/ScrapeResults/ScrapeResultsPage.js

         <div className='content mt-1' >
         <div className="container">
           <div className="row">
+            {console.log(scrappeResults)}
             {(scrappeResults !== undefined) ?
               scrappeResults.map((result, i) => <ScrappeResult key={i} index={i} type={scrappeDetails.filters.find(el => el.name == "type" && el.value !== null)} result={result} />)
               : ''