design: main page 퍼블리싱

gitlio/app/editor/_components/mainPageComponent/NavAnimation.tsx

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+
+export default function BrandTextSlider() {
+  const text = 'Make Your Own Portfolio with GITLIO! Team 5-4. 2024 ◡̈';
+  const repeatCount = 10; // Number of times to repeat the text
+  const texts = Array.from({ length: repeatCount }, () => text);
+  const totalTexts = texts.length;
+  const duplicateTexts = [...texts, ...texts]; // Duplicate the text array for continuous effect
+
+  return (
+    <div
+      className="swiper-container"
+      style={{ overflow: 'hidden', width: '100%' }}
+    >
+      <div className="continuous-slider">
+        {duplicateTexts.map((text, index) => (
+          <div key={index} className="slide">
+            <span>{text}</span>
+          </div>
+        ))}
+      </div>
+
+      <style jsx>{`
+        .continuous-slider {
+          display: flex;
+          white-space: nowrap;
+          animation: slide 30s linear infinite;
+        }
+
+        .slide {
+          flex: 0 0 auto;
+          width: 100%; // Ensure each text spans the full width of the container
+          text-align: center; // Center text within each slide
+        }
+
+        @keyframes slide {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(
+              -${100 * totalTexts}%
+            ); // Move the entire text set
+          }
+        }
+      `}</style>
+    </div>
+  );
+}

gitlio/app/page.tsx

@@ -1,46 +1,53 @@
-'use client';
-import React, { useState } from 'react';
-import Logo from '@/components/Logo';
-import {
-  SignedIn,
-  SignedOut,
-  SignIn,
-  SignInButton,
-  UserButton,
-} from '@clerk/nextjs';
+import React from 'react';
+import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';
 import Link from 'next/link';
+import dayjs from 'dayjs';
+import Gicon from '../public/main/gitlio-icon.svg';
+import TitleSvg from '../public/main/title.svg';
+import DashText from '../public/main/dashtext.svg';
+import frame from '../public/main/frame.png';
+import NavAnimation from '../components/mainComponents/NavAnimation';
 
 const StartPage: React.FC = () => {
+  const now = dayjs();
+  now.format();
   return (
-    <div className="bg-primary flex justify-center items-center h-screen">
-      <nav className="flex justify-between items-center border-b border-border h-[60px] px-4 py-2 absolute top-0 w-full">
-        <Logo />
-        <SignedOut>
-          <SignInButton
-            forceRedirectUrl="/studio/dashboard"
-            fallbackRedirectUrl="/studio/dashboard"
-          />
-        </SignedOut>
-        <SignedIn>
-          <UserButton afterSignOutUrl="/" />
-        </SignedIn>
-      </nav>{' '}
-      <div className="bg-primary flex flex-col justify-center items-center h-screen">
+    <div className="flex flex-col bg-primary h-screen justify-center items-center">
+      <div className="fixed top-0 left-0 w-full">
+        <nav className="w-full h-[60px] flex items-center justify-between px-4 py-2 border-b border-border bg-[#F3F3F3]">
+          <NavAnimation />
+        </nav>
+        <nav className="flex justify-between items-center border-b border-border h-[60px] px-4 py-2 bg-white">
+          <Gicon />
+          <SignedOut>
+            <SignInButton
+              forceRedirectUrl="/studio/dashboard"
+              fallbackRedirectUrl="/studio/dashboard"
+            />
+          </SignedOut>
+          <SignedIn>
+            <UserButton afterSignOutUrl="/" />
+          </SignedIn>
+        </nav>
+      </div>
+      <div className="flex flex-col items-center justify-center space-y-4">
+        <div className="flex flex-row ">
+          <div>Site of the Day</div>
+          <div className="border rounded-md"></div>
+        </div>
+        <TitleSvg />
         <SignedOut>
           <SignInButton
             forceRedirectUrl="/studio/dashboard"
             fallbackRedirectUrl="/studio/dashboard"
             mode={'modal'}
           >
-            <button className="btn-lg btn">Sign in with Clerk</button>
+            <button className="btn-lg btn">Join Us!</button>
           </SignInButton>
         </SignedOut>
         <SignedIn>
-          <Link
-            href="/studio/dashboard"
-            className="btn btn-ghost text-xl text-[#8288a1] underline underline-offset-4"
-          >
-            DASHBOARD
+          <Link href="/studio/dashboard">
+            <DashText />
           </Link>
         </SignedIn>
       </div>

gitlio/components/mainComponents/NavAnimation.tsx

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+
+export default function BrandTextSlider() {
+  const text = 'Make Your Own Portfolio with GITLIO! Team 5-4. 2024 ◡̈';
+  const repeatCount = 20; // Number of times to repeat the text for increased frequency
+  const texts = Array.from({ length: repeatCount }, () => text);
+  const totalTexts = texts.length;
+  const duplicateTexts = [...texts, ...texts]; // Duplicate the text array for continuous effect
+
+  return (
+    <div
+      className="swiper-container"
+      style={{ overflow: 'hidden', width: '100%' }}
+    >
+      <div className="continuous-slider">
+        {duplicateTexts.map((text, index) => (
+          <div key={index} className="slide">
+            <span>{text}</span>
+          </div>
+        ))}
+      </div>
+
+      <style jsx>{`
+        .continuous-slider {
+          display: flex;
+          white-space: nowrap;
+          animation: slide 200s linear infinite;
+        }
+
+        .slide {
+          flex: 0 0 auto;
+          width: 28%; // Decrease width to allow more text to appear per view
+          text-align: center; // Center text within each slide
+        }
+
+        @keyframes slide {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(
+              -${50 * totalTexts}%
+            ); // Adjust translateX to account for more items
+          }
+        }
+      `}</style>
+    </div>
+  );
+}

gitlio/next.config.mjs

@@ -1,4 +1,14 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  reactStrictMode: true,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
+};
 
 export default nextConfig;