Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: more ui #185

Merged
merged 9 commits into from
Mar 16, 2025
Merged

chore: more ui #185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
aa05d1a
refactor(frontend): enhance homepage layout and animations for improv…
Sma1lboy Mar 16, 2025
4cf450b
refactor(frontend): update layout and styling for improved readabilit…
Sma1lboy Mar 16, 2025
ff2afb4
refactor(frontend): replace Poppins font with Inter and add AuroraTex…
Sma1lboy Mar 16, 2025
3622052
refactor(frontend): clean up comments and improve select component st…
Sma1lboy Mar 16, 2025
1c49525
refactor(frontend): update logo size and enhance text styling for imp…
Sma1lboy Mar 16, 2025
dfbcd5d
refactor(frontend): enhance chat panel with animations and improve co…
Sma1lboy Mar 16, 2025
3f20e19
refactor(frontend): update chat topbar with badge component and mock …
Sma1lboy Mar 16, 2025
0ca3a6a
refactor(frontend): clean up chat components and improve sidebar styl…
Sma1lboy Mar 16, 2025
0fdc3b8
[autofix.ci] apply automated fixes
autofix-ci[bot] Mar 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@radix-ui/react-scroll-area": "^1.2.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-separator": "^1.1.1",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.2",
"@radix-ui/react-tooltip": "^1.1.6",
"@radix-ui/react-visually-hidden": "^1.1.1",
Expand Down
218 changes: 140 additions & 78 deletions frontend/src/app/(main)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { SignInModal } from '@/components/sign-in-modal';
import { SignUpModal } from '@/components/sign-up-modal';
import { useRouter } from 'next/navigation';
import { logger } from '../log/logger';
import { AuroraText } from '@/components/magicui/aurora-text';
export default function HomePage() {
// States for AuthChoiceModal
const [showAuthChoice, setShowAuthChoice] = useState(false);
Expand All @@ -31,6 +32,8 @@ export default function HomePage() {

try {
const chatId = await createProjectFromPrompt(message, isPublic, model);

console.log('Project created with ID:', chatId);
promptFormRef.current.clearMessage();
router.push(`/chat?id=${chatId}`);
} catch (error) {
Expand All @@ -39,85 +42,144 @@ export default function HomePage() {
};

return (
<div className="pt-32 pb-24 px-6">
<motion.div
className="flex flex-col items-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<div className="mb-6">
<Image
src="/codefox.svg"
alt="CodeFox Logo"
width={120}
height={120}
className="h-32 w-auto"
/>
</div>

<div className="mb-16">
<div className="flex flex-col items-center">
<p className="text-5xl font-medium text-primary-600 dark:text-primary-400 mb-3">
Sentence to a project in seconds.
</p>
<p className="text-xl text-gray-600 dark:text-gray-400">
Codefox built AI agents crew for you to create your next project
</p>
<div className="min-h-screen pt-16 pb-24 px-6 flex flex-col items-center justify-center relative overflow-hidden">
<div className="fixed inset-0 -z-20">
<div className="absolute top-0 right-0 w-[800px] h-[800px] bg-primary-500/5 rounded-full blur-[120px] transform translate-x-1/2 -translate-y-1/2"></div>
<div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-primary-500/5 rounded-full blur-[100px] transform -translate-x-1/2 translate-y-1/2"></div>
</div>

<div className="w-full mx-auto flex flex-col items-center mt-40 ">
<motion.div
className="flex flex-col items-center w-full"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<div className="mb-6">
<Image
src="/codefox.svg"
alt="CodeFox Logo"
width={120}
height={120}
className="h-32 w-auto"
/>
</div>
</div>

<div className="w-full mb-12">
<PromptForm
ref={promptFormRef}
isAuthorized={isAuthorized}
onSubmit={handleSubmit}
onAuthRequired={() => setShowAuthChoice(true)}
isLoading={isLoading}
/>
</div>

<div className="w-full mb-24 mt-24">
<ProjectsSection />
</div>
</motion.div>

{/* Choice Modal */}
<AuthChoiceModal
isOpen={showAuthChoice}
onClose={() => setShowAuthChoice(false)}
onSignUpClick={() => {
setShowAuthChoice(false);
setTimeout(() => {
setShowSignUp(true);
}, 100);
}}
onSignInClick={() => {
setShowAuthChoice(false);
setTimeout(() => {
setShowSignIn(true);
}, 100);
}}
/>

{/* SignInModal & SignUpModal */}
<SignInModal isOpen={showSignIn} onClose={() => setShowSignIn(false)} />
<SignUpModal isOpen={showSignUp} onClose={() => setShowSignUp(false)} />

<style jsx global>{`
.animate-pulse-subtle {
animation: pulse-subtle 2s infinite;
}
@keyframes pulse-subtle {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.85;
}
}
`}</style>
<motion.div
className="mb-16 relative"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8 }}
>
<div className="flex flex-col items-center">
<motion.h1
className="text-5xl sm:text-6xl font-bold mb-8 tracking-tight leading-tight text-center"
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{
duration: 0.8,
ease: [0.22, 1, 0.36, 1],
}}
>
From Idea to <AuroraText>Full-Stack</AuroraText> in Seconds
</motion.h1>

<motion.p
className="text-xl sm:text-2xl text-gray-600 dark:text-gray-400 max-w-2xl text-center"
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{
duration: 0.7,
delay: 0.5,
ease: 'easeOut',
}}
>
CodeFox provides an AI-driven multi-agent crew to help you
create your next project instantly
</motion.p>
</div>

<motion.div
className="absolute -z-10 left-1/4 -translate-x-1/2 top-0 w-32 h-32 rounded-full bg-primary-500/10 blur-2xl"
animate={{
scale: [1, 1.2, 1],
opacity: [0.5, 0.7, 0.5],
}}
transition={{
duration: 6,
repeat: Infinity,
repeatType: 'reverse',
}}
/>

<motion.div
className="absolute -z-10 right-1/4 translate-x-1/2 top-0 w-32 h-32 rounded-full bg-primary-500/10 blur-2xl"
animate={{
scale: [1, 1.2, 1],
opacity: [0.5, 0.7, 0.5],
}}
transition={{
duration: 6,
delay: 1.5,
repeat: Infinity,
repeatType: 'reverse',
}}
/>
</motion.div>

<motion.div
className="relative w-full max-w-3xl"
initial={{ y: 40, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{
duration: 0.8,
delay: 0.7,
ease: 'easeOut',
}}
>
<div className="absolute -z-10 inset-0 bg-gradient-to-r from-primary-500/5 to-primary-600/5 rounded-2xl blur-xl transform scale-105"></div>

<div className=" bg-white/10 dark:bg-gray-800/30 backdrop-blur-md rounded-lg border border-primary/20 dark:border-gray-700/40 shadow-[0_8px_30px_rgb(0,0,0,0.12)] transition-all duration-300 hover:shadow-[0_8px_30px_rgba(120,120,255,0.5)] hover:border-primary-500/60">
<PromptForm
ref={promptFormRef}
isAuthorized={isAuthorized}
onSubmit={handleSubmit}
onAuthRequired={() => setShowAuthChoice(true)}
isLoading={isLoading}
/>
</div>
</motion.div>

<motion.div
className="w-full mb-24 mt-40"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true, margin: '-100px' }}
transition={{ duration: 0.8 }}
>
<ProjectsSection />
</motion.div>
</motion.div>

<AuthChoiceModal
isOpen={showAuthChoice}
onClose={() => setShowAuthChoice(false)}
onSignUpClick={() => {
setShowAuthChoice(false);
setTimeout(() => {
setShowSignUp(true);
}, 100);
}}
onSignInClick={() => {
setShowAuthChoice(false);
setTimeout(() => {
setShowSignIn(true);
}, 100);
}}
/>

<SignInModal isOpen={showSignIn} onClose={() => setShowSignIn(false)} />
<SignUpModal isOpen={showSignUp} onClose={() => setShowSignUp(false)} />
</div>
</div>
);
}
4 changes: 2 additions & 2 deletions frontend/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,8 +168,8 @@
.button-no-border {
@apply !border-none !outline-none !shadow-none;
}
.button-no-border:hover,
.button-no-border:focus,
.button-no-border:hover,
.button-no-border:focus,
.button-no-border:active {
@apply !border-none !outline-none !shadow-none !ring-0;
}
12 changes: 8 additions & 4 deletions frontend/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
//frontend/src/app/layout.tsx
// frontend/src/app/layout.tsx
import type { Metadata, Viewport } from 'next';
import { Inter } from 'next/font/google';
import { Inter, Playfair_Display } from 'next/font/google';
import './globals.css';
import { BaseProviders } from '@/providers/BaseProvider';
import NavLayout from '@/components/root/nav-layout';
import RootLayout from '@/components/root/root-layout';

const inter = Inter({ subsets: ['latin'] });
const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
const playfair = Playfair_Display({
subsets: ['latin'],
variable: '--font-playfair',
});

export const metadata: Metadata = {
title: 'Codefox - The best dev project generator',
Expand All @@ -23,7 +27,7 @@ export const viewport: Viewport = {
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
<body className={`${inter.variable} ${playfair.variable} font-sans`}>
<BaseProviders>
<div className="min-h-screen w-full bg-gray-50 dark:bg-gray-900 transition-colors">
<RootLayout>{children}</RootLayout>
Expand Down
Loading
Loading