feature: Workflow build

.github/workflows/main.yml

@@ -0,0 +1,74 @@
+name: Liman Webpage Build Pipeline
+on: [push]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install checkout
+        uses: actions/checkout@v2
+
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 20
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: npm-
+
+      - name: Cache next build
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.npm
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/*.[jt]s', '**/*.[jt]sx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+
+      - name: Build Next application
+        run: |
+          npm ci --ignore-build
+          npm run build
+
+          [ "$GITHUB_REF" == "refs/heads/master" ] && PRERELEASE=false || PRERELEASE=true
+          echo "PRERELEASE=$(echo $PRERELEASE)" >> $GITHUB_ENV
+          echo "UI_BRANCH=${GITHUB_REF#refs/heads/}" >> $GITHUB_ENV
+
+      - name: Move Next standalone files and build package
+        run: |
+          cp -r public/ .next/standalone/
+          cp -r .next/static .next/standalone/.next/
+          TMP_DIR=/tmp/liman-website
+          DEBIAN_PATH=$TMP_DIR/DEBIAN
+          SERVER_BIN_PATH=$TMP_DIR/liman/website
+          rm -rf $TMP_DIR
+          mkdir $TMP_DIR
+          mkdir $DEBIAN_PATH
+          mkdir -p $SERVER_BIN_PATH
+          cp ./build/debian/control $DEBIAN_PATH/control
+          sed -i s/%VERSION%/${{ github.run_number }}/g $DEBIAN_PATH/control
+          cat $DEBIAN_PATH/control
+          cp ./build/debian/postinst $DEBIAN_PATH/postinst
+          chmod 775 $DEBIAN_PATH/postinst
+          mv -r .next/standalone $SERVER_BIN_PATH
+          dpkg-deb --build $TMP_DIR
+          mv /tmp/liman-website.deb /tmp/liman-website-x64.deb
+          rm -rf $DEBIAN_PATH
+
+          sed -i s/%VERSION%/${{ github.run_number }}/g build/rhel/website.spec
+          rpmbuild -ba build/rhel/website.spec --define "_app_dir $TMP_DIR" --define "_rpmdir /tmp" --define "_rpmfilename liman-website-x64.rpm"
+
+      - name: Release 🚀
+        id: create_release
+        uses: softprops/action-gh-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.TOKEN }}
+        with:
+          files: /tmp/liman-${{ env.UI_BRANCH }}-${{ github.run_number }}.zip
+          name: "Release ${{ env.UI_BRANCH }} ${{ github.run_number }}"
+          tag_name: "release.${{ env.UI_BRANCH }}.${{ github.run_number }}"
+          prerelease: ${{ env.PRERELEASE }}

components.json

@@ -3,7 +3,7 @@
   "style": "default",
   "tailwind": {
     "config": "tailwind.config.js",
-    "css": "app/globals.css",
+    "css": "styles/globals.css",
     "baseColor": "slate",
     "cssVariables": true
   },
@@ -12,4 +12,4 @@
     "utils": "@/lib/utils",
     "components": "@/components"
   }
-}
+}

components/home/references.tsx

@@ -5,7 +5,10 @@ export default function References() {
   return (
     <div className="pointer-events-none relative border-t bg-background py-10">
       <Particles className="absolute w-full" />
-      <div className="container">
+      <div className="container flex flex-col items-center gap-5">
+        <h5 className="bg-gradient-to-r from-slate-400 to-slate-500 bg-clip-text text-sm font-semibold text-transparent">
+          Kurumlar tarafından güveniliyor
+        </h5>
         <LogoCarousel />
       </div>
     </div>

components/ui/bg.tsx

@@ -2,7 +2,7 @@ export default function Bg() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      className="absolute -z-10 h-[1300px] w-full opacity-25"
+      className="absolute -z-10 h-full max-h-[1300px] w-full opacity-25"
     >
       <defs>
         <filter

components/ui/logo-carousel.tsx

@@ -14,14 +14,20 @@ import { cn } from "@/lib/utils"
 
 export default function LogoCarousel() {
   const logos = [
-    { src: GAMER, alt: "GAMER, İçişleri Bakanlığı" },
-    { src: HAVELSAN, alt: "HAVELSAN" },
+    {
+      src: YSK,
+      alt: "Yüksek Seçim Kurulu",
+      noFilter: true,
+      className: "w-full h-[72px]",
+    },
     {
       src: KiyiEmniyeti,
       alt: "Kıyı Emniyeti Genel Müdürlüğü",
       noFilter: true,
       className: "w-full h-[72px]",
     },
+    { src: GAMER, alt: "GAMER, İçişleri Bakanlığı" },
+    { src: HAVELSAN, alt: "HAVELSAN" },
     { src: Icisleri, alt: "T.C. İçişleri Bakanlığı", className: "h-[48px]" },
     { src: Kizilay, alt: "Kızılay", className: "h-[48px]" },
     { src: MSB, alt: "Milli Savunma Bakanlığı", className: "h-[55px]" },
@@ -31,12 +37,7 @@ export default function LogoCarousel() {
       className: "h-[48px]",
     },
     { src: TCMB, alt: "Türkiye Cumhuriyet Merkez Bankası" },
-    {
-      src: YSK,
-      alt: "Yüksek Seçim Kurulu",
-      noFilter: true,
-      className: "w-full h-[72px]",
-    },
+
     { src: ZiraatKatilim, alt: "Ziraat Katılım" },
   ]
 

components/ui/spotlight.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import React, { useEffect, useRef, useState } from "react"
+
+import MousePosition from "@/lib/mouse-position"
+
+type SpotlightProps = {
+  children: React.ReactNode
+  className?: string
+}
+
+export default function Spotlight({
+  children,
+  className = "",
+}: SpotlightProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const mousePosition = MousePosition()
+  const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+  const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 })
+  const [boxes, setBoxes] = useState<Array<HTMLElement>>([])
+
+  useEffect(() => {
+    containerRef.current &&
+      setBoxes(
+        Array.from(containerRef.current.children).map((el) => el as HTMLElement)
+      )
+  }, [])
+
+  useEffect(() => {
+    initContainer()
+    window.addEventListener("resize", initContainer)
+
+    return () => {
+      window.removeEventListener("resize", initContainer)
+    }
+  }, [setBoxes])
+
+  useEffect(() => {
+    onMouseMove()
+  }, [mousePosition])
+
+  const initContainer = () => {
+    if (containerRef.current) {
+      containerSize.current.w = containerRef.current.offsetWidth
+      containerSize.current.h = containerRef.current.offsetHeight
+    }
+  }
+
+  const onMouseMove = () => {
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect()
+      const { w, h } = containerSize.current
+      const x = mousePosition.x - rect.left
+      const y = mousePosition.y - rect.top
+      const inside = x < w && x > 0 && y < h && y > 0
+      if (inside) {
+        mouse.current.x = x
+        mouse.current.y = y
+        boxes.forEach((box) => {
+          const boxX =
+            -(box.getBoundingClientRect().left - rect.left) + mouse.current.x
+          const boxY =
+            -(box.getBoundingClientRect().top - rect.top) + mouse.current.y
+          box.style.setProperty("--mouse-x", `${boxX}px`)
+          box.style.setProperty("--mouse-y", `${boxY}px`)
+        })
+      }
+    }
+  }
+
+  return (
+    <div className={className} ref={containerRef}>
+      {children}
+    </div>
+  )
+}
+
+type SpotlightCardProps = {
+  children: React.ReactNode
+  className?: string
+}
+
+export function SpotlightCard({
+  children,
+  className = "",
+}: SpotlightCardProps) {
+  return (
+    <div
+      className={`relative h-full overflow-hidden rounded-3xl bg-slate-800 p-px before:pointer-events-none before:absolute before:-left-40 before:-top-40 before:z-10 before:h-80 before:w-80 before:translate-x-[var(--mouse-x)] before:translate-y-[var(--mouse-y)] before:rounded-full before:bg-slate-400 before:opacity-0 before:blur-[100px] before:transition-opacity before:duration-500 after:pointer-events-none after:absolute after:-left-48 after:-top-48 after:z-30 after:h-96 after:w-96 after:translate-x-[var(--mouse-x)] after:translate-y-[var(--mouse-y)] after:rounded-full after:bg-indigo-500 after:opacity-0 after:blur-[100px] after:transition-opacity after:duration-500 after:hover:opacity-10 before:group-hover:opacity-100 ${className}`}
+    >
+      {children}
+    </div>
+  )
+}

next.config.mjs

@@ -1,9 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  trailingSlash: true,
-  skipTrailingSlashRedirect: true,
-  distDir: "dist",
+  swcMinify: true,
+  output: "standalone",
 }
 
 export default nextConfig