0xmetaschool/
FrameForge
FrameForge revolutionizes PC building by using AI to create optimized computer builds based on user preferences and budget. Built with Next.js and powered by GPT-4, this open-source template provides developers with a foundation to create their own AI-powered PC building platforms.
Readme
Source Code.vscode
app
overview
pc-builder
globals.css
layout.tsx
page.tsx
components
hooks
lib
types
utils
.eslintrc.json
.gitignore
components.json
LICENSE
next.config.mjs
package.json
postcss.config.mjs
README.md
tailwind.config.ts
tsconfig.json
app
page.tsx
page.tsxpage.tsx
1"use client";
2import { AnimatedFFLogo } from "@/components/AnimatedFFLogo";
3import Logo from "@/components/Logo";
4import { Button } from "@/components/ui/button";
5import { motion } from "framer-motion";
6import { useRouter } from "next/navigation";
7import { useState } from "react";
8
9export default function Home() {
10 const [isLoading, setIsLoading] = useState(false);
11 const router = useRouter();
12 const handleSignIn = async () => {
13 router.push("/pc-builder");
14 };
15
16 return (
17 <div className="flex h-[calc(100vh-80px)] flex-col items-center justify-center bg-background px-4 overflow-x-hidden">
18 <div className="w-full max-w-[1400px] mx-auto">
19 <div className="flex min-h-[calc(100vh-80px)] flex-col lg:flex-row items-center justify-center gap-12 lg:gap-24 py-6 lg:py-16">
20 <motion.div
21 className="w-full max-w-[300px] sm:max-w-[400px] lg:max-w-none lg:w-auto lg:flex-grow flex items-center justify-center"
22 initial={{ opacity: 0, scale: 0.9 }}
23 animate={{ opacity: 1, scale: 1 }}
24 whileHover={{ scale: 1.05 }}
25 transition={{
26 duration: 0.3,
27 ease: "easeOut",
28 scale: {
29 type: "spring",
30 stiffness: 300,
31 damping: 20,
32 },
33 }}
34 >
35 <AnimatedFFLogo className="w-full h-full" />
36 </motion.div>
37
38 <motion.div
39 className="flex flex-col items-center lg:items-start justify-center gap-6 lg:gap-8 w-full lg:max-w-2xl"
40 initial={{ opacity: 0, y: 20 }}
41 animate={{ opacity: 1, y: 0 }}
42 transition={{ duration: 0.5, delay: 0.2 }}
43 >
44 <div className="flex flex-col items-center lg:items-start gap-4 w-full">
45 <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold text-foreground text-center lg:text-left tracking-tight">
46 FrameForge
47 </h1>
48 <p className="text-base sm:text-lg lg:text-2xl text-muted-foreground text-center lg:text-left max-w-[90%] sm:max-w-none">
49 Build your Dream Battle Station aided by our custom AI.
50 </p>
51 </div>
52
53 <div className="flex flex-col items-center lg:items-start gap-4 w-full">
54 <motion.div
55 className="w-full sm:max-w-md lg:max-w-none"
56 whileHover={{ scale: 1.02 }}
57 whileTap={{ scale: 0.98 }}
58 transition={{ duration: 0.2 }}
59 >
60 <Button
61 onClick={handleSignIn}
62 variant="outline"
63 size="lg"
64 className="w-full lg:w-auto px-6 py-6 lg:px-16 bg-black text-white dark:bg-white dark:text-black text-lg sm:text-xl font-medium"
65 disabled={isLoading}
66 >
67 {isLoading
68 ? "Initiating Battle station build process..."
69 : "Start Building"}
70 </Button>
71 </motion.div>
72 <p className="text-sm sm:text-base lg:text-lg text-center lg:text-left text-muted-foreground px-4 sm:px-0">
73 No credit card required. Click the button above to get started.
74 </p>
75 </div>
76 </motion.div>
77 </div>
78 </div>
79 </div>
80 );
81}
82Downloads
0
Version
1.0.0
License
MIT
Platform
OpenAI GPT-4
Contributors 3
Open in
Last updated 3 months ago
We are a open source platform and encourage community to contribute to these templates!