gh pages

.github/workflows/deploy.yml

@@ -0,0 +1,66 @@
+name: Deploy Next.js site to Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+          cache-dependency-path: './portfolio_FE/package-lock.json'
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          static_site_generator: next
+          enablement: true
+
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            ./portfolio_FE/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('./portfolio_FE/package-lock.json') }}-${{ hashFiles('./portfolio_FE/**/*.js', './portfolio_FE/**/*.jsx', './portfolio_FE/**/*.ts', './portfolio_FE/**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('./portfolio_FE/package-lock.json') }}-
+
+      - name: Install dependencies
+        run: cd ./portfolio_FE && npm ci
+
+      - name: Build with Next.js
+        run: cd ./portfolio_FE && npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./portfolio_FE/out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

portfolio_FE/app/contact/page.tsx

@@ -1,11 +1,13 @@
+import * as React from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
 import { Button } from "@/components/ui/button"
-import { Label } from "@/components/ui/label"
 import { Mail, Phone, MapPin, MessageCircle, Clock, Send } from "lucide-react"
+import { ContactFormClient } from "@/components/contact-form-client"
 
 export default function ContactUs() {
+  const serviceId = process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID || "service_3bxel59"
+  const templateId = process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID
+  const publicKey = process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY
   return (
     <div className="container mx-auto px-4 py-12">
       <div className="text-center mb-12">
@@ -25,58 +27,14 @@ export default function ContactUs() {
             </CardTitle>
           </CardHeader>
           <CardContent>
-            <form className="space-y-6">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="firstName">First Name *</Label>
-                  <Input id="firstName" placeholder="John" required />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="lastName">Last Name *</Label>
-                  <Input id="lastName" placeholder="Doe" required />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="email">Email Address *</Label>
-                <Input id="email" type="email" placeholder="john@example.com" required />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="subject">Subject *</Label>
-                <Input id="subject" placeholder="How can we help you?" required />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="category">Category</Label>
-                <select 
-                  id="category" 
-                  className="w-full px-3 py-2 border border-border rounded-md bg-background"
-                >
-                  <option value="">Select a category</option>
-                  <option value="general">General Inquiry</option>
-                  <option value="technical">Technical Support</option>
-                  <option value="billing">Billing & Accounts</option>
-                  <option value="feature">Feature Request</option>
-                  <option value="bug">Bug Report</option>
-                </select>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="message">Message *</Label>
-                <Textarea 
-                  id="message" 
-                  placeholder="Please describe your question or issue in detail..."
-                  rows={6}
-                  required 
-                />
-              </div>
-
-              <Button type="submit" className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700">
-                <Send className="w-4 h-4 mr-2" />
-                Send Message
-              </Button>
-            </form>
+            {/* Anchor for in-page navigation from CTAs */}
+            <div id="send-message" className="scroll-mt-24" />
+            <ContactFormClient serviceId={serviceId} templateId={templateId} publicKey={publicKey} />
+            <div className="text-center mt-3 text-sm text-muted-foreground">
+              Or email us directly at
+              {" "}
+              <a className="underline" href="mailto:2300033535@kluniversity.in">2300033535@kluniversity.in</a>
+            </div>
           </CardContent>
         </Card>
 
@@ -92,7 +50,7 @@ export default function ContactUs() {
                 <Mail className="w-5 h-5 text-primary mt-1" />
                 <div>
                   <h3 className="font-semibold">Email</h3>
-                  <p className="text-muted-foreground">2300030442@kluniversity</p>
+                  <p className="text-muted-foreground">2300033535@kluniversity.in</p>
                   <p className="text-sm text-muted-foreground">We'll respond within 24 hours</p>
                 </div>
               </div>
@@ -146,21 +104,23 @@ export default function ContactUs() {
             </CardContent>
           </Card>
 
-          {/* Live Chat */}
+          {/* Send Feedback */}
           <Card>
             <CardHeader>
               <CardTitle className="flex items-center gap-2">
                 <MessageCircle className="w-5 h-5" />
-                Live Chat
+                Send Feedback
               </CardTitle>
             </CardHeader>
             <CardContent>
               <p className="text-muted-foreground mb-4">
-                Need immediate help? Chat with our support team for real-time assistance.
+                Tell us what you think about PortfolioCraft. Have ideas, requests, or found a bug? We’d love to hear from you.
               </p>
-              <Button className="w-full border-primary text-primary hover:bg-primary hover:text-primary-foreground" variant="secondary">
-                <MessageCircle className="w-4 h-4 mr-2" />
-                Start Live Chat
+              <Button asChild className="w-full border-primary text-primary hover:bg-primary hover:text-primary-foreground" variant="secondary">
+                <a href="#send-message">
+                  <MessageCircle className="w-4 h-4 mr-2" />
+                  Send Feedback
+                </a>
               </Button>
             </CardContent>
           </Card>
@@ -175,8 +135,8 @@ export default function ContactUs() {
             <CardContent className="p-6">
               <h3 className="font-semibold mb-2">How quickly will I receive a response?</h3>
               <p className="text-muted-foreground text-sm">
-                We aim to respond to all inquiries within 24 hours during business days. 
-                For urgent issues, please use our live chat feature.
+                We aim to respond to all inquiries within 24 hours during business days.
+                For urgent issues, please use our contact form for the fastest response.
               </p>
             </CardContent>
           </Card>

portfolio_FE/app/help/page.tsx

@@ -1,7 +1,6 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Search, Book, MessageCircle, Video, FileText, HelpCircle } from "lucide-react"
+import { Search, Book, MessageCircle, Video, FileText } from "lucide-react"
 
 export default function HelpCenter() {
   const helpCategories = [
@@ -141,23 +140,7 @@ export default function HelpCenter() {
         </div>
       </div>
 
-      {/* Contact Support */}
-      <div className="bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-lg p-8 text-center">
-        <HelpCircle className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
-        <h2 className="text-2xl font-bold mb-4">Still Need Help?</h2>
-        <p className="text-muted-foreground mb-6">
-          Can't find what you're looking for? Our support team is here to help
-        </p>
-        <div className="flex gap-4 justify-center">
-          <Button variant="secondary" className="border-primary text-primary hover:bg-primary hover:text-primary-foreground">
-            <MessageCircle className="w-4 h-4 mr-2" />
-            Live Chat
-          </Button>
-          <Button>
-            Contact Support
-          </Button>
-        </div>
-      </div>
+      {/* Support CTA removed per request */}
     </div>
   )
 }

portfolio_FE/app/landing/page.tsx

@@ -3,6 +3,9 @@
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
+import { Vortex } from "@/components/ui/vortex"
+import { useTheme } from "next-themes"
+import * as React from "react"
 import Link from "next/link"
 import { 
   ArrowRight, 
@@ -17,7 +20,17 @@ import {
   Sparkles
 } from "lucide-react"
 
+// Helper function to get the correct image path based on environment
+const getImagePath = (imageName: string) => {
+  const basePath = process.env.NODE_ENV === 'production' ? '/Portfolio-builder' : ''
+  return `${basePath}/${imageName}`
+}
+
 export default function LandingPage() {
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+  const [mounted, setMounted] = React.useState(false)
+  React.useEffect(() => setMounted(true), [])
   const features = [
     {
       icon: Palette,
@@ -80,15 +93,22 @@ export default function LandingPage() {
   ]
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen relative">
+      {/* Full-page Vortex background in dark mode */}
+      {mounted && isDark && (
+        <div className="fixed inset-0 -z-10">
+          <Vortex backgroundColor="black" containerClassName="h-full w-full" />
+        </div>
+      )}
+
       {/* Hero Section */}
-      <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
+  <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:bg-transparent dark:bg-none">
         <div className="container mx-auto px-4 py-20 lg:py-32">
           <div className="text-center max-w-4xl mx-auto">
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
               Build Your Dream Portfolio in Minutes
             </h1>
-            <p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
+            <p className="text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed dark:text-white/90">
               Create stunning, professional portfolios that showcase your skills and help you land your dream job. 
               No coding required.
             </p>
@@ -100,7 +120,7 @@ export default function LandingPage() {
                 </Button>
               </Link>
               <Link href="/templates">
-                <Button size="lg" variant="outline" className="text-lg px-8 py-6">
+                <Button size="lg" variant="outline" className="text-lg px-8 py-6 dark:border-white/30 dark:text-white dark:hover:bg-white/10">
                   View Examples
                 </Button>
               </Link>
@@ -110,7 +130,7 @@ export default function LandingPage() {
       </section>
 
       {/* Features Section */}
-      <section className="py-20 bg-gray-50 dark:bg-gray-800">
+  <section className="py-20 bg-gray-50 dark:bg-transparent">
         <div className="container mx-auto px-4">
           <div className="text-center mb-16">
             <h2 className="text-3xl md:text-5xl font-bold mb-6">
@@ -141,7 +161,7 @@ export default function LandingPage() {
       </section>
 
       {/* Templates Section */}
-      <section className="py-20 bg-white dark:bg-gray-900">
+  <section className="py-20 bg-white dark:bg-transparent">
         <div className="container mx-auto px-4">
           <div className="text-center mb-16">
             <h2 className="text-3xl md:text-5xl font-bold mb-6">
@@ -161,7 +181,7 @@ export default function LandingPage() {
                 <Card className="overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer">
                   <div className="relative">
                     <img 
-                      src="/modern-portfolio-template-with-dark-theme-and-clea.jpg" 
+                      src={getImagePath("modern-portfolio-template-with-dark-theme-and-clea.jpg")} 
                       alt="Modern Portfolio Template"
                       className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                     />
@@ -181,7 +201,7 @@ export default function LandingPage() {
                 <Card className="overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer">
                   <div className="relative">
                     <img 
-                      src="/minimal-portfolio-template-with-white-background-a.jpg" 
+                      src={getImagePath("minimal-portfolio-template-with-white-background-a.jpg")} 
                       alt="Minimal Portfolio Template"
                       className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                     />
@@ -201,7 +221,7 @@ export default function LandingPage() {
                 <Card className="overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer">
                   <div className="relative">
                     <img 
-                      src="/creative-portfolio-template-with-colorful-design-a.jpg" 
+                      src={getImagePath("creative-portfolio-template-with-colorful-design-a.jpg")} 
                       alt="Creative Portfolio Template"
                       className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                     />
@@ -221,7 +241,7 @@ export default function LandingPage() {
                 <Card className="overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer">
                   <div className="relative">
                     <img 
-                      src="/professional-portfolio-template-with-corporate-des.jpg" 
+                      src={getImagePath("professional-portfolio-template-with-corporate-des.jpg")} 
                       alt="Professional Portfolio Template"
                       className="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
                     />
@@ -273,7 +293,7 @@ export default function LandingPage() {
       </section>
 
       {/* CTA Section */}
-      <section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
+      <section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white dark:bg-transparent">
         <div className="container mx-auto px-4 text-center">
           <h2 className="text-3xl md:text-5xl font-bold mb-6">
             Ready to Build Your Portfolio?

portfolio_FE/app/page.tsx

@@ -1,7 +1,23 @@
-import { redirect } from 'next/navigation'
+"use client"
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 
 export default function Home() {
-  // Redirect to landing page for now
-  // Later this will check authentication and redirect accordingly
-  redirect('/landing')
+  const router = useRouter()
+
+  useEffect(() => {
+    // Redirect to landing page for GitHub Pages compatibility
+    router.replace('/landing')
+  }, [router])
+
+  // Show loading or redirect immediately
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="text-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    </div>
+  )
 }