feat: ourblock section
This commit is contained in:
Dex404
parent
893f2bc48a
commit
f6f5165bc7
7 changed files with 38708 additions and 731 deletions
|
|
@ -4,6 +4,7 @@ import "styles/custom.css"
|
|||
import Navbar from "components/Navbar/Navbar"
|
||||
|
||||
import Footer from "components/Footer/Footer"
|
||||
import { FloatingWhatsApp } from "react-floating-whatsapp"
|
||||
|
||||
// import SmoothScroll from "utils/ScrollAnimations/SmoothScroll"
|
||||
|
||||
|
|
@ -13,7 +14,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
|||
<body className="bg-[#0f172a] ">
|
||||
{/* <SmoothScroll> */}
|
||||
<Navbar logoSrc="/images/logo.webp" />
|
||||
{children}
|
||||
{children}{" "}
|
||||
<FloatingWhatsApp
|
||||
phoneNumber="0704235666"
|
||||
accountName="Vizole Labs"
|
||||
allowEsc
|
||||
allowClickAway
|
||||
notification
|
||||
notificationSound
|
||||
/>
|
||||
<Footer />
|
||||
{/* </SmoothScroll> */}
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import Hero01 from "components/Hero01/Hero01"
|
|||
import OurServices from "components/OurServices/OurServices"
|
||||
import Portfolio from "components/Portfolio/Portfolio"
|
||||
import ContactUs from "components/ContactUs/ContactUs"
|
||||
import OurBlog from "components/ourblog/OurBlog"
|
||||
|
||||
export default function Web() {
|
||||
return (
|
||||
|
|
@ -31,6 +32,11 @@ export default function Web() {
|
|||
<ContactUs />
|
||||
</section>
|
||||
</div>
|
||||
<div>
|
||||
<section id="contactUs" className="bg-[#0f172a] max-md:p-4 md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
|
||||
<OurBlog />
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,15 @@ const Navbar: React.FC<NavbarProps> = ({ logoSrc }) => {
|
|||
const [showBackground, setShowBackground] = useState(false)
|
||||
const TOP_OFFSET = 50
|
||||
|
||||
const navLinks = {
|
||||
home: "#home",
|
||||
services: "#services",
|
||||
portfolio: "#portfolio",
|
||||
aboutUs: "#aboutUs",
|
||||
signIn: "/auth/SignIn",
|
||||
signUp: "/auth/SignUp",
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY >= TOP_OFFSET) {
|
||||
|
|
|
|||
95
components/ourblog/OurBlog.tsx
Normal file
95
components/ourblog/OurBlog.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
export default function OurBlog() {
|
||||
return (
|
||||
<div className="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
|
||||
<div className="mx-auto mb-8 max-w-screen-sm text-center lg:mb-16">
|
||||
<h2 className="mb-4 text-3xl font-extrabold tracking-tight text-white lg:text-4xl">Our Blog</h2>
|
||||
<p className="font-light text-gray-400 sm:text-xl">
|
||||
We use an agile approach to test assumptions and connect with the needs of your audience early and often.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-8 lg:grid-cols-2">
|
||||
<article className="rounded-lg border border-gray-700 bg-gray-800 p-6 shadow-md">
|
||||
<div className="mb-5 flex items-center justify-between text-gray-500">
|
||||
<span className="inline-flex items-center rounded bg-primary-200 px-2.5 py-0.5 text-xs font-medium text-primary-800">
|
||||
<svg className="mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
|
||||
</svg>
|
||||
Tutorial
|
||||
</span>
|
||||
<span className="text-sm">14 days ago</span>
|
||||
</div>
|
||||
<h2 className="mb-2 text-2xl font-bold tracking-tight text-white">
|
||||
<a href="#">How to quickly deploy a static website</a>
|
||||
</h2>
|
||||
<p className="mb-5 font-light text-gray-400">
|
||||
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools
|
||||
that even influence both web designers and developers influence both web designers and developers.
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<img
|
||||
className="h-7 w-7 rounded-full"
|
||||
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
|
||||
alt="Jese Leos avatar"
|
||||
/>
|
||||
<span className="font-medium text-white">Jese Leos</span>
|
||||
</div>
|
||||
<a href="#" className="inline-flex items-center font-medium text-[#F5887A] hover:underline">
|
||||
Read more
|
||||
<svg className="ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
<article className="rounded-lg border border-gray-700 bg-gray-800 p-6 shadow-md">
|
||||
<div className="mb-5 flex items-center justify-between text-gray-500">
|
||||
<span className="inline-flex items-center rounded bg-primary-200 px-2.5 py-0.5 text-xs font-medium text-primary-800 dark:text-primary-800">
|
||||
<svg className="mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
<path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
|
||||
</svg>
|
||||
Article
|
||||
</span>
|
||||
<span className="text-sm">14 days ago</span>
|
||||
</div>
|
||||
<h2 className="mb-2 text-2xl font-bold tracking-tight text-white">
|
||||
<a href="#">Our first project with React</a>
|
||||
</h2>
|
||||
<p className="mb-5 font-light text-gray-400">
|
||||
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools
|
||||
that even influence both web designers and developers influence both web designers and developers.
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<img
|
||||
className="h-7 w-7 rounded-full"
|
||||
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
|
||||
alt="Bonnie Green avatar"
|
||||
/>
|
||||
<span className="font-medium text-white">Bonnie Green</span>
|
||||
</div>
|
||||
<a href="#" className="inline-flex items-center font-medium text-[#F5887A] hover:underline ">
|
||||
Read more
|
||||
<svg className="ml-2 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
37775
package-lock.json
generated
Normal file
37775
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -68,6 +68,7 @@
|
|||
"nodemailer": "^6.9.13",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-floating-whatsapp": "^5.0.8",
|
||||
"react-hook-form": "^7.51.3",
|
||||
"react-icons": "^5.0.1",
|
||||
"react-intersection-observer": "^9.8.2",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue