init commit
This commit is contained in:
Thomas Fransolet
parent
c76a4a808e
commit
11f4fcda1c
6603
package-lock.json
generated
Normal file
6603
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/unov.png
Normal file
BIN
public/unov.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
@ -1,26 +1,51 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
@theme {
|
||||||
--background: #ffffff;
|
--color-primary: #309CB0;
|
||||||
--foreground: #171717;
|
--color-primary-light: #72B9C4;
|
||||||
|
--color-primary-lighter: #ABD3DC;
|
||||||
|
--color-background-light: #F9F6F9;
|
||||||
|
--color-background-dark: #221610;
|
||||||
|
|
||||||
|
--font-display: "Public Sans", sans-serif;
|
||||||
|
|
||||||
|
@keyframes marquee {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@theme inline {
|
:root {
|
||||||
--color-background: var(--background);
|
--background: #F9F6F9;
|
||||||
--color-foreground: var(--foreground);
|
--foreground: #0f172a;
|
||||||
--font-sans: var(--font-geist-sans);
|
--primary: #309CB0;
|
||||||
--font-mono: var(--font-geist-mono);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--background: #0a0a0a;
|
--background: #221610;
|
||||||
--foreground: #ededed;
|
--foreground: #f8fafc;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: var(--font-display);
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-marquee {
|
||||||
|
animation: marquee 30s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
@ -1,20 +1,16 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Public_Sans } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const publicSans = Public_Sans({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-public-sans",
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
|
||||||
variable: "--font-geist-mono",
|
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
|
weight: ["300", "400", "500", "700", "900"],
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "UNOV | L'innovation au service de l'utilisateur",
|
||||||
description: "Generated by create next app",
|
description: "Développement web, mobile, desktop & embarqué, intégration IA, modélisation et impression 3D",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
@ -23,9 +19,15 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="fr" className="scroll-smooth">
|
||||||
|
<head>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700,0..1&display=swap"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${publicSans.variable} antialiased font-display`}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
463
src/app/page.tsx
463
src/app/page.tsx
@ -1,65 +1,436 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
|
const [isScrolled, setIsScrolled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
setIsScrolled(window.scrollY > 20);
|
||||||
|
};
|
||||||
|
window.addEventListener("scroll", handleScroll);
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<div className="min-h-screen">
|
||||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
{/* Navigation */}
|
||||||
|
<nav
|
||||||
|
className={`fixed top-0 w-full z-50 transition-all duration-300 ${isScrolled
|
||||||
|
? "bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md py-4 shadow-sm"
|
||||||
|
: "bg-transparent py-6"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
<Image
|
<Image
|
||||||
className="dark:invert"
|
src="/unov.png"
|
||||||
src="/next.svg"
|
alt="UNOV Logo"
|
||||||
alt="Next.js logo"
|
width={120}
|
||||||
width={100}
|
height={40}
|
||||||
height={20}
|
className="h-8 w-auto object-contain"
|
||||||
priority
|
|
||||||
/>
|
/>
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
</div>
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
<div className="hidden md:flex items-center gap-10">
|
||||||
To get started, edit the page.tsx file.
|
<a
|
||||||
|
href="#services"
|
||||||
|
className="text-sm font-medium hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
Services
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#portfolio"
|
||||||
|
className="text-sm font-medium hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
Portfolio
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#technologies"
|
||||||
|
className="text-sm font-medium hover:text-primary transition-colors"
|
||||||
|
>
|
||||||
|
Technologies
|
||||||
|
</a>
|
||||||
|
<button className="bg-primary hover:bg-primary-light text-white px-6 py-2.5 rounded-lg text-sm font-bold transition-all shadow-lg shadow-primary/20 hover:scale-105 active:scale-95">
|
||||||
|
Let's Build
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<button className="md:hidden">
|
||||||
|
<span className="material-symbols-outlined">menu</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<section className="relative h-screen flex items-center pt-20 overflow-hidden">
|
||||||
|
<div className="absolute inset-0 z-0">
|
||||||
|
<div className="absolute inset-0 bg-black/40 z-10"></div>
|
||||||
|
{/* Using a placeholder high-quality image URL as fallback,
|
||||||
|
but since generate_image failed, I'll use a reliable source */}
|
||||||
|
<img
|
||||||
|
src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop"
|
||||||
|
alt="Hero Background"
|
||||||
|
className="w-full h-full object-cover opacity-80 dark:opacity-40"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="container mx-auto px-6 relative z-20">
|
||||||
|
<div className="max-w-4xl mx-auto text-center flex flex-col items-center">
|
||||||
|
<div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-primary text-xs font-bold uppercase tracking-widest mb-8 bg-primary/10 backdrop-blur-sm border border-primary/20">
|
||||||
|
<span className="relative flex h-2 w-2">
|
||||||
|
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
||||||
|
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
|
||||||
|
</span>
|
||||||
|
Tech Precision Agency
|
||||||
|
</div>
|
||||||
|
<h1 className="text-5xl md:text-8xl font-black leading-[1.05] mb-8 tracking-tight text-white drop-shadow-2xl">
|
||||||
|
L'innovation au service de{" "}
|
||||||
|
<span className="text-primary italic">l'utilisateur</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
<p className="text-lg md:text-2xl mb-12 leading-relaxed max-w-2xl text-white/90 drop-shadow-lg font-light">
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
Développement web, mobile, desktop & embarqué, intégration IA,
|
||||||
<a
|
modélisation et impression 3D.
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
</p>
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
<div className="flex flex-col sm:flex-row gap-6 justify-center">
|
||||||
>
|
<button className="bg-primary text-white px-10 py-4 rounded-xl text-lg font-bold hover:brightness-110 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-2 shadow-xl shadow-primary/30">
|
||||||
Templates
|
Start a Project{" "}
|
||||||
</a>{" "}
|
<span className="material-symbols-outlined">arrow_forward</span>
|
||||||
or the{" "}
|
</button>
|
||||||
<a
|
<button className="bg-white/10 backdrop-blur-md text-white border border-white/20 px-10 py-4 rounded-xl text-lg font-bold hover:bg-white/20 transition-all">
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
View Portfolio
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
</button>
|
||||||
>
|
</div>
|
||||||
Learning
|
</div>
|
||||||
</a>{" "}
|
</div>
|
||||||
center.
|
{/* Subtle Scroll Indicator */}
|
||||||
|
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-70">
|
||||||
|
<span className="material-symbols-outlined text-white text-4xl">
|
||||||
|
expand_more
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Services Section */}
|
||||||
|
<section className="bg-background-light dark:bg-background-dark/50 py-32" id="services">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-end mb-20 gap-8">
|
||||||
|
<div className="max-w-xl">
|
||||||
|
<h2 className="text-primary font-bold uppercase tracking-widest text-sm mb-4">
|
||||||
|
Expertise
|
||||||
|
</h2>
|
||||||
|
<h3 className="text-4xl md:text-6xl font-black leading-tight text-slate-900 dark:text-white">
|
||||||
|
Nos Services Experts
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-500 dark:text-slate-400 max-w-sm mb-2 text-lg">
|
||||||
|
Des solutions sur-mesure conçues avec une rigueur mathématique et
|
||||||
|
une vision artistique.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
|
||||||
<a
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-10">
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
{/* Service Cards */}
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
{[
|
||||||
target="_blank"
|
{
|
||||||
rel="noopener noreferrer"
|
title: "Software Development",
|
||||||
|
desc: "Architectures évolutives et robustes. Nous transformons des concepts complexes en applications fluides.",
|
||||||
|
icon: "code_blocks",
|
||||||
|
img: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?q=80&w=2070&auto=format&fit=crop",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "AI Integration",
|
||||||
|
desc: "Automatisation intelligente et machine learning avancé pour propulser votre efficacité opérationnelle.",
|
||||||
|
icon: "psychology",
|
||||||
|
img: "https://images.unsplash.com/photo-1677442136019-21780ecad995?q=80&w=2070&auto=format&fit=crop",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "3D & Printing",
|
||||||
|
desc: "De la conception virtuelle à la réalité physique. Prototypage rapide et ingénierie de précision.",
|
||||||
|
icon: "precision_manufacturing",
|
||||||
|
img: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?q=80&w=2070&auto=format&fit=crop",
|
||||||
|
},
|
||||||
|
].map((service, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="group bg-white dark:bg-white/5 rounded-[2.5rem] p-10 shadow-sm hover:shadow-2xl transition-all duration-500 border border-slate-100 dark:border-white/10 hover:-translate-y-2"
|
||||||
>
|
>
|
||||||
<Image
|
<div className="size-16 bg-primary/10 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-primary group-hover:text-white transition-colors duration-500">
|
||||||
className="dark:invert"
|
<span className="material-symbols-outlined text-primary group-hover:text-white text-3xl transition-colors duration-500">
|
||||||
src="/vercel.svg"
|
{service.icon}
|
||||||
alt="Vercel logomark"
|
</span>
|
||||||
width={16}
|
</div>
|
||||||
height={16}
|
<h4 className="text-2xl font-bold mb-4 dark:text-white">
|
||||||
|
{service.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-slate-500 dark:text-slate-400 leading-relaxed mb-8">
|
||||||
|
{service.desc}
|
||||||
|
</p>
|
||||||
|
<div className="overflow-hidden rounded-2xl aspect-video grayscale group-hover:grayscale-0 transition-all duration-700">
|
||||||
|
<img
|
||||||
|
src={service.img}
|
||||||
|
alt={service.title}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
|
||||||
/>
|
/>
|
||||||
Deploy Now
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Technologies Marquee */}
|
||||||
|
<section
|
||||||
|
className="py-20 border-y border-slate-200 dark:border-white/5 overflow-hidden bg-white dark:bg-background-dark"
|
||||||
|
id="technologies"
|
||||||
|
>
|
||||||
|
<div className="flex whitespace-nowrap animate-marquee">
|
||||||
|
{[...Array(2)].map((_, i) => (
|
||||||
|
<div key={i} className="flex items-center gap-24 px-12">
|
||||||
|
{[
|
||||||
|
{ name: "React", icon: "data_object" },
|
||||||
|
{ name: "Python", icon: "terminal" },
|
||||||
|
{ name: "AWS", icon: "cloud" },
|
||||||
|
{ name: "OpenAI", icon: "smart_toy" },
|
||||||
|
{ name: "Three.js", icon: "view_in_ar" },
|
||||||
|
{ name: "TypeScript", icon: "layers" },
|
||||||
|
{ name: "Node.js", icon: "settings_input_component" },
|
||||||
|
].map((tech, j) => (
|
||||||
|
<span
|
||||||
|
key={j}
|
||||||
|
className="text-3xl font-black text-slate-300 dark:text-slate-700 uppercase tracking-tighter flex items-center gap-3 hover:text-primary transition-colors cursor-default"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-4xl">
|
||||||
|
{tech.icon}
|
||||||
|
</span>{" "}
|
||||||
|
{tech.name}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Portfolio Section */}
|
||||||
|
<section className="bg-slate-50 dark:bg-background-dark/30 py-32" id="portfolio">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="text-center mb-24">
|
||||||
|
<h2 className="text-primary font-bold uppercase tracking-widest text-sm mb-4">
|
||||||
|
Réalisations
|
||||||
|
</h2>
|
||||||
|
<h3 className="text-4xl md:text-6xl font-black mb-6 text-slate-900 dark:text-white">
|
||||||
|
Portfolio Sélectionné
|
||||||
|
</h3>
|
||||||
|
<div className="w-24 h-1.5 mx-auto bg-primary-light rounded-full"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-16">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: "Solaris Ecosystem",
|
||||||
|
category: "Software",
|
||||||
|
desc: "Une plateforme IoT complète pour la gestion d'énergie renouvelable.",
|
||||||
|
img: "https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?q=80&w=1974&auto=format&fit=crop",
|
||||||
|
offset: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "InsightCore AI",
|
||||||
|
category: "Artificial Intelligence",
|
||||||
|
desc: "Analyse prédictive en temps réel pour le secteur de la finance.",
|
||||||
|
img: "https://images.unsplash.com/photo-1551288049-bb6c9b468a79?q=80&w=2070&auto=format&fit=crop",
|
||||||
|
offset: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "AeroPro Modules",
|
||||||
|
category: "3D Engineering",
|
||||||
|
desc: "Composants imprimés en 3D haute performance pour l'industrie aéronautique.",
|
||||||
|
img: "https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?q=80&w=2070&auto=format&fit=crop",
|
||||||
|
offset: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Vortex Dashboard",
|
||||||
|
category: "Cloud Services",
|
||||||
|
desc: "Interface de gestion cloud pour équipes distribuées.",
|
||||||
|
img: "https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=2070&auto=format&fit=crop",
|
||||||
|
offset: true,
|
||||||
|
},
|
||||||
|
].map((project, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className={`group relative overflow-hidden rounded-[3rem] aspect-[4/3] cursor-pointer shadow-2xl ${project.offset ? "md:translate-y-20" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={project.img}
|
||||||
|
alt={project.title}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-12">
|
||||||
|
<span className="text-primary font-bold text-sm mb-3 uppercase tracking-widest">
|
||||||
|
{project.category}
|
||||||
|
</span>
|
||||||
|
<h4 className="text-white text-4xl font-bold mb-4">
|
||||||
|
{project.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-slate-300 text-lg mb-8 max-w-sm">
|
||||||
|
{project.desc}
|
||||||
|
</p>
|
||||||
|
<button className="w-fit text-white flex items-center gap-2 font-bold group/btn text-lg">
|
||||||
|
View Case Study{" "}
|
||||||
|
<span className="material-symbols-outlined group-hover/btn:translate-x-2 transition-transform">
|
||||||
|
arrow_right_alt
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-48 text-center">
|
||||||
|
<button className="px-12 py-5 border-2 border-primary text-primary hover:bg-primary hover:text-white transition-all duration-300 font-bold rounded-2xl text-xl shadow-xl shadow-primary/10">
|
||||||
|
See More Excellence
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact Form Section */}
|
||||||
|
<section className="bg-white dark:bg-background-dark py-32">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="max-w-6xl mx-auto bg-slate-50 dark:bg-white/5 rounded-[4rem] overflow-hidden shadow-2xl flex flex-col md:row border border-slate-200/50 dark:border-white/5">
|
||||||
|
<div className="md:w-2/5 bg-primary p-16 text-white flex flex-col justify-between relative overflow-hidden">
|
||||||
|
<div className="relative z-10">
|
||||||
|
<h4 className="text-4xl font-black mb-8 leading-tight">
|
||||||
|
Let's build the future together
|
||||||
|
</h4>
|
||||||
|
<p className="opacity-90 text-xl leading-relaxed font-light">
|
||||||
|
Prêt à donner vie à votre vision ? Notre équipe est prête à
|
||||||
|
relever vos défis les plus complexes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-8 relative z-10 pt-12">
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<div className="size-12 bg-white/10 rounded-xl flex items-center justify-center backdrop-blur-md">
|
||||||
|
<span className="material-symbols-outlined">mail</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-medium">hello@unov.tech</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<div className="size-12 bg-white/10 rounded-xl flex items-center justify-center backdrop-blur-md">
|
||||||
|
<span className="material-symbols-outlined">location_on</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-medium">Paris, France</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Decorative circle */}
|
||||||
|
<div className="absolute -bottom-24 -right-24 size-64 bg-white/10 rounded-full blur-3xl"></div>
|
||||||
|
</div>
|
||||||
|
<div className="md:w-3/5 p-16 bg-white dark:bg-zinc-900/50">
|
||||||
|
<form className="space-y-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest opacity-60 ml-2">
|
||||||
|
Nom complet
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
className="w-full bg-slate-100 dark:bg-white/5 border border-transparent focus:border-primary focus:bg-white dark:focus:bg-zinc-800 focus:ring-4 focus:ring-primary/10 rounded-2xl p-5 transition-all outline-none"
|
||||||
|
placeholder="John Doe"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest opacity-60 ml-2">
|
||||||
|
Email professionnel
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
className="w-full bg-slate-100 dark:bg-white/5 border border-transparent focus:border-primary focus:bg-white dark:focus:bg-zinc-800 focus:ring-4 focus:ring-primary/10 rounded-2xl p-5 transition-all outline-none"
|
||||||
|
placeholder="john@example.com"
|
||||||
|
type="email"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest opacity-60 ml-2">
|
||||||
|
Service souhaité
|
||||||
|
</label>
|
||||||
|
<select className="w-full bg-slate-100 dark:bg-white/5 border border-transparent focus:border-primary focus:bg-white dark:focus:bg-zinc-800 focus:ring-4 focus:ring-primary/10 rounded-2xl p-5 transition-all outline-none appearance-none cursor-pointer">
|
||||||
|
<option>Software Development</option>
|
||||||
|
<option>AI Integration</option>
|
||||||
|
<option>3D Modeling & Printing</option>
|
||||||
|
<option>Autre</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-xs font-bold uppercase tracking-widest opacity-60 ml-2">
|
||||||
|
Votre Message
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
className="w-full bg-slate-100 dark:bg-white/5 border border-transparent focus:border-primary focus:bg-white dark:focus:bg-zinc-800 focus:ring-4 focus:ring-primary/10 rounded-2xl p-5 transition-all outline-none resize-none"
|
||||||
|
placeholder="Parlez-nous de votre projet..."
|
||||||
|
rows={5}
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<button className="w-full bg-primary text-white py-6 rounded-2xl font-black text-xl shadow-2xl shadow-primary/20 hover:brightness-110 active:scale-[0.98] transition-all">
|
||||||
|
Envoyer la demande
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="py-20 border-t border-slate-200 dark:border-white/5 bg-background-light dark:bg-background-dark">
|
||||||
|
<div className="container mx-auto px-6">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center gap-12">
|
||||||
|
<div className="flex flex-col items-center md:items-start gap-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Image
|
||||||
|
src="/unov.png"
|
||||||
|
alt="UNOV Logo"
|
||||||
|
width={100}
|
||||||
|
height={30}
|
||||||
|
className="h-6 w-auto object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-500 text-sm max-w-xs text-center md:text-left">
|
||||||
|
Precision technology agency focusing on high-end software and AI
|
||||||
|
solutions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-6">
|
||||||
|
<div className="flex gap-8">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-slate-400 hover:text-primary transition-all hover:scale-110"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-3xl">
|
||||||
|
language
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
href="#"
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
className="text-slate-400 hover:text-primary transition-all hover:scale-110"
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
>
|
||||||
Documentation
|
<span className="material-symbols-outlined text-3xl">
|
||||||
|
public
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-slate-400 hover:text-primary transition-all hover:scale-110"
|
||||||
|
>
|
||||||
|
<span className="material-symbols-outlined text-3xl">
|
||||||
|
groups
|
||||||
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<div className="text-slate-500 text-sm font-medium">
|
||||||
|
© {new Date().getFullYear()} UNOV. Perfection in every line.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user