Initial commit files
This commit is contained in:
313
app/globals.css
313
app/globals.css
@@ -1,26 +1,311 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
/* ── Aiero color tokens (extracted from source) ── */
|
||||
--aiero-bg-dark: #1F1F1F;
|
||||
--aiero-bg-card-dark: #282828;
|
||||
--aiero-bg-card-border: #3F3F3F;
|
||||
--aiero-accent-teal: #45D0BD;
|
||||
--aiero-accent-blue: #44B6E9;
|
||||
--aiero-accent-red: #EF6464;
|
||||
--aiero-accent-red-hover: #F57E7E;
|
||||
--aiero-purple-start: #8258C8;
|
||||
--aiero-purple-mid: #6766C8;
|
||||
--aiero-purple-end: #2C84C8;
|
||||
--aiero-card-purple: #343F78;
|
||||
--aiero-card-purple-2: #56619E;
|
||||
--aiero-card-lavender: #AC8DE0;
|
||||
--aiero-text-muted: #87899B;
|
||||
|
||||
/* button gradient angles */
|
||||
--button-border-gradient-angle: 92deg;
|
||||
--button-gradient-colorstop-1: 0%;
|
||||
--button-gradient-colorstop-2: 100%;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-background: #ffffff;
|
||||
--color-foreground: #1F1F1F;
|
||||
--color-aiero-dark: #1F1F1F;
|
||||
--color-aiero-card-dark: #282828;
|
||||
--color-aiero-card-border: #3F3F3F;
|
||||
--color-aiero-teal: #45D0BD;
|
||||
--color-aiero-blue: #44B6E9;
|
||||
--color-aiero-red: #EF6464;
|
||||
--color-aiero-red-hover: #F57E7E;
|
||||
--color-aiero-purple-start: #8258C8;
|
||||
--color-aiero-purple-mid: #6766C8;
|
||||
--color-aiero-purple-end: #2C84C8;
|
||||
--color-aiero-card-purple: #343F78;
|
||||
--color-aiero-card-purple-2: #56619E;
|
||||
--color-aiero-card-lavender: #AC8DE0;
|
||||
--color-aiero-text-muted: #87899B;
|
||||
|
||||
--font-sans: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-sora: var(--font-sora), sans-serif;
|
||||
--font-dm-sans: var(--font-dm-sans), sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
/* ── Base resets ── */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
background: #ffffff;
|
||||
color: #1F1F1F;
|
||||
font-family: var(--font-manrope), ui-sans-serif, system-ui, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/* ── Aiero button base ── */
|
||||
.aiero-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: var(--font-sora), sans-serif;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aiero-button .button-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Solid variant */
|
||||
.aiero-button-solid {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
/* Gradient border variant */
|
||||
.aiero-button-gradient-border {
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1.5px;
|
||||
background: linear-gradient(
|
||||
var(--button-border-gradient-angle),
|
||||
var(--aiero-accent-teal) var(--button-gradient-colorstop-1),
|
||||
var(--aiero-accent-blue) var(--button-gradient-colorstop-2)
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border .button-inner::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border .button-inner::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
var(--button-border-gradient-angle),
|
||||
var(--aiero-accent-teal) var(--button-gradient-colorstop-1),
|
||||
var(--aiero-accent-blue) var(--button-gradient-colorstop-2)
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border:hover .button-inner::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-border:hover {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* Gradient fill variant */
|
||||
.aiero-button-gradient-fill {
|
||||
background: linear-gradient(
|
||||
var(--button-border-gradient-angle),
|
||||
var(--aiero-accent-teal) var(--button-gradient-colorstop-1),
|
||||
var(--aiero-accent-blue) var(--button-gradient-colorstop-2)
|
||||
);
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.aiero-button-gradient-fill::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1.5px;
|
||||
background: linear-gradient(
|
||||
var(--button-border-gradient-angle),
|
||||
var(--aiero-accent-teal) var(--button-gradient-colorstop-1),
|
||||
var(--aiero-accent-blue) var(--button-gradient-colorstop-2)
|
||||
);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* ── Gradient text ── */
|
||||
.gradient-text-purple {
|
||||
background: linear-gradient(103deg, #8258C8 0%, #2C84C8 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.gradient-text-counter {
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* ── Icon decoration (curved corners) ── */
|
||||
.icon-decoration {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-decoration .icon-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.icon-decoration::before,
|
||||
.icon-decoration::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ── Marquee animation ── */
|
||||
@keyframes marquee {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-marquee {
|
||||
animation: marquee 15s linear infinite;
|
||||
}
|
||||
|
||||
/* ── Counter animation ── */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Aiero heading animation ── */
|
||||
@keyframes headingReveal {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-heading-reveal {
|
||||
animation: headingReveal 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* ── Scroll down button decoration ── */
|
||||
.scroll-btn-decoration {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scroll-btn-decoration::before,
|
||||
.scroll-btn-decoration::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.scroll-btn-decoration::before {
|
||||
top: -20px;
|
||||
left: 0;
|
||||
border-bottom-left-radius: 20px;
|
||||
box-shadow: 0 20px 0 0 #ffffff;
|
||||
}
|
||||
|
||||
.scroll-btn-decoration::after {
|
||||
bottom: -20px;
|
||||
left: 0;
|
||||
border-top-left-radius: 20px;
|
||||
box-shadow: 0 -20px 0 0 #ffffff;
|
||||
}
|
||||
|
||||
/* ── Subheading tag ── */
|
||||
.aiero-subheading {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-family: var(--font-sora), sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aiero-subheading::before {
|
||||
content: "";
|
||||
width: 30px;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
@@ -1,20 +1,29 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Manrope, Sora, DM_Sans } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
const manrope = Manrope({
|
||||
variable: "--font-manrope",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const sora = Sora({
|
||||
variable: "--font-sora",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const dmSans = DM_Sans({
|
||||
variable: "--font-dm-sans",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Home 9 – Aiero",
|
||||
description:
|
||||
"Revolutionizing businesses with cutting-edge AI solutions and groundbreaking innovation. Aiero – AI agency committed to transforming businesses.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -25,9 +34,9 @@ export default function RootLayout({
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
className={`${manrope.variable} ${sora.variable} ${dmSans.variable}`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
<body suppressHydrationWarning>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
76
app/page.tsx
76
app/page.tsx
@@ -1,65 +1,21 @@
|
||||
import Image from "next/image";
|
||||
import { Navbar } from "@/components/aiero/Navbar";
|
||||
import { HeroSection } from "@/components/aiero/HeroSection";
|
||||
import { CardsGrid } from "@/components/aiero/CardsGrid";
|
||||
import { PossibilitiesSection } from "@/components/aiero/PossibilitiesSection";
|
||||
import { MarqueeStrip } from "@/components/aiero/MarqueeStrip";
|
||||
import { FeaturesSection } from "@/components/aiero/FeaturesSection";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
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]"
|
||||
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"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</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="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main className="bg-white">
|
||||
<div className="absolute inset-x-0 top-0 z-50">
|
||||
<Navbar />
|
||||
</div>
|
||||
<HeroSection />
|
||||
<CardsGrid />
|
||||
<PossibilitiesSection />
|
||||
<MarqueeStrip />
|
||||
<FeaturesSection />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user