fix：修复类型提示错误
This commit is contained in:
zdl
@@ -1,40 +1,52 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { svgs } from "./svgs";
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { svgs } from './svgs';
|
||||
|
||||
const Button = ({
|
||||
className,
|
||||
href,
|
||||
onClick,
|
||||
children,
|
||||
px,
|
||||
white,
|
||||
interface ButtonProps {
|
||||
className?: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
children?: React.ReactNode;
|
||||
px?: string;
|
||||
white?: boolean;
|
||||
isPrimary?: boolean;
|
||||
isSecondary?: boolean;
|
||||
}
|
||||
|
||||
const Button: React.FC<ButtonProps> = ({
|
||||
className,
|
||||
href,
|
||||
onClick,
|
||||
children,
|
||||
px,
|
||||
white,
|
||||
}) => {
|
||||
const classes = `button relative inline-flex items-center justify-center h-11 ${
|
||||
px || "px-7"
|
||||
} ${white ? "text-n-8" : "text-n-1"} transition-colors hover:text-color-1 ${
|
||||
className || ""
|
||||
}`;
|
||||
const classes = `button relative inline-flex items-center justify-center h-11 ${
|
||||
px || 'px-7'
|
||||
} ${white ? 'text-n-8' : 'text-n-1'} transition-colors hover:text-color-1 ${
|
||||
className || ''
|
||||
}`;
|
||||
|
||||
const spanClasses = `relative z-10`;
|
||||
const spanClasses = `relative z-10`;
|
||||
|
||||
return href ? (
|
||||
href.startsWith("mailto:") ? (
|
||||
<a href={href} className={classes}>
|
||||
<span className={spanClasses}>{children}</span>
|
||||
{svgs(white)}
|
||||
</a>
|
||||
) : (
|
||||
<Link href={href} className={classes}>
|
||||
<span className={spanClasses}>{children}</span>
|
||||
{svgs(white)}
|
||||
</Link>
|
||||
)
|
||||
return href ? (
|
||||
href.startsWith('mailto:') ? (
|
||||
<a href={href} className={classes}>
|
||||
<span className={spanClasses}>{children}</span>
|
||||
{svgs(white)}
|
||||
</a>
|
||||
) : (
|
||||
<button className={classes} onClick={onClick}>
|
||||
<span className={spanClasses}>{children}</span>
|
||||
{svgs(white)}
|
||||
</button>
|
||||
);
|
||||
<Link to={href} className={classes}>
|
||||
<span className={spanClasses}>{children}</span>
|
||||
{svgs(white)}
|
||||
</Link>
|
||||
)
|
||||
) : (
|
||||
<button className={classes} onClick={onClick}>
|
||||
<span className={spanClasses}>{children}</span>
|
||||
{svgs(white)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from "react";
|
||||
import Link, { LinkProps } from "next/link";
|
||||
|
||||
type CommonProps = {
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
isPrimary?: boolean;
|
||||
isSecondary?: boolean;
|
||||
};
|
||||
|
||||
type ButtonAsButton = {
|
||||
as?: "button";
|
||||
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
|
||||
|
||||
type ButtonAsAnchor = {
|
||||
as: "a";
|
||||
} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
||||
|
||||
type ButtonAsLink = {
|
||||
as: "link";
|
||||
} & LinkProps;
|
||||
|
||||
type ButtonProps = CommonProps &
|
||||
(ButtonAsButton | ButtonAsAnchor | ButtonAsLink);
|
||||
|
||||
const Button: React.FC<ButtonProps> = ({
|
||||
className,
|
||||
children,
|
||||
isPrimary,
|
||||
isSecondary,
|
||||
as = "button",
|
||||
...props
|
||||
}) => {
|
||||
const isLink = as === "link";
|
||||
const Component: React.ElementType = isLink ? Link : as;
|
||||
|
||||
return (
|
||||
<Component
|
||||
className={`relative inline-flex justify-center items-center h-10 px-3.5 rounded-lg text-title-5 cursor-pointer transition-all ${
|
||||
isPrimary ? "bg-white text-black hover:bg-white/90" : ""
|
||||
} ${
|
||||
isSecondary
|
||||
? "shadow-[0.0625rem_0.0625rem_0.0625rem_0_rgba(255,255,255,0.10)_inset] text-white after:absolute after:inset-0 after:border after:border-line after:rounded-lg after:pointer-events-none after:transition-colors hover:after:border-white"
|
||||
: ""
|
||||
} ${className || ""}`}
|
||||
{...(isLink ? (props as LinkProps) : props)}
|
||||
>
|
||||
{children}
|
||||
</Component>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -1,20 +1,25 @@
|
||||
import Image from "../Image";
|
||||
import React from 'react';
|
||||
import Image from '../Image';
|
||||
|
||||
const Generating = ({ className }) => (
|
||||
<div
|
||||
className={`flex items-center h-[3.375rem] px-6 bg-n-8/80 rounded-[1.6875rem] ${
|
||||
className || ""
|
||||
} text-base`}
|
||||
>
|
||||
<Image
|
||||
className="w-5 h-5 mr-4"
|
||||
src="/images/loading.png"
|
||||
width={20}
|
||||
height={20}
|
||||
alt="Loading"
|
||||
/>
|
||||
AI is generating|
|
||||
</div>
|
||||
interface GeneratingProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Generating: React.FC<GeneratingProps> = ({ className }) => (
|
||||
<div
|
||||
className={`flex items-center h-[3.375rem] px-6 bg-n-8/80 rounded-[1.6875rem] ${
|
||||
className || ''
|
||||
} text-base`}
|
||||
>
|
||||
<Image
|
||||
className="w-5 h-5 mr-4"
|
||||
src="/images/loading.png"
|
||||
width={20}
|
||||
height={20}
|
||||
alt="Loading"
|
||||
/>
|
||||
AI is generating|
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Generating;
|
||||
|
||||
@@ -1,17 +1,21 @@
|
||||
import { useState } from "react";
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const Image = ({ className, ...props }) => {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
className={`inline-block align-top opacity-0 transition-opacity ${
|
||||
loaded && "opacity-100"
|
||||
} ${className}`}
|
||||
onLoad={() => setLoaded(true)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
const Image: React.FC<ImageProps> = ({ className, ...props }) => {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
return (
|
||||
<img
|
||||
className={`inline-block align-top opacity-0 transition-opacity ${
|
||||
loaded && 'opacity-100'
|
||||
} ${className || ''}`}
|
||||
onLoad={() => setLoaded(true)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Image;
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
import Section from "@/components/Section";
|
||||
import Image from "@/components/Image";
|
||||
import Button from "@/components/Button";
|
||||
|
||||
type JoinProps = {};
|
||||
|
||||
const Join = ({}: JoinProps) => (
|
||||
<Section crosses>
|
||||
<div className="container">
|
||||
<div className="relative max-w-[43.125rem] mx-auto py-8 md:py-14 xl:py-0">
|
||||
<div className="relative z-1 text-center">
|
||||
<h1 className="h1 mb-6">
|
||||
Be part of the future of{" "}
|
||||
<span className="inline-block relative">
|
||||
Brainwave
|
||||
<Image
|
||||
className="absolute top-full left-0 w-full"
|
||||
src="/images/curve.png"
|
||||
width={624}
|
||||
height={28}
|
||||
alt="Curve"
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
<p className="body-1 mb-8 text-n-4">
|
||||
Unleash the power of AI within Brainwave. Upgrade your
|
||||
productivity with Brainwave, the open AI chat app.
|
||||
</p>
|
||||
<Button href="/pricing" white>
|
||||
Get started
|
||||
</Button>
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[46.5rem] h-[46.5rem] border border-n-2/5 rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 w-[39.25rem] h-[39.25rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[30.625rem] h-[30.625rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[21.5rem] h-[21.5rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[13.75rem] h-[13.75rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[46.5rem] h-[46.5rem] border border-n-2/5 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-60 mix-blend-color-dodge pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 w-[58.85rem] h-[58.85rem] -translate-x-3/4 -translate-y-1/2">
|
||||
<Image
|
||||
className="w-full"
|
||||
src="/images/gradient.png"
|
||||
width={942}
|
||||
height={942}
|
||||
alt="Gradient"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -top-[5.75rem] left-[18.5rem] -z-1 w-[19.8125rem] pointer-events-none lg:-top-15 lg:left-[5.5rem]">
|
||||
<Image
|
||||
className="w-full"
|
||||
src="/images/join/shapes-1.svg"
|
||||
width={317}
|
||||
height={293}
|
||||
alt="Shapes 1"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute right-[15rem] -bottom-[7rem] -z-1 w-[28.1875rem] pointer-events-none lg:right-7 lg:-bottom-[5rem]">
|
||||
<Image
|
||||
className="w-full"
|
||||
src="/images/join/shapes-2.svg"
|
||||
width={451}
|
||||
height={266}
|
||||
alt="Shapes 2"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
|
||||
export default Join;
|
||||
@@ -1,73 +0,0 @@
|
||||
import Section from "@/components/Section";
|
||||
import Image from "@/components/Image";
|
||||
import Button from "@/components/Button";
|
||||
|
||||
type JoinProps = {};
|
||||
|
||||
const Join = ({}: JoinProps) => (
|
||||
<Section crosses>
|
||||
<div className="container">
|
||||
<div className="relative max-w-[43.125rem] mx-auto py-8 md:py-14 xl:py-0">
|
||||
<div className="relative z-1 text-center">
|
||||
<h1 className="h1 mb-6">
|
||||
Be part of the future of{" "}
|
||||
<span className="inline-block relative">
|
||||
Brainwave
|
||||
<Image
|
||||
className="absolute top-full left-0 w-full"
|
||||
src="/images/curve.png"
|
||||
width={624}
|
||||
height={28}
|
||||
alt="Curve"
|
||||
/>
|
||||
</span>
|
||||
</h1>
|
||||
<p className="body-1 mb-8 text-n-4">
|
||||
Unleash the power of AI within Brainwave. Upgrade your
|
||||
productivity with Brainwave, the open AI chat app.
|
||||
</p>
|
||||
<Button href="/pricing" white>
|
||||
Get started
|
||||
</Button>
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[46.5rem] h-[46.5rem] border border-n-2/5 rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 w-[39.25rem] h-[39.25rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[30.625rem] h-[30.625rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[21.5rem] h-[21.5rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[13.75rem] h-[13.75rem] border border-n-2/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
|
||||
</div>
|
||||
<div className="absolute top-1/2 left-1/2 w-[46.5rem] h-[46.5rem] border border-n-2/5 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-60 mix-blend-color-dodge pointer-events-none">
|
||||
<div className="absolute top-1/2 left-1/2 w-[58.85rem] h-[58.85rem] -translate-x-3/4 -translate-y-1/2">
|
||||
<Image
|
||||
className="w-full"
|
||||
src="/images/gradient.png"
|
||||
width={942}
|
||||
height={942}
|
||||
alt="Gradient"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -top-[5.75rem] left-[18.5rem] -z-1 w-[19.8125rem] pointer-events-none lg:-top-15 lg:left-[5.5rem]">
|
||||
<Image
|
||||
className="w-full"
|
||||
src="/images/join/shapes-1.svg"
|
||||
width={317}
|
||||
height={293}
|
||||
alt="Shapes 1"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute right-[15rem] -bottom-[7rem] -z-1 w-[28.1875rem] pointer-events-none lg:right-7 lg:-bottom-[5rem]">
|
||||
<Image
|
||||
className="w-full"
|
||||
src="/images/join/shapes-2.svg"
|
||||
width={451}
|
||||
height={266}
|
||||
alt="Shapes 2"
|
||||
/>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
|
||||
export default Join;
|
||||
@@ -1,53 +0,0 @@
|
||||
import Image from "../Image";
|
||||
|
||||
const Logos = ({ className }) => (
|
||||
<div className={className}>
|
||||
<h5 className="tagline mb-6 text-center text-n-1/50">
|
||||
Helping people create beautiful content at
|
||||
</h5>
|
||||
<ul className="flex">
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Logos;
|
||||
@@ -1,53 +0,0 @@
|
||||
import Image from "../Image";
|
||||
|
||||
const Logos = ({ className }) => (
|
||||
<div className={className}>
|
||||
<h5 className="tagline mb-6 text-center text-n-1/50">
|
||||
Helping people create beautiful content at
|
||||
</h5>
|
||||
<ul className="flex">
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
<li className="flex items-center justify-center flex-1 h-[8.5rem]">
|
||||
<Image
|
||||
src="/images/yourlogo.svg"
|
||||
width={134}
|
||||
height={28}
|
||||
alt="Logo 3"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Logos;
|
||||
@@ -1,49 +0,0 @@
|
||||
import Image from "../Image";
|
||||
|
||||
const Notification = ({ className, title }) => (
|
||||
<div
|
||||
className={`flex items-center p-4 pr-6 bg-[#474060]/40 backdrop-blur border border-n-1/10 rounded-2xl ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="mr-5">
|
||||
<Image
|
||||
className="w-full rounded-xl"
|
||||
src="/images/notification/image-1.png"
|
||||
width={52}
|
||||
height={52}
|
||||
alt="Image"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h6 className="mb-1 font-semibold text-base">{title}</h6>
|
||||
<div className="flex items-center justify-between">
|
||||
<ul className="flex -m-0.5">
|
||||
{[
|
||||
"/images/notification/image-4.png",
|
||||
"/images/notification/image-3.png",
|
||||
"/images/notification/image-2.png",
|
||||
].map((item, index) => (
|
||||
<li
|
||||
className={`flex w-6 h-6 border-2 border-[#2E2A41] rounded-full overflow-hidden ${
|
||||
index !== 0 ? "-ml-2" : ""
|
||||
}`}
|
||||
key={index}
|
||||
>
|
||||
<Image
|
||||
className="w-full"
|
||||
src={item}
|
||||
width={20}
|
||||
height={20}
|
||||
alt={item}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="body-2 text-[#6C7275]">1m ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Notification;
|
||||
@@ -1,49 +0,0 @@
|
||||
import Image from "../Image";
|
||||
|
||||
const Notification = ({ className, title }) => (
|
||||
<div
|
||||
className={`flex items-center p-4 pr-6 bg-[#474060]/40 backdrop-blur border border-n-1/10 rounded-2xl ${
|
||||
className || ""
|
||||
}`}
|
||||
>
|
||||
<div className="mr-5">
|
||||
<Image
|
||||
className="w-full rounded-xl"
|
||||
src="/images/notification/image-1.png"
|
||||
width={52}
|
||||
height={52}
|
||||
alt="Image"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h6 className="mb-1 font-semibold text-base">{title}</h6>
|
||||
<div className="flex items-center justify-between">
|
||||
<ul className="flex -m-0.5">
|
||||
{[
|
||||
"/images/notification/image-4.png",
|
||||
"/images/notification/image-3.png",
|
||||
"/images/notification/image-2.png",
|
||||
].map((item, index) => (
|
||||
<li
|
||||
className={`flex w-6 h-6 border-2 border-[#2E2A41] rounded-full overflow-hidden ${
|
||||
index !== 0 ? "-ml-2" : ""
|
||||
}`}
|
||||
key={index}
|
||||
>
|
||||
<Image
|
||||
className="w-full"
|
||||
src={item}
|
||||
width={20}
|
||||
height={20}
|
||||
alt={item}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="body-2 text-[#6C7275]">1m ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Notification;
|
||||
@@ -1,57 +1,67 @@
|
||||
const Section = ({
|
||||
className,
|
||||
crosses,
|
||||
crossesOffset,
|
||||
customPaddings,
|
||||
children,
|
||||
import React from 'react';
|
||||
|
||||
interface SectionProps {
|
||||
className?: string;
|
||||
crosses?: boolean;
|
||||
crossesOffset?: string;
|
||||
customPaddings?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const Section: React.FC<SectionProps> = ({
|
||||
className,
|
||||
crosses,
|
||||
crossesOffset,
|
||||
customPaddings,
|
||||
children,
|
||||
}) => (
|
||||
<div
|
||||
className={`relative ${
|
||||
customPaddings ||
|
||||
`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
|
||||
} ${className || ""}`}
|
||||
>
|
||||
{children}
|
||||
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10"></div>
|
||||
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10"></div>
|
||||
{crosses && (
|
||||
<>
|
||||
<div
|
||||
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
|
||||
crossesOffset && crossesOffset
|
||||
} pointer-events-none lg:block xl:left-10 right-10`}
|
||||
></div>
|
||||
<svg
|
||||
className={`hidden absolute -top-[0.3125rem] left-[1.5625rem] ${
|
||||
crossesOffset && crossesOffset
|
||||
} pointer-events-none lg:block xl:left-[2.1875rem]`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="11"
|
||||
height="11"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
|
||||
fill="#ada8c4"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className={`hidden absolute -top-[0.3125rem] right-[1.5625rem] ${
|
||||
crossesOffset && crossesOffset
|
||||
} pointer-events-none lg:block xl:right-[2.1875rem]`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="11"
|
||||
height="11"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
|
||||
fill="#ada8c4"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={`relative ${
|
||||
customPaddings ||
|
||||
`py-10 lg:py-16 xl:py-20 ${crosses ? 'lg:py-32 xl:py-40' : ''}`
|
||||
} ${className || ''}`}
|
||||
>
|
||||
{children}
|
||||
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10"></div>
|
||||
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10"></div>
|
||||
{crosses && (
|
||||
<>
|
||||
<div
|
||||
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
|
||||
crossesOffset && crossesOffset
|
||||
} pointer-events-none lg:block xl:left-10 right-10`}
|
||||
></div>
|
||||
<svg
|
||||
className={`hidden absolute -top-[0.3125rem] left-[1.5625rem] ${
|
||||
crossesOffset && crossesOffset
|
||||
} pointer-events-none lg:block xl:left-[2.1875rem]`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="11"
|
||||
height="11"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
|
||||
fill="#ada8c4"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
className={`hidden absolute -top-[0.3125rem] right-[1.5625rem] ${
|
||||
crossesOffset && crossesOffset
|
||||
} pointer-events-none lg:block xl:right-[2.1875rem]`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="11"
|
||||
height="11"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
|
||||
fill="#ada8c4"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Section;
|
||||
|
||||
@@ -1,195 +0,0 @@
|
||||
import Section from "@/components/Section";
|
||||
import Generating from "@/components/Generating";
|
||||
import Image from "@/components/Image";
|
||||
import Heading from "@/components/Heading";
|
||||
|
||||
type ServicesProps = {
|
||||
containerClassName?: string;
|
||||
};
|
||||
|
||||
const Services = ({ containerClassName }: ServicesProps) => (
|
||||
<Section>
|
||||
<div className={`container ${containerClassName || ""}`}>
|
||||
<Heading
|
||||
title="Generative AI made for creators."
|
||||
text="Brainwave unlocks the potential of AI-powered applications"
|
||||
/>
|
||||
<div className="relative">
|
||||
<div className="relative z-1 flex items-center h-[38.75rem] mb-5 p-8 border border-n-1/10 rounded-3xl overflow-hidden lg:h-[38.75rem] lg:p-20 xl:h-[45.75rem]">
|
||||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none md:w-3/5 xl:w-auto">
|
||||
<Image
|
||||
className="w-full h-full object-cover md:object-right"
|
||||
src="/images/services/service-1.png"
|
||||
width={797}
|
||||
height={733}
|
||||
alt="Smartest AI"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-1 max-w-[17rem] ml-auto">
|
||||
<h4 className="h4 mb-4">Smartest AI</h4>
|
||||
<p className="bpdy-2 mb-[3.125rem] text-n-3">
|
||||
Brainwave unlocks the potential of AI-powered
|
||||
applications
|
||||
</p>
|
||||
<ul className="body-2">
|
||||
{[
|
||||
"Photo generating",
|
||||
"Photo enhance",
|
||||
"Seamless Integration",
|
||||
].map((item, index) => (
|
||||
<li
|
||||
className="flex items-start py-4 border-t border-n-6"
|
||||
key={index}
|
||||
>
|
||||
<Image
|
||||
src="/images/check.svg"
|
||||
width={24}
|
||||
height={24}
|
||||
alt="Check"
|
||||
/>
|
||||
<p className="ml-4">{item}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Generating className="absolute left-4 right-4 bottom-4 border border-n-1/10 lg:left-1/2 lg-right-auto lg:bottom-8 lg:-translate-x-1/2" />
|
||||
</div>
|
||||
<div className="relative z-1 grid gap-5 lg:grid-cols-2">
|
||||
<div className="relative min-h-[38.75rem] border border-n-1/10 rounded-3xl overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
className="w-full h-full object-cover"
|
||||
src="/images/services/service-2.png"
|
||||
width={630}
|
||||
height={748}
|
||||
alt="Smartest AI"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 flex flex-col justify-end p-8 bg-gradient-to-b from-n-8/0 to-n-8/90 lg:p-15">
|
||||
<h4 className="h4 mb-4">Photo editing</h4>
|
||||
<p className="body-2 text-n-3">
|
||||
{`Automatically enhance your photos using our AI app's
|
||||
photo editing feature. Try it now!`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="absolute top-8 right-8 max-w-[17.5rem] py-6 px-8 bg-black rounded-t-xl rounded-bl-xl font-code text-base lg:top-16 lg:right-[8.75rem] lg:max-w-[17.5rem]">
|
||||
Hey Brainwave, enhance this photo
|
||||
<svg
|
||||
className="absolute left-full bottom-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
height="37"
|
||||
>
|
||||
<path d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-n-7 rounded-3xl overflow-hidden lg:min-h-[45.75rem]">
|
||||
<div className="py-12 px-4 xl:px-8">
|
||||
<h4 className="h4 mb-4">Video generation</h4>
|
||||
<p className="body-2 mb-[2.25rem] text-n-3">
|
||||
The world’s most powerful AI photo and video art
|
||||
generation engine.What will you create?
|
||||
</p>
|
||||
<ul className="flex items-center justify-between">
|
||||
{[
|
||||
"/images/icons/recording-03.svg",
|
||||
"/images/icons/recording-01.svg",
|
||||
"/images/icons/disc-02.svg",
|
||||
"/images/icons/chrome-cast.svg",
|
||||
"/images/icons/sliders-04.svg",
|
||||
].map((item, index) => (
|
||||
<li
|
||||
className={`flex items-center justify-center ${
|
||||
index === 2
|
||||
? "w-[3rem] h-[3rem] p-0.25 bg-conic-gradient rounded-2xl md:w-[4.5rem] md:h-[4.5rem]"
|
||||
: "flex w-10 h-10 bg-n-6 rounded-2xl md:w-15 md:h-15"
|
||||
}`}
|
||||
key={index}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
index === 2
|
||||
? "flex items-center justify-center w-full h-full bg-n-7 rounded-[0.9375rem]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={item}
|
||||
width={24}
|
||||
height={24}
|
||||
alt={item}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="relative h-[20.5rem] bg-n-8 rounded-xl overflow-hidden md:h-[25rem]">
|
||||
<Image
|
||||
className="w-full h-full object-cover"
|
||||
src="/images/services/service-3.png"
|
||||
width={517}
|
||||
height={400}
|
||||
alt="Smartest AI"
|
||||
/>
|
||||
<div className="absolute top-8 left-[3.125rem] w-full max-w-[14rem] pt-2.5 pr-2.5 pb-7 pl-5 bg-n-6 rounded-t-xl rounded-br-xl font-code text-base md:max-w-[17.5rem]">
|
||||
Video generated!
|
||||
<div className="absolute left-5 -bottom-[1.125rem] flex items-center justify-center w-[2.25rem] h-[2.25rem] bg-color-1 rounded-[0.75rem]">
|
||||
<Image
|
||||
src="/images/brainwave-symbol-white.svg"
|
||||
width={26}
|
||||
height={26}
|
||||
alt="Brainwave"
|
||||
/>
|
||||
</div>
|
||||
<div className="tagline absolute right-2.5 bottom-1 text-[0.625rem] text-n-3 uppercase">
|
||||
just now
|
||||
</div>
|
||||
<svg
|
||||
className="absolute right-full bottom-0 -scale-x-100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
height="37"
|
||||
>
|
||||
<path
|
||||
className="fill-n-6"
|
||||
d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute left-0 bottom-0 w-full flex items-center p-6">
|
||||
<svg
|
||||
className="mr-3"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.006 2.802l.036.024 10.549 7.032.805.567c.227.183.494.437.648.808a2 2 0 0 1 0 1.532c-.154.371-.421.625-.648.808-.217.175-.5.364-.805.567L8.006 21.198l-.993.627c-.285.154-.676.331-1.132.303a2 2 0 0 1-1.476-.79c-.276-.365-.346-.788-.375-1.111S4 19.502 4 19.054V4.99v-.043l.029-1.174c.03-.323.1-.746.375-1.11a2 2 0 0 1 1.476-.79c.456-.027.847.149 1.132.304s.62.378.993.627z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
<div className="flex-1 bg-[#D9D9D9]">
|
||||
<div className="w-1/2 h-0.5 bg-color-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-0 -left-[10rem] w-[56.625rem] h-[56.625rem] opacity-50 mix-blend-color-dodge pointer-events-none">
|
||||
<Image
|
||||
className="absolute top-1/2 left-1/2 w-[79.5625rem] max-w-[79.5625rem] h-[88.5625rem] -translate-x-1/2 -translate-y-1/2"
|
||||
src="/images/gradient.png"
|
||||
width={1417}
|
||||
height={1417}
|
||||
alt="Gradient"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
|
||||
export default Services;
|
||||
@@ -1,195 +0,0 @@
|
||||
import Section from "@/components/Section";
|
||||
import Generating from "@/components/Generating";
|
||||
import Image from "@/components/Image";
|
||||
import Heading from "@/components/Heading";
|
||||
|
||||
type ServicesProps = {
|
||||
containerClassName?: string;
|
||||
};
|
||||
|
||||
const Services = ({ containerClassName }: ServicesProps) => (
|
||||
<Section>
|
||||
<div className={`container ${containerClassName || ""}`}>
|
||||
<Heading
|
||||
title="Generative AI made for creators."
|
||||
text="Brainwave unlocks the potential of AI-powered applications"
|
||||
/>
|
||||
<div className="relative">
|
||||
<div className="relative z-1 flex items-center h-[38.75rem] mb-5 p-8 border border-n-1/10 rounded-3xl overflow-hidden lg:h-[38.75rem] lg:p-20 xl:h-[45.75rem]">
|
||||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none md:w-3/5 xl:w-auto">
|
||||
<Image
|
||||
className="w-full h-full object-cover md:object-right"
|
||||
src="/images/services/service-1.png"
|
||||
width={797}
|
||||
height={733}
|
||||
alt="Smartest AI"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-1 max-w-[17rem] ml-auto">
|
||||
<h4 className="h4 mb-4">Smartest AI</h4>
|
||||
<p className="bpdy-2 mb-[3.125rem] text-n-3">
|
||||
Brainwave unlocks the potential of AI-powered
|
||||
applications
|
||||
</p>
|
||||
<ul className="body-2">
|
||||
{[
|
||||
"Photo generating",
|
||||
"Photo enhance",
|
||||
"Seamless Integration",
|
||||
].map((item, index) => (
|
||||
<li
|
||||
className="flex items-start py-4 border-t border-n-6"
|
||||
key={index}
|
||||
>
|
||||
<Image
|
||||
src="/images/check.svg"
|
||||
width={24}
|
||||
height={24}
|
||||
alt="Check"
|
||||
/>
|
||||
<p className="ml-4">{item}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Generating className="absolute left-4 right-4 bottom-4 border border-n-1/10 lg:left-1/2 lg-right-auto lg:bottom-8 lg:-translate-x-1/2" />
|
||||
</div>
|
||||
<div className="relative z-1 grid gap-5 lg:grid-cols-2">
|
||||
<div className="relative min-h-[38.75rem] border border-n-1/10 rounded-3xl overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<Image
|
||||
className="w-full h-full object-cover"
|
||||
src="/images/services/service-2.png"
|
||||
width={630}
|
||||
height={748}
|
||||
alt="Smartest AI"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 flex flex-col justify-end p-8 bg-gradient-to-b from-n-8/0 to-n-8/90 lg:p-15">
|
||||
<h4 className="h4 mb-4">Photo editing</h4>
|
||||
<p className="body-2 text-n-3">
|
||||
{`Automatically enhance your photos using our AI app's
|
||||
photo editing feature. Try it now!`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="absolute top-8 right-8 max-w-[17.5rem] py-6 px-8 bg-black rounded-t-xl rounded-bl-xl font-code text-base lg:top-16 lg:right-[8.75rem] lg:max-w-[17.5rem]">
|
||||
Hey Brainwave, enhance this photo
|
||||
<svg
|
||||
className="absolute left-full bottom-0"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
height="37"
|
||||
>
|
||||
<path d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-n-7 rounded-3xl overflow-hidden lg:min-h-[45.75rem]">
|
||||
<div className="py-12 px-4 xl:px-8">
|
||||
<h4 className="h4 mb-4">Video generation</h4>
|
||||
<p className="body-2 mb-[2.25rem] text-n-3">
|
||||
The world’s most powerful AI photo and video art
|
||||
generation engine.What will you create?
|
||||
</p>
|
||||
<ul className="flex items-center justify-between">
|
||||
{[
|
||||
"/images/icons/recording-03.svg",
|
||||
"/images/icons/recording-01.svg",
|
||||
"/images/icons/disc-02.svg",
|
||||
"/images/icons/chrome-cast.svg",
|
||||
"/images/icons/sliders-04.svg",
|
||||
].map((item, index) => (
|
||||
<li
|
||||
className={`flex items-center justify-center ${
|
||||
index === 2
|
||||
? "w-[3rem] h-[3rem] p-0.25 bg-conic-gradient rounded-2xl md:w-[4.5rem] md:h-[4.5rem]"
|
||||
: "flex w-10 h-10 bg-n-6 rounded-2xl md:w-15 md:h-15"
|
||||
}`}
|
||||
key={index}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
index === 2
|
||||
? "flex items-center justify-center w-full h-full bg-n-7 rounded-[0.9375rem]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<Image
|
||||
src={item}
|
||||
width={24}
|
||||
height={24}
|
||||
alt={item}
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="relative h-[20.5rem] bg-n-8 rounded-xl overflow-hidden md:h-[25rem]">
|
||||
<Image
|
||||
className="w-full h-full object-cover"
|
||||
src="/images/services/service-3.png"
|
||||
width={517}
|
||||
height={400}
|
||||
alt="Smartest AI"
|
||||
/>
|
||||
<div className="absolute top-8 left-[3.125rem] w-full max-w-[14rem] pt-2.5 pr-2.5 pb-7 pl-5 bg-n-6 rounded-t-xl rounded-br-xl font-code text-base md:max-w-[17.5rem]">
|
||||
Video generated!
|
||||
<div className="absolute left-5 -bottom-[1.125rem] flex items-center justify-center w-[2.25rem] h-[2.25rem] bg-color-1 rounded-[0.75rem]">
|
||||
<Image
|
||||
src="/images/brainwave-symbol-white.svg"
|
||||
width={26}
|
||||
height={26}
|
||||
alt="Brainwave"
|
||||
/>
|
||||
</div>
|
||||
<div className="tagline absolute right-2.5 bottom-1 text-[0.625rem] text-n-3 uppercase">
|
||||
just now
|
||||
</div>
|
||||
<svg
|
||||
className="absolute right-full bottom-0 -scale-x-100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="26"
|
||||
height="37"
|
||||
>
|
||||
<path
|
||||
className="fill-n-6"
|
||||
d="M21.843 37.001c3.564 0 5.348-4.309 2.829-6.828L3.515 9.015A12 12 0 0 1 0 .53v36.471h21.843z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="absolute left-0 bottom-0 w-full flex items-center p-6">
|
||||
<svg
|
||||
className="mr-3"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M8.006 2.802l.036.024 10.549 7.032.805.567c.227.183.494.437.648.808a2 2 0 0 1 0 1.532c-.154.371-.421.625-.648.808-.217.175-.5.364-.805.567L8.006 21.198l-.993.627c-.285.154-.676.331-1.132.303a2 2 0 0 1-1.476-.79c-.276-.365-.346-.788-.375-1.111S4 19.502 4 19.054V4.99v-.043l.029-1.174c.03-.323.1-.746.375-1.11a2 2 0 0 1 1.476-.79c.456-.027.847.149 1.132.304s.62.378.993.627z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
<div className="flex-1 bg-[#D9D9D9]">
|
||||
<div className="w-1/2 h-0.5 bg-color-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-0 -left-[10rem] w-[56.625rem] h-[56.625rem] opacity-50 mix-blend-color-dodge pointer-events-none">
|
||||
<Image
|
||||
className="absolute top-1/2 left-1/2 w-[79.5625rem] max-w-[79.5625rem] h-[88.5625rem] -translate-x-1/2 -translate-y-1/2"
|
||||
src="/images/gradient.png"
|
||||
width={1417}
|
||||
height={1417}
|
||||
alt="Gradient"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
|
||||
export default Services;
|
||||
Reference in New Issue
Block a user