diff --git a/app/page.tsx b/app/page.tsx index f73da3f..2861527 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,49 +3,76 @@ import { Button } from "components/Button/Button" import { InfiniteSlider } from "components/Slider/Slider"; import Navbar from "components/Navbar/Navbar" import { LP_GRID_ITEMS } from "lp-items" -import { FaArrowRight } from "react-icons/fa"; +import { FaArrowRight, FaFileCsv } from "react-icons/fa"; +import '../styles/custom.css' export default function Web() { return ( -
-
-
-
-

- Experience the next dimension -

-

- Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions powered by AI. -

- - + +
-
-
- -
- -
-
- +
+ +
+ +
+
+
+
+
+

About VizoleLabs

+
+

Our Mission in Motion

+
+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos, totam culpa officia ad esse

+
+ + + +
+
+
+
+
+
+ ) } diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx index 1eb828f..8911c56 100644 --- a/components/Button/Button.tsx +++ b/components/Button/Button.tsx @@ -17,12 +17,13 @@ const button = cva( 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-white", "bg-gradient-to-br", "from-vizoleG1", "via-vizole-G2", "to-vizoleG3", "hover:bg-gradient-to-bl", "focus:ring-4", "focus:outline-none", "focus:ring-green-200", "dark:focus:ring-green-800", "font-medium", "rounded-3xl", "text-sm", "text-center", "me-2", "mb-2"] + hero1: ["text-black", "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-blue-700", "font-semibold", "hover:text-white", "pt-5", "py-2", "px-4", "border", "border-blue-500", "hover:border-transparent", "rounded"] }, size: { sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"], lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"], - hero1:["min-w-15", "h-full", "min-h-5" , "text-sm","px-5", "py-2"] + hero1: ["min-w-15", "h-full", "min-h-5", "text-sm", "px-5", "py-2"] }, underline: { true: ["underline"], false: [] }, }, diff --git a/components/Slider/Slider.tsx b/components/Slider/Slider.tsx index 68934b2..17b688e 100644 --- a/components/Slider/Slider.tsx +++ b/components/Slider/Slider.tsx @@ -1,52 +1,46 @@ import { - FigmaLogoIcon, - FramerLogoIcon, - SketchLogoIcon, - TwitterLogoIcon, - GitHubLogoIcon, - VercelLogoIcon, - NotionLogoIcon, - DiscordLogoIcon, - InstagramLogoIcon, - LinkedInLogoIcon, - } from "@radix-ui/react-icons"; + FigmaLogoIcon, + FramerLogoIcon, + SketchLogoIcon, + TwitterLogoIcon, + GitHubLogoIcon, + VercelLogoIcon, + NotionLogoIcon, + DiscordLogoIcon, + InstagramLogoIcon, + LinkedInLogoIcon, +} from "@radix-ui/react-icons" - const LOGOS = [ - , - , - , - , - , - , - , - , - , - , - ]; +const LOGOS = [ + , + , + , + , + , + , + , + , + , + , +] - export const InfiniteSlider = () => { - return ( - // bg-gradient-to-r from-black to-transparent +export const InfiniteSlider = () => { + return ( + // bg-gradient-to-r from-black to-transparent //
-
-
- {LOGOS.map((logo, index) => ( -
- {logo} -
- ))} - {LOGOS.map((logo, index) => ( -
- {logo} -
- ))} -
+
+
+ {LOGOS.map((logo, index) => ( +
+ {logo} +
+ ))} + {LOGOS.map((logo, index) => ( +
+ {logo} +
+ ))}
- ); - }; +
+ ) +} diff --git a/public/images/Amazon_Web_Services-Logo.wine.svg b/public/images/Amazon_Web_Services-Logo.wine.svg new file mode 100644 index 0000000..b3049e1 --- /dev/null +++ b/public/images/Amazon_Web_Services-Logo.wine.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/Cisco_Systems-Logo.wine.svg b/public/images/Cisco_Systems-Logo.wine.svg new file mode 100644 index 0000000..476a10f --- /dev/null +++ b/public/images/Cisco_Systems-Logo.wine.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/Oracle_Database-Logo.wine.svg b/public/images/Oracle_Database-Logo.wine.svg new file mode 100644 index 0000000..a673f35 --- /dev/null +++ b/public/images/Oracle_Database-Logo.wine.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/glow-bottom.svg b/public/images/glow-bottom.svg index af3d3d4..7d929be 100644 --- a/public/images/glow-bottom.svg +++ b/public/images/glow-bottom.svg @@ -1 +1,37 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/glow-top.svg b/public/images/glow-top.svg new file mode 100644 index 0000000..2141cfc --- /dev/null +++ b/public/images/glow-top.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/styles/custom.css b/styles/custom.css index fbe1424..9924c54 100644 --- a/styles/custom.css +++ b/styles/custom.css @@ -1,4 +1,8 @@ .bg-illustration { - background-image: url('/images/glow-bottom.svg'); + background-image: url('/images/glow-bottom.svg'); - } \ No newline at end of file + } + + .hover-pl-5pct:hover { + padding-left: calc(100% + 5%); + } diff --git a/tailwind.config.js b/tailwind.config.js index afc1b9b..cdfd3cd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -16,6 +16,7 @@ module.exports = { ], theme: { extend: { + colors: { primary: { 50: "#eff6ff",