feat: Hero Button Animation, Portfolio Section, Footer Section
This commit is contained in:
Dex404
commit
ea37f92b5b
17 changed files with 746 additions and 134 deletions
|
|
@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge"
|
|||
|
||||
const button = cva(
|
||||
[
|
||||
"justify-center",
|
||||
|
||||
"inline-flex",
|
||||
"items-center",
|
||||
"rounded-xl",
|
||||
|
|
@ -15,10 +15,10 @@ const button = cva(
|
|||
{
|
||||
variants: {
|
||||
intent: {
|
||||
primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
|
||||
secondary: ["bg-transparent", "text-white", "hover:bg-slate-100", "rounded-3xl", "hover:text-vizoleG2", "border-solid", "border-2", "border-slate-100"],
|
||||
hero1: ["text-black", "bg-heroBtn", "hover:bg-white", "font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2", "border-solid", "border-2", "border-slate-100"],
|
||||
aboutUs: ["bg-transparent", "w-1/4", "hover:bg-blue-500", "text-white", "font-semibold", "hover:text-white", "py-2", "px-4", "border", "border-blue-500", "hover:border-transparent", "rounded", "flex", "text-left"]
|
||||
primary: ["bg-blue-400", "justify-center", "text-white", "hover:enabled:bg-blue-700"],
|
||||
secondary: ["bg-transparent", "justify-center", "text-white", "hover:bg-slate-100", "rounded-3xl", "hover:text-vizoleG2", "border-solid", "border-2", "border-slate-100"],
|
||||
hero1: ["text-black", "bg-white", "justify-center","font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2", "border-solid", "border-2", "border-slate-100"],
|
||||
aboutUs: ["text-left","bg-transparent", "text-white", "font-semibold", "hover:text-white", "py-2", "px-4", "border", "border-gray-400","transition-all", "hover:border-white", "rounded", "flex", , "my-1","w-[50%]"]
|
||||
},
|
||||
size: {
|
||||
sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
|
||||
|
|
|
|||
68
components/Footer/Footer.tsx
Normal file
68
components/Footer/Footer.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import React from "react"
|
||||
import { FaInstagram } from "react-icons/fa"
|
||||
import { FaTwitter } from "react-icons/fa"
|
||||
import { FaLinkedin } from "react-icons/fa"
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<div className="bg-[#0f172a]">
|
||||
<div className="flex h-1/2 w-full flex-col items-start justify-around bg-[#0f172a] p-20 md:flex-row">
|
||||
<div className="p-5 ">
|
||||
<ul>
|
||||
<p className="bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 bg-clip-text pb-6 text-3xl font-bold text-transparent">
|
||||
VizoleLabs
|
||||
</p>
|
||||
<div className="flex gap-6 pb-5 text-white">
|
||||
<FaInstagram className="cursor-pointer text-2xl hover:text-yellow-600" />
|
||||
<FaTwitter className="cursor-pointer text-2xl hover:text-vizoleG2" />
|
||||
<FaLinkedin className="cursor-pointer text-2xl hover:text-vizoleG2" />
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<ul>
|
||||
<p className="pb-4 text-2xl font-bold text-white">Services</p>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">Stocks</li>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
|
||||
Web Development
|
||||
</li>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
|
||||
IOS App Development
|
||||
</li>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
|
||||
Android App Development
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<ul>
|
||||
<p className="pb-4 text-2xl font-bold text-white">Company</p>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">About</li>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">Products</li>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">Pricing</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<ul>
|
||||
<p className="pb-4 text-2xl font-bold text-white">Support</p>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">Contact</li>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
|
||||
Support Portals
|
||||
</li>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
|
||||
Privacy Policy
|
||||
</li>
|
||||
<li className="text-md cursor-pointer pb-2 font-semibold text-gray-500 hover:text-vizoleG2">
|
||||
Terms & Conditions
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center bg-[#0f172a] p-5 text-center">
|
||||
<h1 className=" font-semibold text-white">© 2024 All rights reserved | VizoleLabs PVT LTD</h1>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
9
components/Navbar/icons/icon1.tsx
Normal file
9
components/Navbar/icons/icon1.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
|
||||
function Aws(){
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default Aws
|
||||
|
|
@ -11,35 +11,36 @@ import {
|
|||
LinkedInLogoIcon,
|
||||
} from "@radix-ui/react-icons"
|
||||
|
||||
|
||||
const LOGOS = [
|
||||
<FigmaLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
<FramerLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
<SketchLogoIcon width={50} height={50} className=" text-slate-400" />,
|
||||
<TwitterLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
<GitHubLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
<VercelLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
<NotionLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
<DiscordLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
<InstagramLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
<LinkedInLogoIcon width={50} height={50} className="text-slate-400" />,
|
||||
|
||||
"/images/Amazon_Web_Services-Logo.wine.svg",
|
||||
"/images/Cisco_Systems-Logo.wine.svg",
|
||||
"/images/Oracle_Database-Logo.wine.svg",
|
||||
"/images/ids.svg",
|
||||
"/images/yanolja-icon.svg",
|
||||
]
|
||||
|
||||
export const InfiniteSlider = () => {
|
||||
return (
|
||||
// bg-gradient-to-r from-black to-transparent
|
||||
// <div className="relative m-auto w-full overflow-hidden bg-transparent before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,homeBg_0%,homeBg_100%)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,homeBg_0%,transparent)] after:content-['']">
|
||||
<div className="before:opacity relative m-auto w-full overflow-hidden bg-homeBg bg-blend-screen before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] relative before:bg-gradient-to-r from-homeBg to-transparent before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-gradient-to-r from-homeBg to-transparent after:content-['']">
|
||||
<div className="before:opacity relative m-auto w-full overflow-hidden bg-homeBg bg-blend-screen before:absolute before:left-0 before:top-0 before:z-[2] before:h-full before:w-[100px] before:bg-[linear-gradient(to_right,#0f172a,transparent)] before:content-[''] after:absolute after:right-0 after:top-0 after:z-[2] after:h-full after:w-[100px] after:-scale-x-100 after:bg-[linear-gradient(to_right,#0f172a,transparent)] after:content-['']">
|
||||
<div className="flex w-[calc(250px*10)] animate-infinite-slider">
|
||||
{LOGOS.map((logo, index) => (
|
||||
<div className="slide flex w-[125px] items-center justify-center" key={index}>
|
||||
{logo}
|
||||
<div className="slide flex w-[125px] items-center justify-center px-4" key={index}>
|
||||
<img src={logo} />
|
||||
</div>
|
||||
))}
|
||||
{LOGOS.map((logo, index) => (
|
||||
<div className="slide flex w-[125px] items-center justify-center" key={index}>
|
||||
{logo}
|
||||
<div className="slide flex w-[125px] items-center justify-center px-4" key={index}>
|
||||
<img src={logo} />
|
||||
</div>
|
||||
))}
|
||||
{LOGOS.map((logo, index) => (
|
||||
<div className="slide flex w-[125px] items-center justify-center px-4" key={index}>
|
||||
<img src={logo} />
|
||||
</div>
|
||||
))}
|
||||
{LOGOS.map((logo, index) => (
|
||||
<div className="slide flex w-[125px] items-center justify-center px-4" key={index}>
|
||||
<img src={logo} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue