Antoni Nuñez Romeu
58 lines
2.4 KiB
React
58 lines
2.4 KiB
React
import React from 'react';
|
|
import './HomeView.css';
|
|
|
|
function HomeView({ onScanClick, onSearchClick }) {
|
|
return (
|
|
<div className="home-view">
|
|
<div className="home-hero">
|
|
<div className="home-logo-wrapper">
|
|
<img src="/farmaclic_logo_home.png" alt="FarmaClic" className="home-logo" />
|
|
<img src="/farmaclic_text.png" alt="FarmaClic" className="home-brand-name" />
|
|
</div>
|
|
<p className="home-desc">Encuentra tus medicamentos en farmacias cercanas</p>
|
|
</div>
|
|
|
|
<div className="home-cards">
|
|
<button className="home-card home-card--search" onClick={onSearchClick}>
|
|
<div className="home-card-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<circle cx="11" cy="11" r="7" />
|
|
<path d="m20 20-3.5-3.5" />
|
|
</svg>
|
|
</div>
|
|
<div className="home-card-text">
|
|
<span className="home-card-label">Buscar Medicamento</span>
|
|
<span className="home-card-arrow">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="9 18 15 12 9 6" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button className="home-card home-card--scan" onClick={onScanClick}>
|
|
<div className="home-card-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M3 7V5a2 2 0 0 1 2-2h2" />
|
|
<path d="M17 3h2a2 2 0 0 1 2 2v2" />
|
|
<path d="M21 17v2a2 2 0 0 1-2 2h-2" />
|
|
<path d="M7 21H5a2 2 0 0 1-2-2v-2" />
|
|
<path d="M7 8v8M11 8v8M15 8v8M19 8v8" />
|
|
</svg>
|
|
</div>
|
|
<div className="home-card-text">
|
|
<span className="home-card-label">Escanear TSI</span>
|
|
<span className="home-card-arrow">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="9 18 15 12 9 6" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HomeView;
|