+
+ )
+};
diff --git a/src/components/FAQs.tsx b/src/components/FAQs.tsx
new file mode 100644
index 0000000..ab55e2a
--- /dev/null
+++ 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(
+
+
+
+
+
+
+
+
+ Maximize Your Solar Efficiency
+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.
+ + + + setIsOpen(!isOpen)}>
+
+ {isOpen && (
+ {answer}
+
+ )}
+
+
+
+
+
+ )
+}
+
+export const FAQs = () => {
+ return (
+
+ {question}
+ {isOpen ?
+
+
+ )
+};
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
new file mode 100644
index 0000000..8665eec
--- /dev/null
+++ b/src/components/Features.tsx
@@ -0,0 +1,27 @@
+import Bentodemo from './bentogrid';
+
+export const Features = () => {
+ return (
+
+
+
+ + Frequently Asked Questions +
+
+ {items.map(({question, answer}) => (
+
+ ))}
+
+
+
+
+ )
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..e24d9d2
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,24 @@
+
+import InstaIcon from '../assets/icons/insta.svg'
+import XIcon from '../assets/icons/x-social.svg'
+import LinkedInIcon from '../assets/icons/linkedin.svg'
+import YoutubeIcon from '../assets/icons/youtube.svg'
+
+export const Footer = () => {
+ return(
+
+ )
+};
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..c1d3fcf
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,36 @@
+"use client";
+import ArrowIcon from '../assets/icons/arrow-w.svg';
+import Image from 'next/image';
+import { motion } from 'framer-motion';
+import { AnimatedGradientTextDemo } from './animatedtext';
+
+export const Hero = () => {
+ return (
+
+
+
+
+ Everything You Need
+
+
+
+ + Experience unparalleled solar efficiency with our advanced tracking system. It seamlessly follows the sun path, delivering maximum energy output and transforming the way you harness solar power. +
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/LogoTicker.tsx b/src/components/LogoTicker.tsx
new file mode 100644
index 0000000..307dabb
--- /dev/null
+++ b/src/components/LogoTicker.tsx
@@ -0,0 +1,31 @@
+import acmeLogo from "../assets/images/acme.png";
+import quantumLogo from "../assets/images/quantum.png";
+import echoLogo from "../assets/images/echo.png";
+import celestialLogo from "../assets/images/celestial.png";
+import pulseLogo from "../assets/images/pulse.png";
+import apexLogo from "../assets/images/apex.png";
+import Image from 'next/image';
+import LogoCarousel from "./companylogos";
+
+const images = [
+ { src: acmeLogo, alt: "Acme Logo" },
+ { src: quantumLogo, alt: "Quantum Logo" },
+ { src: echoLogo, alt: "Echo Logo" },
+ { src: celestialLogo, alt: "Celestial Logo" },
+ { src: pulseLogo, alt: "Pulse Logo" },
+ { src: apexLogo, alt: "Apex Logo" },
+];
+
+export const LogoTicker = () => {
+ return(
+
+
+
+
+
+
+
+
+ Project SunFlower
+
+
+ Project SunFlower
+
+
+
+ + Experience the future of solar energy with our groundbreaking sun-tracking system! This revolutionary product transforms sunlight into maximum power, effortlessly following the sun path. Say goodbye to energy waste and hello to unmatched efficiency. It is not just a solar panel— + + + it is the smartest energy solution of all time! +
+
+
+
+
+
+ )
+};
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..7614d18
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,41 @@
+
+import LogoImage from '../assets/icons/logo.svg';
+import MenuIcon from '../assets/icons/menu.svg';
+
+
+export const Navbar = () => {
+ return (
+
+
+
+ Trusted by world's most innovative teams
+
+
+ )
+};
diff --git a/src/components/Pricingdemo.tsx b/src/components/Pricingdemo.tsx
new file mode 100644
index 0000000..ff509b0
--- /dev/null
+++ b/src/components/Pricingdemo.tsx
@@ -0,0 +1,29 @@
+import Bentodemo from './bentogrid';
+import PricingTable, { PricingTab } from './pricing';
+
+export const Pricing = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/components/ProductShowcase.tsx b/src/components/ProductShowcase.tsx
new file mode 100644
index 0000000..fa7dba2
--- /dev/null
+++ b/src/components/ProductShowcase.tsx
@@ -0,0 +1,44 @@
+"use client"
+import appScreen from "../assets/images/product.avif";
+import Image from 'next/image';
+import {motion , useScroll, useTransform} from 'framer-motion';
+import { useEffect, useRef } from "react";
+export const ProductShowcase = () => {
+ const appImage = useRef
+
+
+
+ Choose Your Plan
+
+
+
+
+ + Find the perfect solar tracking solution for your energy needs. Whether it is for residential, commercial, or industrial use, we have a plan designed to maximize your solar output and savings. +
+
+
+
+
+
+ )
+};
diff --git a/src/components/animatedgradienttext.tsx b/src/components/animatedgradienttext.tsx
new file mode 100644
index 0000000..b98272b
--- /dev/null
+++ b/src/components/animatedgradienttext.tsx
@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+
+import { cn } from "../components/lib/utils";
+
+export default function AnimatedGradientText({
+ children,
+ className,
+}: {
+ children: ReactNode;
+ className?: string;
+}) {
+ return (
+
+
+
+ Intuitive Interface
+
+
+
+ + Effortlessly monitor and control your solar tracker with our user-friendly interface. Get real-time insights, adjust settings, and maximize energy production—all at your fingertips. +
+
+
+
+
+
+
+
+
+ {children}
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/animatedtext.tsx b/src/components/animatedtext.tsx
new file mode 100644
index 0000000..15ef363
--- /dev/null
+++ b/src/components/animatedtext.tsx
@@ -0,0 +1,23 @@
+"use client"
+import { ChevronRight } from "lucide-react";
+
+import { cn } from "../components/lib/utils";
+import AnimatedGradientText from "./animatedgradienttext";
+
+export function AnimatedGradientTextDemo() {
+ return (
+
+
+ 🎉
{" "} + + Version 2.0 is here + +
+
+ );
+}
diff --git a/src/components/bentogrid.tsx b/src/components/bentogrid.tsx
new file mode 100644
index 0000000..668c9ab
--- /dev/null
+++ b/src/components/bentogrid.tsx
@@ -0,0 +1,304 @@
+"use client"
+import React, { useState, useEffect, useRef } from 'react';
+import { motion } from 'framer-motion';
+
+const logos = [
+ "https://res.cloudinary.com/dl2adjye7/image/upload/v1716817722/Amazon_icon.svg_a4qmtg.png",
+ "https://res.cloudinary.com/dl2adjye7/image/upload/v1716800282/Apple_logo_black.svg_seeetv.png",
+ "https://res.cloudinary.com/dl2adjye7/image/upload/v1716800359/WISE.L-b3d3de3c_rexehe.png"
+];
+
+const lineWidth = 80;
+const lineHeight = 2;
+
+const LogoBeam = () => {
+ return (
+ {" "} + + Version 2.0 is here + +
+
+ );
+};
+
+const data = [50, 40, 300, 320, 500, 350, 200, 230, 500];
+const maxData = Math.max(...data);
+const chartHeight = 400;
+const chartWidth = 800;
+
+const CardWithEffect = ({ children }: { children: React.ReactNode }) => {
+ const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
+ const [isHovered, setIsHovered] = useState(false);
+
+ const handleMouseMove = (e: React.MouseEvent
+
+
+ 
+
+
+
+
+ 
+
+
+
+
+ 
+
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ style={{ willChange: 'transform' }}
+ >
+ {isHovered && (
+
+ )}
+ {children}
+
+ );
+};
+
+const AWSIcon = () => {
+
+
+ return (
+
+
+ );
+};
+
+const BentoBox1 = () => {
+ const chartRef = useRef(null);
+ const [isChartVisible, setIsChartVisible] = useState(false);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ setIsChartVisible(true);
+ observer.unobserve(entry.target);
+ }
+ });
+ },
+ {
+ threshold: 0.5,
+ }
+ );
+
+ if (chartRef.current) {
+ observer.observe(chartRef.current);
+ }
+
+ return () => {
+ if (chartRef.current) {
+ observer.unobserve(chartRef.current);
+ }
+ };
+ }, [chartRef]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Solar Tracking Integration
+Seamlessly integrate our solar tracker with your existing systems.
+
+
+ );
+};
+
+
+function Bentodemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Solar Output
+
+
+ Efficiency
+
+
+
+
+
+ {Array.from(Array(7).keys()).map((i) => (
+
+
+ {`${10 + i * 10}%`}
+
+
+ ))}
+
+
+ Incredible Growth
+Maximize Solar Power directly addresses the main benefit of your solar tracking system
+
+
+
+
+
+
+
+
+
+
+ Advanced Solar Tracking
+Optimize energy capture effortlessly with state-of-the-art tracking technology that moves with the sun, ensuring maximum output every single day.
+ +
+
+ );
+}
+
+export default Bentodemo;
+
\ No newline at end of file
diff --git a/src/components/companylogos.tsx b/src/components/companylogos.tsx
new file mode 100644
index 0000000..ba6e63d
--- /dev/null
+++ b/src/components/companylogos.tsx
@@ -0,0 +1,38 @@
+import Image from 'next/image'
+import acmeLogo from "../assets/images/acme.png";
+import quantumLogo from "../assets/images/quantum.png";
+import echoLogo from "../assets/images/echo.png";
+import celestialLogo from "../assets/images/celestial.png";
+import pulseLogo from "../assets/images/pulse.png";
+import apexLogo from "../assets/images/apex.png";
+
+export default function LogoCarousel() {
+
+ const logos = [
+ { src: acmeLogo, alt: "Acme Logo" },
+ { src: quantumLogo, alt: "Quantum Logo" },
+ { src: echoLogo, alt: "Echo Logo" },
+ { src: celestialLogo, alt: "Celestial Logo" },
+ { src: pulseLogo, alt: "Pulse Logo" },
+ { src: apexLogo, alt: "Apex Logo" },
+ ]
+
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/lib/utils.ts b/src/components/lib/utils.ts
new file mode 100644
index 0000000..01c767d
--- /dev/null
+++ b/src/components/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/components/pricing.tsx b/src/components/pricing.tsx
new file mode 100644
index 0000000..2e35c3d
--- /dev/null
+++ b/src/components/pricing.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import { useState } from 'react'
+
+interface PricingTabProps {
+ yearly: boolean
+ popular?: boolean
+ planName: string
+ price: {
+ monthly: number
+ yearly: number
+ }
+ planDescription: string
+ features: string[]
+}
+
+export function PricingTab(props: PricingTabProps) {
+ return (
+ -
+ {logos.map((logo, index) => (
+
-
+
+
+ ))}
+
+
+ )
+}
+
+export default function PricingTable() {
+ const [isAnnual, setIsAnnual] = useState
+ {props.popular && (
+
+
+
+ )}
+ Most Popular
+
+
+ {props.planName}
+
+ $
+ {props.yearly ? props.price.yearly : props.price.monthly}
+ /mo
+
+ {props.planDescription}
+
+ Purchase Plan
+
+ Includes:
+ -
+ {props.features.map((feature, index) => {
+ return (
+
- + + {feature} + + ) + })} +
+
+ {/* Pricing toggle */}
+
+ )
+}
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+ {/* Pricing tab 1 */}
+
+
+