initial commit
This commit is contained in:
5
app/about-us/page.tsx
Normal file
5
app/about-us/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<h1>about us page</h1>
|
||||||
|
)
|
||||||
|
}
|
||||||
5
app/contact/page.tsx
Normal file
5
app/contact/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<h1>contact page</h1>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--background: #0a0a0a;
|
--background: #000;
|
||||||
--foreground: #ededed;
|
--foreground: #ededed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Geist, Geist_Mono } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import Menubar from '../components/menubar';
|
||||||
|
|
||||||
const geistSans = Geist({
|
const geistSans = Geist({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-geist-sans",
|
||||||
@@ -27,7 +28,10 @@ export default function RootLayout({
|
|||||||
lang="en"
|
lang="en"
|
||||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||||
>
|
>
|
||||||
<body className="min-h-full flex flex-col">{children}</body>
|
<body className="min-h-full flex flex-col dark:bg-black">
|
||||||
|
<Menubar />
|
||||||
|
{children}
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
60
app/page.tsx
60
app/page.tsx
@@ -1,64 +1,12 @@
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import HeroSection from "@/components/hero-section";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<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">
|
<main className="flex flex-1 w-full max-w-7xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
<HeroSection/>
|
||||||
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>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
5
app/plans/page.tsx
Normal file
5
app/plans/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default function Page() {
|
||||||
|
return (
|
||||||
|
<h1>plans page</h1>
|
||||||
|
)
|
||||||
|
}
|
||||||
BIN
assets/hero-picture-1.png
Normal file
BIN
assets/hero-picture-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
BIN
assets/hero-picture-2.png
Normal file
BIN
assets/hero-picture-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 792 KiB |
BIN
assets/hero-picture-3.png
Normal file
BIN
assets/hero-picture-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 837 KiB |
BIN
assets/hero-picture.jpg
Normal file
BIN
assets/hero-picture.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
252
components/Menubar.css
Normal file
252
components/Menubar.css
Normal file
@@ -0,0 +1,252 @@
|
|||||||
|
/* app/Menubar.css */
|
||||||
|
|
||||||
|
.menubar {
|
||||||
|
position: sticky;
|
||||||
|
top: 20px;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-self: center;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
min-width: 720px;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 20px auto 0;
|
||||||
|
border-radius: 30px;
|
||||||
|
background-color: rgba(29, 29, 29, 0.9);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
padding: 10px 20px;
|
||||||
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
|
||||||
|
border: 1px solid rgba(60, 60, 60, 0.3);
|
||||||
|
isolation: isolate;
|
||||||
|
transition: padding 0.35s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menubar::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: -5px;
|
||||||
|
background: linear-gradient(45deg, #ff00ff, #00ffff);
|
||||||
|
filter: blur(25px);
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 0;
|
||||||
|
opacity: 0.6;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menubar-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 960px;
|
||||||
|
transition: flex-direction 0.35s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-menu {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
color: #e0e0e0;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.1em;
|
||||||
|
padding: 5px 10px;
|
||||||
|
transition: color 0.3s ease, transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0, 0, 0, 0);
|
||||||
|
white-space: nowrap;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.burger-icon {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #e0e0e0;
|
||||||
|
font-size: 2em;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 5px 10px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 3;
|
||||||
|
touch-action: manipulation;
|
||||||
|
width: 1.4em;
|
||||||
|
height: 1.4em;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.burger-icon-menu,
|
||||||
|
.burger-icon-close {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.burger-icon-menu {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.burger-icon-close {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8) rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked + .burger-icon .burger-icon-menu {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.8) rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked + .burger-icon .burger-icon-close {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1) rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-dropdown {
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 0fr;
|
||||||
|
width: 100%;
|
||||||
|
opacity: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
border-top: 1px solid transparent;
|
||||||
|
pointer-events: none;
|
||||||
|
transition:
|
||||||
|
grid-template-rows 0.35s ease,
|
||||||
|
opacity 0.35s ease,
|
||||||
|
margin-top 0.35s ease,
|
||||||
|
padding-top 0.35s ease,
|
||||||
|
border-color 0.35s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked ~ .mobile-dropdown {
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
opacity: 1;
|
||||||
|
margin-top: 8px;
|
||||||
|
padding-top: 12px;
|
||||||
|
border-top-color: rgba(60, 60, 60, 0.3);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-dropdown-inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-dropdown-item {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 10px;
|
||||||
|
border-radius: 16px;
|
||||||
|
text-align: left;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-6px);
|
||||||
|
transition:
|
||||||
|
opacity 0.3s ease,
|
||||||
|
transform 0.3s ease,
|
||||||
|
background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-dropdown-item:hover {
|
||||||
|
background-color: rgba(60, 60, 60, 0.4);
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
.menubar {
|
||||||
|
min-width: 0;
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
margin-top: 16px;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menubar-content {
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menubar:has(.mobile-menu-checkbox:checked) .menubar-content {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item:nth-child(1) {
|
||||||
|
transition-delay: 0.05s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item:nth-child(2) {
|
||||||
|
transition-delay: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item:nth-child(3) {
|
||||||
|
transition-delay: 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked ~ .mobile-dropdown .mobile-dropdown-item:nth-child(4) {
|
||||||
|
transition-delay: 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.menubar,
|
||||||
|
.menubar-content,
|
||||||
|
.burger-icon-menu,
|
||||||
|
.burger-icon-close,
|
||||||
|
.mobile-dropdown,
|
||||||
|
.mobile-dropdown-item {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-menu-checkbox:checked + .burger-icon .burger-icon-menu,
|
||||||
|
.burger-icon-close {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-dropdown-item {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
28
components/hero-section.css
Normal file
28
components/hero-section.css
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
|
||||||
|
|
||||||
|
.hero-main {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-left {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-right {
|
||||||
|
width: 50%;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-picture {
|
||||||
|
border-radius: 20px;
|
||||||
|
position: absolute;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 750px) {
|
||||||
|
.hero-right {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
components/hero-section.tsx
Normal file
23
components/hero-section.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import ContentCard from "./ui/content-cards";
|
||||||
|
import './hero-section.css'
|
||||||
|
import heroPictureOne from "../assets/hero-picture-1.png"
|
||||||
|
import heroPictureTwo from "../assets/hero-picture-2.png"
|
||||||
|
import heroPictureThree from "../assets/hero-picture-3.png"
|
||||||
|
|
||||||
|
export default function HeroSection() {
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<div className="hero-main flex flex-wrap">
|
||||||
|
<div className="grid grid-cols-1 grid-rows-1 p-4 w-1/2">
|
||||||
|
<img className="not-last-of-type:col-start-1 row-start-1 w-full h-auto object-cover hero-picture" src={heroPictureOne.src}/>
|
||||||
|
<img className="col-start-1 row-start-1 self-end justify-end hero-picture rotate-20" src={heroPictureTwo.src}/>
|
||||||
|
<img className="col-start-1 row-start-1 self-end justify-end hero-picture rotate-40" src={heroPictureThree.src}/>
|
||||||
|
</div>
|
||||||
|
<div className="hero-right">
|
||||||
|
<h1 className="mb-4 text-5xl font-bold text-heading md:text-6xl lg:text-7xl"><span className="text-transparent bg-clip-text bg-gradient-to-r bg-violet-800 from-sky-400">Sculpted Arc</span><br/> Web Solutions</h1>
|
||||||
|
<p className="text-lg font-normal text-body lg:text-xl">Here at Sculpted Arc we are invested in creating great website and solving complex web problems Here at Sculpted Arc we are invested in creating great website and solving complex web problems</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
74
components/menubar.tsx
Normal file
74
components/menubar.tsx
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useRef, type MouseEvent } from 'react';
|
||||||
|
import './Menubar.css';
|
||||||
|
|
||||||
|
const menuLinks = [
|
||||||
|
{ label: 'Home', href: '/' },
|
||||||
|
{ label: 'About', href: '/about-us' },
|
||||||
|
{ label: 'Plans', href: '/plans' },
|
||||||
|
{ label: 'Contact', href: '#' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function Menubar() {
|
||||||
|
const menuToggleRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const closeMobileMenu = () => {
|
||||||
|
if (menuToggleRef.current) {
|
||||||
|
menuToggleRef.current.checked = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLinkClick = (event: MouseEvent<HTMLAnchorElement>) => {
|
||||||
|
closeMobileMenu();
|
||||||
|
event.currentTarget.blur();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="menubar">
|
||||||
|
<div className="menubar-content">
|
||||||
|
<div className="desktop-menu">
|
||||||
|
{menuLinks.map((link) => (
|
||||||
|
<a key={link.label} href={link.href} className="menu-item">
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mobile-menu">
|
||||||
|
<input
|
||||||
|
ref={menuToggleRef}
|
||||||
|
type="checkbox"
|
||||||
|
id="mobile-nav-toggle"
|
||||||
|
className="mobile-menu-checkbox"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="mobile-nav-toggle"
|
||||||
|
className="burger-icon"
|
||||||
|
aria-controls="mobile-nav-menu"
|
||||||
|
>
|
||||||
|
<span className="burger-icon-menu" aria-hidden="true">
|
||||||
|
☰
|
||||||
|
</span>
|
||||||
|
<span className="burger-icon-close" aria-hidden="true">
|
||||||
|
×
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
<div id="mobile-nav-menu" className="mobile-dropdown">
|
||||||
|
<div className="mobile-dropdown-inner">
|
||||||
|
{menuLinks.map((link) => (
|
||||||
|
<a
|
||||||
|
key={link.label}
|
||||||
|
href={link.href}
|
||||||
|
className="menu-item mobile-dropdown-item"
|
||||||
|
onClick={handleLinkClick}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
components/ui/button.tsx
Normal file
1
components/ui/button.tsx
Normal file
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
17
components/ui/content-cards.tsx
Normal file
17
components/ui/content-cards.tsx
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
|
||||||
|
interface cardProps {
|
||||||
|
src?: string
|
||||||
|
button_link?: string
|
||||||
|
button_text?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContentCard(buttonProps: cardProps) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<img src={buttonProps.src}></img>
|
||||||
|
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
|
||||||
|
{buttonProps.button_text}
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user