feat: Portfolio, Contact Us

app/layout.tsx

@@ -1,6 +1,7 @@
 import "styles/tailwind.css"
 import "styles/custom.css"
 import Navbar from "components/Navbar/Navbar"
+import StarBackground from "components/StarBackground/StarBackground";
 import Footer from "components/Footer/Footer"
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

app/page.tsx

@@ -2,23 +2,25 @@
 import { Metadata } from "next"
 import { Button } from "components/Button/Button"
 import { InfiniteSlider } from "components/Slider/Slider"
+import { useState } from "react"
 import Navbar from "components/Navbar/Navbar"
 import { LP_GRID_ITEMS } from "lp-items"
 import { FaArrowRight, FaFileCsv, FaNewspaper } from "react-icons/fa"
 import "../styles/custom.css"
 import { MdOutlineWeb } from "react-icons/md"
 import { TiTick } from "react-icons/ti"
-import { useState } from "react"
 import { MdOutlineAppSettingsAlt } from "react-icons/md"
 import { Glow, GlowCapture } from "@codaworks/react-glow"
+import StarBackground from "components/StarBackground/StarBackground"
+import { Textarea } from "@nextui-org/react"
 
 export default function Web() {
+  const [init, setInit] = useState(false)
   const [hovered, setHovered] = useState(false)
   const imgStyle = {
-    transform: hovered ? "translateX(2px)" : "none",
+    transform: hovered ? "translateX(3px)" : "none",
     transition: "transform .2s", // Optional: Smooth transition
   }
-
   return (
     <div>
       <section className="bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[15%] lg:pr-[15%]">
@@ -136,17 +138,20 @@ export default function Web() {
         </div>
       </section>
       <section className="mt-[3%] bg-[#0f172a] md:pl-0 md:pr-0 lg:pl-[10%] lg:pr-[10%]">
+        <div>
+          <GlowCapture>
             <div className="flex flex-col items-center justify-around">
               <div className="mb-4 max-w-3xl text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
                 <h2 className="">Our Services</h2>
               </div>
               <p className="mb-6 max-w-2xl text-center font-light text-gray-200 md:text-lg lg:mb-8 lg:text-xl">
-            Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions
+                Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software
-            powered by AI.
+                solutions powered by AI.
               </p>
             </div>
             <div className="mt-10 grid max-w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2">
-          <div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
+              <Glow color="#F0B37D">
+                <div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow">
                   <div className=" text-center">
                     <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
                       <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
@@ -160,10 +165,13 @@ export default function Web() {
                     </div>
                     <div className="flex flex-grow flex-col justify-between">
                       <p className="text-base leading-relaxed text-gray-300">
-                  We specialize in creating modern, user-friendly websites that reflect your brand and drive business
+                        We specialize in creating modern, user-friendly websites that reflect your brand and drive
-                  growth.
+                        business growth.
                       </p>
-                <a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
+                      <a
+                        href="#"
+                        className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white"
+                      >
                         Learn More
                         <svg
                           fill="none"
@@ -180,7 +188,9 @@ export default function Web() {
                     </div>
                   </div>
                 </div>
-          <div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
+              </Glow>
+              <Glow color="#F5887A">
+                <div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow">
                   <div className=" text-center">
                     <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
                       <MdOutlineAppSettingsAlt className="h-[80px] w-[80px] text-white" />
@@ -194,10 +204,13 @@ export default function Web() {
                     </div>
                     <div className="flex flex-grow flex-col justify-between">
                       <p className="text-base leading-relaxed text-gray-300">
-                  We specialize in creating modern, user-friendly websites that reflect your brand and drive business
+                        We specialize in creating modern, user-friendly websites that reflect your brand and drive
-                  growth.
+                        business growth.
                       </p>
-                <a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
+                      <a
+                        href="#"
+                        className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white"
+                      >
                         Learn More
                         <svg
                           fill="none"
@@ -214,7 +227,9 @@ export default function Web() {
                     </div>
                   </div>
                 </div>
-          <div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
+              </Glow>
+              <Glow color="#C37EB6">
+                <div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow">
                   <div className=" text-center">
                     <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
                       <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
@@ -228,10 +243,13 @@ export default function Web() {
                     </div>
                     <div className="flex flex-grow flex-col justify-between">
                       <p className="text-base leading-relaxed text-gray-300">
-                  We specialize in creating modern, user-friendly websites that reflect your brand and drive business
+                        We specialize in creating modern, user-friendly websites that reflect your brand and drive
-                  growth.
+                        business growth.
                       </p>
-                <a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
+                      <a
+                        href="#"
+                        className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white"
+                      >
                         Learn More
                         <svg
                           fill="none"
@@ -248,7 +266,9 @@ export default function Web() {
                     </div>
                   </div>
                 </div>
-          <div className=" flex max-w-[100%] items-center rounded-[20px] border p-4">
+              </Glow>
+              <Glow color="#D30253">
+                <div className=" glowable-text flex max-w-[100%] items-center rounded-[20px] border p-4 glow:border-glow glow:bg-glow/[.50] glow:ring-2 glow:ring-glow">
                   <div className=" text-center">
                     <div className="mr-3 inline-flex flex-shrink-0 items-center justify-center rounded-full px-5 ">
                       <MdOutlineWeb className="h-[80px] w-[80px] text-white" />
@@ -262,10 +282,13 @@ export default function Web() {
                     </div>
                     <div className="flex flex-grow flex-col justify-between">
                       <p className="text-base leading-relaxed text-gray-300">
-                  We specialize in creating modern, user-friendly websites that reflect your brand and drive business
+                        We specialize in creating modern, user-friendly websites that reflect your brand and drive
-                  growth.
+                        business growth.
                       </p>
-                <a href="#" className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white">
+                      <a
+                        href="#"
+                        className="mt-3 inline-flex items-center text-gray-300 hover:text-white dark:text-white"
+                      >
                         Learn More
                         <svg
                           fill="none"
@@ -282,6 +305,9 @@ export default function Web() {
                     </div>
                   </div>
                 </div>
+              </Glow>
+            </div>
+          </GlowCapture>
         </div>
       </section>
 
@@ -294,32 +320,82 @@ export default function Web() {
             The showcase of our innovations. Dive in to explore our diverse range of projects and see how we’re driving
             digital transformation across industries.”
           </p>
-          <div className="grid max-w-full grid-cols-3 gap-4 sm:grid-cols-1 md:grid-cols-3">
-            <div className="col-span-3 mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
-              <div
-                className=" h-[100%] rounded-[3rem]"
-                style={{
-                  backgroundImage: `url('/images/glow-bottom.svg')`,
-                  backgroundSize: "cover",
-                  backgroundPosition: "center",
-                  backgroundRepeat: "no-repeat",
-                }}
-              >
-                <p></p>
         </div>
+        <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+          <div className="mt-10 flex max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
+            <img className="h-auto max-w-full rounded-lg" src="/images/site01.png" alt="" />
           </div>
-            <div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
+          <div className="mt-10 flex max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
-            <div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
+            <img className="h-auto max-w-full rounded-lg" src="/images/site02.png" alt="" />
-            <div className="mt-10 flex h-[50vh] max-w-full rounded-xl border border-gray-200 bg-transparent p-6 shadow dark:border-gray-700 dark:bg-gray-800"></div>
+          </div>
+          <div className="mt-10 flex max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
+            <img className="h-auto max-w-full rounded-lg" src="/images/site03.png" alt="" />
+          </div>
+          <div className="mt-10 flex max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
+            <img className="h-auto max-w-full rounded-lg" src="/images/site01.png" alt="" />
+          </div>
+          <div className="mt-10 flex max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
+            <img className="h-auto max-w-full rounded-lg" src="/images/site02.png" alt="" />
+          </div>
+          <div className="flex] mt-10 max-w-full rounded-xl border border-gray-200 bg-transparent shadow dark:border-gray-700 dark:bg-gray-800">
+            <img className="h-auto max-w-full rounded-lg" src="/images/site03.png" alt="" />
           </div>
         </div>
       </section>
 
-      <section className="h-[50vh] bg-[#0f172a] pl-[10%] pr-[10%] pt-40">
+      <section className="bg-[#0f172a] dark:bg-gray-900">
-        <div className="mx-auto place-self-center text-center">
+        <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
-          <div className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
+          <h2 className="mb-4 text-center text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
-            <h1 className="">Contact US</h1>
+            Contact Us
+          </h2>
+          <p className="mb-8 text-center font-light text-slate-200 dark:text-gray-400 sm:text-xl lg:mb-16">
+            Got a technical issue? Want to send feedback about a beta feature? Need details about our Business plan? Let
+            us know.
+          </p>
+          <form action="#" className="space-y-8">
+            <div>
+              <label htmlFor="email" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
+                Your email
+              </label>
+              <input
+                type="email"
+                id="email"
+                className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300 bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="name@gmail.com"
+                required
+              />
             </div>
+            <div>
+              <label htmlFor="subject" className="mb-2 block text-sm font-medium text-white dark:text-gray-300">
+                Subject
+              </label>
+              <input
+                type="text"
+                id="subject"
+                className="dark:shadow-sm-light block w-full rounded-lg border border-gray-300  bg-homeBg2 p-3 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="Let us know how we can help you"
+                required
+              />
+            </div>
+            <div className="sm:col-span-2">
+              <label htmlFor="message" className="mb-2 block text-sm font-medium text-white dark:text-gray-400">
+                Your message
+              </label>
+              <textarea
+                id="message"
+                rows={6}
+                className="block w-full rounded-lg border border-gray-300  bg-homeBg2 p-2.5 text-sm text-white shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="Leave a comment..."
+              ></textarea>
+            </div>
+            <Button
+              type="submit"
+              href="#"
+              className="rounded-lg bg-gradient-to-r from-vizoleG1 via-vizoleG2 to-vizoleG3 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
+            >
+              Send message
+            </Button>
+          </form>
         </div>
       </section>
     </div>

components/StarBackground/StarBackground.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Particles from 'react-tsparticles';
+import particlesConfig from "./particles.config.js";
+import { loadFull } from "tsparticles";
+
+const StarBackground: React.FC = () => {
+    async function loadParticles(main: any){
+        await loadFull(main)
+    }
+  return (
+    <Particles
+      id="star-background"
+      init={loadParticles}
+      options={particlesConfig}
+      style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%' }}
+    />
+  );
+};
+
+export default StarBackground;

components/StarBackground/particles.config.js

@@ -0,0 +1,23 @@
+
+export default {
+    particles: {
+      number: {
+        value: 100, 
+      },
+      size: {
+        value: 2, // 
+      shape: {
+        type: 'star', 
+      },
+      color: {
+        value: '#ffffff', 
+      },
+      opacity: {
+        value: 0.8,
+      },
+      move: {
+        speed: 0.5, 
+      },
+    },
+  }
+}

package.json

@@ -26,6 +26,7 @@
     "@codaworks/react-glow": "^1.0.6",
     "@material-tailwind/react": "^2.1.9",
     "@next/bundle-analyzer": "^14.0.3",
+    "@nextui-org/react": "^2.2.10",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -51,6 +52,8 @@
     "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.7.1",
     "@tailwindcss/typography": "^0.5.12",
+    "@tsparticles/engine": "^3.3.0",
+    "@tsparticles/react": "^3.0.0",
     "@vercel/otel": "^0.3.0",
     "class-variance-authority": "^0.7.0",
     "lodash": "^4.17.21",