first commit

kennethmuyoyo · Jun 26, 2023 · 91d4c09 · 91d4c09
commit 91d4c09
Show file tree

Hide file tree

Showing 75 changed files with 6,869 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import ExportivaParagraph from '../components/Text/ExportivaParagraph';
+import '../styles/globals.css';
+import { Inter } from 'next/font/google';
+
+export const metadata = {
+  title: 'Exportiva',
+  description: 'Number 1 Exports Agency',
+};
+
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+const RootLayout: React.FC<RootLayoutProps> = ({ children }) => (
+  <html lang="en">
+    <body>
+      <div className="main">
+        <div className="gradient" />
+      </div>
+
+      <main className="app">{children}</main>
+    </body>
+  </html>
+);
+
+export default RootLayout;
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,39 @@
+"use client"
+import React from 'react';
+import Navbar from '../components/Navbar';
+import HeroSection from '../sections/HeroSection';
+import Footer from '../components/Footer';
+import About from '../sections/About';
+import Services from '../sections/Services';
+import Products from '../sections/Products';
+import Countries from '../sections/Countries';
+import Contact from '../components/Contact';
+import CertificationsBanner from '../sections/CertificationsBanner';
+
+function Page() {
+  return (
+    <>
+      <Navbar />
+      <div id="Home">
+        <HeroSection />
+      </div>
+      <div id="About">
+        <About />
+      </div>
+      <div id="Services">
+        <Services />
+      </div>
+      <div id="Products">
+        <Products />
+        <CertificationsBanner />
+        <Countries />
+      </div>
+      <div id="Contact">
+        <Contact />
+      </div>
+      <Footer />
+    </>
+  );
+}
+
+export default Page;
diff --git a/components/Buttons/ButtonGreen.tsx b/components/Buttons/ButtonGreen.tsx
@@ -0,0 +1,21 @@
+"use client"
+import { title } from 'process'
+import React from 'react'
+
+interface props{
+    buttonTitle: string
+    handleClick: ()=>void
+}
+
+function ButtonGreen({buttonTitle,handleClick}:props) {
+  return (
+    <button 
+    type="button" 
+    onClick={handleClick}
+    className="font-montserrat font-semibold text-white bg-green-500 border border-green-500 hover:bg-green-600 rounded-lg text-lg px-6 py-3">
+        {buttonTitle}
+    </button>
+  )
+}
+
+export default ButtonGreen
diff --git a/components/Buttons/ButtonWhite.tsx b/components/Buttons/ButtonWhite.tsx
@@ -0,0 +1,21 @@
+"use client"
+import { title } from 'process'
+import React from 'react'
+
+interface props{
+    buttonTitle: string
+    handleClick: ()=>void
+}
+
+function ButtonWhite({buttonTitle,handleClick}:props) {
+  return (
+    <button 
+    type="button" 
+    onClick={handleClick}
+    className="font-montserrat font-semibold text-green-600 bg-white hover:bg-green-600 border border-green-600 hover:text-white rounded-lg text-sm px-5 py-2.5 mr-2 mb-2">
+        {buttonTitle}
+    </button>
+  )
+}
+
+export default ButtonWhite
diff --git a/components/Card/Infocard.tsx b/components/Card/Infocard.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+
+export default function Infocard() {
+  return (
+    <div className="p-6 w-full mx-auto bg-white rounded-xl shadow-md flex flex-col sm:flex-row items-center space-x-4 gap-12 sm:gap-0">
+      <div className="flex-1 flex flex-col items-center">
+        <span className="font-montserrat text-sm sm:text-xl mb-2">QUALITY</span>
+        <div className="h-12 w-30 flex items-center justify-center rounded-full transform hover:scale-150 transition duration-300 ease-in-out">
+          <Image src="/Quality.png" alt="Quality" width={50} height={50} />
+        </div>
+      </div>
+      <div className="flex-1 flex flex-col items-center">
+        <span className="font-montserrat text-sm sm:text-xl mb-2">FRESH</span>
+        <div className="h-12 w-30 flex items-center justify-center rounded-full transform hover:scale-150 transition duration-300 ease-in-out">
+          <Image src="/Freshness.png" alt="Fresh" width={50} height={50} />
+        </div>
+      </div>
+      <div className="flex-1 flex flex-col items-center">
+        <span className="font-montserrat text-sm sm:text-xl mb-2">RELIABLE</span>
+        <div className="h-12 w-30 flex items-center justify-center rounded-full transform hover:scale-150 transition duration-300 ease-in-out">
+          <Image src="/Reliable.png" alt="Reliable" width={50} height={50} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Contact.tsx b/components/Contact.tsx
@@ -0,0 +1,152 @@
+import { useState, ChangeEvent } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import { Switch } from '@headlessui/react';
+import Image from 'next/image';
+
+function classNames(...classes: Array<string | boolean>): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function Example() {
+  const [agreed, setAgreed] = useState<boolean>(false);
+
+  const handleSwitchChange = (checked: boolean) => {
+    setAgreed(checked);
+  };
+
+  return (
+    <div className="isolate bg-white px-6 py-16 sm:py-24 lg:px-8">
+      <div
+        className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]"
+        aria-hidden="true"
+      >
+        <div
+          className="relative left-1/2 -z-10 aspect-[1155/678] w-[36.125rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-40rem)] sm:w-[72.1875rem]"
+          style={{
+            clipPath:
+              'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+          }}
+        />
+      </div>
+      <div className="mx-auto max-w-2xl text-center">
+        <h2 className="font-montserrat font-semibold sm:text-2xl text-xl tracking-tight text-gray-900">CONTACT US</h2>
+        <div className='flex justify-center mb-6'>
+          <Image src="/separator.png" alt="About us" height={200} width={200}/>
+        </div>
+        <p className="text-lg font-montserrat leading-8 text-black">
+          Reach out to us today
+        </p>
+      </div>
+      <form action="#" method="POST" className="mx-auto mt-16 max-w-xl sm:mt-20">
+        <div className="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">
+          <div>
+            <label htmlFor="first-name" className="block text-sm font-montserrat font-semibold leading-6 text-gray-900">
+              First name
+            </label>
+            <div className="mt-2.5">
+              <input
+                type="text"
+                name="first-name"
+                id="first-name"
+                autoComplete="given-name"
+                className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+          <div>
+            <label htmlFor="last-name" className="block text-sm font-montserrat font-semibold leading-6 text-gray-900">
+              Last name
+            </label>
+            <div className="mt-2.5">
+              <input
+                type="text"
+                name="last-name"
+                id="last-name"
+                autoComplete="family-name"
+                className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+          <div className="sm:col-span-2">
+            <label htmlFor="email" className="block text-sm font-montserrat font-semibold leading-6 text-gray-900">
+              Email
+            </label>
+            <div className="mt-2.5">
+              <input
+                type="email"
+                name="email"
+                id="email"
+                autoComplete="email"
+                className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+          <div className="sm:col-span-2">
+            <label htmlFor="phone-number" className="block text-sm font-montserrat font-semibold leading-6 text-gray-900">
+              Phone number
+            </label>
+            <div className="mt-2.5">
+              <input
+                type="tel"
+                name="phone-number"
+                id="phone-number"
+                autoComplete="tel"
+                className="block w-full rounded-md border-0 px-3.5 py-2 pl-20 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+          <div className="sm:col-span-2">
+            <label htmlFor="message" className="block text-sm font-montserrat font-semibold leading-6 text-gray-900">
+              Message
+            </label>
+            <div className="mt-2.5">
+              <textarea
+                name="message"
+                id="message"
+                rows={4}
+                className="block w-full rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                defaultValue={''}
+              />
+            </div>
+          </div>
+          <Switch.Group as="div" className="flex gap-x-4 sm:col-span-2">
+            <div className="flex h-6 items-center">
+              <Switch
+                checked={agreed}
+                onChange={setAgreed}
+                className={classNames(
+                  agreed ? 'bg-indigo-600' : 'bg-gray-200',
+                  'flex w-8 flex-none cursor-pointer rounded-full p-px ring-1 ring-inset ring-gray-900/5 transition-colors duration-200 ease-in-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600'
+                )}
+              >
+                <span className="sr-only">Agree to policies</span>
+                <span
+                  aria-hidden="true"
+                  className={classNames(
+                    agreed ? 'translate-x-3.5' : 'translate-x-0',
+                    'h-4 w-4 transform rounded-full bg-white shadow-sm ring-1 ring-gray-900/5 transition duration-200 ease-in-out'
+                  )}
+                />
+              </Switch>
+            </div>
+            <Switch.Label className="text-sm leading-6 text-gray-600">
+              By selecting this, you agree to our{' '}
+              <a href="#" className="font-semibold text-indigo-600">
+                privacy&nbsp;policy
+              </a>
+              .
+            </Switch.Label>
+          </Switch.Group>
+        </div>
+        <div className="mt-10">
+          <button
+            type="submit"
+            className="block w-full rounded-md bg-green-600 px-3.5 py-2.5 text-center text-sm font-semibold font-montserrat text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+          >
+            Send
+          </button>
+        </div>
+      </form>
+    </div>
+  )
+}