Add files via upload

YashDhirajOza · Sep 15, 2024 · e51f669 · e51f669
1 parent eff46a2
commit e51f669
Show file tree

Hide file tree

Showing 47 changed files with 1,006 additions and 0 deletions.
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import { DM_Sans } from "next/font/google";
+import clsx from "clsx";
+import "./globals.css";
+
+const dmSans = DM_Sans({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Saas Template - EldoraUI",
+  description: "Template for saas applications with dark theme",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={clsx(dmSans.className, "antialiased")}>{children}</body>
+    </html>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,33 @@
+import { Banner } from "@/components/Banner";
+import { Navbar } from "@/components/Navbar";
+import { Hero } from "@/components/Hero";
+import { LogoTicker } from "@/components/LogoTicker";
+import { Features } from "@/components/Features";
+import { ProductShowcase } from "@/components/ProductShowcase";
+import { FAQs } from "@/components/FAQs";
+import { CallToAction } from "@/components/CallToAction";
+import { Footer } from "@/components/Footer";
+import { Pricing } from "@/components/Pricingdemo";
+
+
+export default function Home() {
+  return (
+    <>
+    <div className="overflow-x-hidden">
+      <Banner />
+      <Navbar />
+      <Hero />
+      <LogoTicker />
+
+      <Features />
+
+      <ProductShowcase />
+      <FAQs />
+      <Pricing/>
+
+      <CallToAction />
+      </div>
+      <Footer />
+    </>
+  );
+}
diff --git a/src/assets/icons/arrow-w.svg b/src/assets/icons/arrow-w.svg
diff --git a/src/assets/icons/ecosystem.svg b/src/assets/icons/ecosystem.svg
diff --git a/src/assets/icons/insta.svg b/src/assets/icons/insta.svg
diff --git a/src/assets/icons/linkedin.svg b/src/assets/icons/linkedin.svg
diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg
diff --git a/src/assets/icons/menu.svg b/src/assets/icons/menu.svg
diff --git a/src/assets/icons/minus.svg b/src/assets/icons/minus.svg
diff --git a/src/assets/icons/pinterest.svg b/src/assets/icons/pinterest.svg
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
diff --git a/src/assets/icons/tiktok.svg b/src/assets/icons/tiktok.svg
diff --git a/src/assets/icons/x-social.svg b/src/assets/icons/x-social.svg
diff --git a/src/assets/icons/x.svg b/src/assets/icons/x.svg
diff --git a/src/assets/icons/youtube.svg b/src/assets/icons/youtube.svg
diff --git a/src/assets/images/acme.png b/src/assets/images/acme.png
diff --git a/src/assets/images/apex.png b/src/assets/images/apex.png
diff --git a/src/assets/images/app-screen.png b/src/assets/images/app-screen.png
diff --git a/src/assets/images/celestial.png b/src/assets/images/celestial.png
diff --git a/src/assets/images/cursor.png b/src/assets/images/cursor.png
diff --git a/src/assets/images/echo.png b/src/assets/images/echo.png
diff --git a/src/assets/images/eldoraui.png b/src/assets/images/eldoraui.png
diff --git a/src/assets/images/emojistar.png b/src/assets/images/emojistar.png
diff --git a/src/assets/images/helix2.png b/src/assets/images/helix2.png
diff --git a/src/assets/images/logosaas.png b/src/assets/images/logosaas.png
diff --git a/src/assets/images/message.png b/src/assets/images/message.png
diff --git a/src/assets/images/product.avif b/src/assets/images/product.avif
diff --git a/src/assets/images/pulse.png b/src/assets/images/pulse.png
diff --git a/src/assets/images/quantum.png b/src/assets/images/quantum.png
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+
+
+export function Banner() {
+  return (
+    <div className="relative top-0 bg-black py-3 text-white md:py-0 border-b border-white/20">
+      <div className="container flex flex-col items-center justify-center gap-4 md:h-12 md:flex-row">
+        <Link
+          href="https://github.com/karthikmudunuri/eldoraui"
+          target="_blank"
+          className="group inline-flex items-center justify-center text-center text-sm leading-loose"
+        >
+          ✨
+          <span className="font-bold">
+            {" "}
+            ⭐WEBSITE BY YASH OZA 
+          </span>{" "}
+          <ChevronRight className="ml-1 size-4 transition-all duration-300 ease-out group-hover:translate-x-1" />
+        </Link>
+      </div>
+
+
+    </div>
+  );
+}
diff --git a/src/components/CallToAction.tsx b/src/components/CallToAction.tsx
@@ -0,0 +1,43 @@
+"use client"
+import HelixImage from '../assets/images/helix2.png'
+import EmojiImage from '../assets/images/emojistar.png'
+import Image from 'next/image';
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { useRef } from 'react';
+
+export const CallToAction = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end end"]
+  })
+
+  const translateY = useTransform(scrollYProgress, [0, 1], [50, -50]);
+
+  return (
+    <div className="bg-black text-white py-[72px] sm:py-24" ref={containerRef}>
+      <div className="container max-w-xl relative">
+        <motion.div style={{ translateY }}>
+          <Image src={HelixImage} alt="helix" className="absolute top-6 left-[calc(100%+36px)]" />
+        </motion.div>
+        <motion.div style={{ translateY }}>
+          <Image src={EmojiImage} alt="emoji" className="absolute -top-[120px] right-[calc(100%+30px)]" />
+        </motion.div>
+
+        <h2 className="font-bold text-5xl sm:text-6xl tracking-tighter">Maximize Your Solar Efficiency</h2>
+<p className="text-xl text-white/70 mt-5">Discover how our cutting-edge solar tracking system can boost your energy output and save on costs. Sign up now to get started with the most advanced solar technology.</p>
+
+
+        <form className="mt-10 flex flex-col gap-2.5 max-w-sm mx-auto sm:flex-row">
+          <input 
+            type="email" 
+            placeholder="" 
+            className="h-12 bg-white/20 rounded-lg px-5 font-medium placeholder:text-[#9CA3AF] sm:flex-1"
+          />
+          <button className="bg-white text-black h-12 rounded-lg px-5">Get access</button>
+        </form>
+      </div>
+    </div>
+  )
+};
diff --git a/src/components/FAQs.tsx b/src/components/FAQs.tsx
@@ -0,0 +1,72 @@
+"use client"
+import { useState } from "react";
+import PlusIcon from "../assets/icons/plus.svg";
+import MinusIcon from "../assets/icons/minus.svg";
+import clsx from "clsx";
+import {motion , AnimatePresence} from 'framer-motion';
+const items = [
+  {
+    question: "What is the cost of installing the solar tracking system?",
+    answer:
+      "The cost of installation depends on several factors, including the size of your solar array and your specific location. Please contact our sales team for a customized quote based on your needs and location.",
+  },
+  {
+    question: "How does the solar tracking system improve efficiency?",
+    answer:
+      "Our solar tracking system automatically adjusts the angle of your solar panels to follow the sun’s path throughout the day. This ensures that your panels receive maximum sunlight exposure, increasing energy production by up to 30% compared to fixed systems.",
+  },
+  {
+    question: "Can I retrofit the solar tracker to my existing solar panels?",
+    answer:
+      "Yes, our solar tracking system is designed to be compatible with most existing solar panel setups. Our installation team will evaluate your current system and make any necessary adjustments to ensure a smooth integration.",
+  },
+  {
+    question: "What maintenance is required for the solar tracking system?",
+    answer:
+      "The solar tracking system is designed for minimal maintenance. Regular checks and occasional cleaning of the panels are recommended to ensure optimal performance. Our support team provides detailed maintenance guidelines and is available for assistance if needed.",
+  },
+];
+
+const AccordinationItem = ({question, answer}:{question:string, answer: string}) => {
+  const[isOpen, setIsOpen] = useState(false);
+  return(
+
+    <div className=" py-7 border-b border-white/30" onClick={() => setIsOpen(!isOpen)}>
+    <div className="flex items-center ">
+      <span className="flex-1 text-lg font-bold">{question}</span>
+      {isOpen ? <MinusIcon /> :<PlusIcon />}
+
+      </div>
+      <AnimatePresence>
+      {isOpen && (
+        <motion.div 
+        initial={{opacity: 0, height: 0, marginTop: 0}}
+        animate={{opacity: 1, height: "auto" , marginTop:'16px'}}
+        exit={{opacity: 0, height: 0, marginTop: 0}}
+          >{answer}</motion.div>
+
+      )}
+      </AnimatePresence>
+
+  </div>
+
+
+  )
+}
+
+export const FAQs = () => {
+  return (
+    <div className="bg-black text-white py-[72px] sm:py-24 bg-gradient-to-b from-[#5D2CA8] to-black ">
+      <div className="container">
+        <h2 className="text-5xl sm:text-6xl sm:w-[648px] mx-auto text-center text-white tracking-tighter">
+          Frequently Asked Questions
+        </h2>
+        <div className="mt-12 max-w-[648px] mx-auto">
+         {items.map(({question, answer}) => (
+            <AccordinationItem question={question} answer={answer} key={question}/>
+         ))}
+        </div>
+      </div>
+    </div>
+  )
+};