import React from "react";
import { Link } from "gatsby";

import Layout from "../components/layout/index";
import Seo from "../components/seo";
import RealisationCard from "../components/realisationCard";
import "../scss/index.scss";
import Art from "../images/undraw_Art.svg";
import Header from "../components/header";


const IndexPage = () => {
	return (
		<Layout>
			<Seo title="Association de travailleuses et travailleurs du numérique" />
			<div className="page-content">
				<Header />
				<section className="services-list">
					<div className="service-type">
						<div className="service-type-header">
							<p className="service-name">Développement web</p>
							<img
								src={Art}
								className="service-type-image"
								alt="random content"
							/>
						</div>
						<p className="service-description">
							Envie d'une présence sur le web ? Nous concevons votre e-commerce,
							blog, portfolio ...
						</p>
						<Link to="/services#web-dev" className="service-link">
							<span> ... et plus encore !</span>
						</Link>
					</div>
					<div className="service-type">
						<div className="service-type-header">
							<p className="service-name">Développement applicatif</p>
							<img
								src={Art}
								className="service-type-image"
								alt="random content"
							/>
						</div>
						<p className="service-description">
							Besoin d'une application pour votre entreprise ? Nous sommes à
							l'écoute pour développer l'outil nécessaire ...
						</p>
						<Link to="/services#app-dev" className="service-link">
							<span> ... et plus encore !</span>
						</Link>
					</div>
					<div className="service-type">
						<div className="service-type-header">
							<p className="service-name">Formations et assistance</p>
							<img
								src={Art}
								className="service-type-image"
								alt="random content"
							/>
						</div>
						<p className="service-description">
							Montez en compétence avec nos formations en bureautique ou au
							développement : CMS - Linux - Base de donnée SQL ...
						</p>
						<Link
							to="/services#formation-et-assistance"
							className="service-link">
							<span> ... et plus encore !</span>
						</Link>
					</div>
					<div className="service-type">
						<div className="service-type-header">
							<p className="service-name">Réseau</p>
							<img
								src={Art}
								className="service-type-image"
								alt="random content"
							/>
						</div>
						<p className="service-description">
							Nous intervenons ou conceptualisons votre infrastructure réseau, à
							la fois hardware et software ...
						</p>
						<Link to="/services#reseau" className="service-link">
							<span> ... et plus encore !</span>
						</Link>
					</div>
				</section>
				<section className="page-section made-by-us">
					<h3 className="section-title">Nos réalisations</h3>
					<div className="list-card">
						<RealisationCard
							cardName="pyHeatPump"
							cardDescription="Projet de remplacement du RPiPasserelle d'OTEC."
							techTag="Python"
						/>
						<RealisationCard
							cardName="Supervision"
							cardDescription="Interface graphique de gestion pour pyHeatPump."
							techTag="Python,Symphony"
						/>
						<RealisationCard
							cardName="Chronobriq"
							cardDescription="Un outil de gestion de comptabilité horaire."
							techTag="Ruby on Rails,React.js,Redux,React-intl"
						/>
					</div>
				</section>
			</div>
		</Layout>
	);
};

export default IndexPage;
